Need an Appointment

<div class="rounded-button bg-cover bg-center p-10 flex justify-center md:block"

     style="<?= renderImageUrl('need-appointment.png', 'cms', 'background-blur') ?>"

     <?= renderImageUrl('need-appointment.png', 'cms', 'background') ?>

>

    <div class="rounded-button bg-ui-medium max-w-[360px] gap-2.5 p-10 flex flex-col md:ml-[20%]">

        <span class="text-xl font-semibold">Besoin d'un rendez-vous ?</span>

        <div class="form-element form-select w-full"

             x-data="selectInput"

             :class="{ 'active' : active }"

             @click.away="active = false"

        >

            <input x-ref="input" name="city" class="" id="city" type="text" pattern="\S+" x-model="currentValue">

            <div x-ref="display" @click="toggle()" class="form-input select rounded-button bg-white" x-text="currentLabel"></div>

            <label @click="toggle()" :class="{ 'moved' : full }" for="city">Sélectionnez un service</label>

            <ul x-ref="options" class="select-options" x-show="active">

                <li><button type="button" @click="setValue('service', 'Service')">Service</button></li>

            </ul>

        </div>

        <button class="btn btn-primary btn-full-width">Continuer</button>

    </div>

</div>