My status

<div class="bg-white rounded-button flex flex-col w-full md:p-7 p-5 gap-2.5">

    <span class="font-semibold md:text-2xl text-xl">Mes statut</span>

    <div class="flex md:flex-row flex-col gap-2 items-start md:items-center">

        <span class="md:text-base text-smaller">Vous êtes</span>

        <div class="form-element form-select without-label"

             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 tiny-select" x-text="currentLabel"></div>

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

                <li>

                    <button type="button" @click="setValue('admin', 'Admin')">Administrateur de compte</button>

                </li>

                <li>

                    <button type="button" @click="setValue('membre', 'Membre')">Membre de tressol chabrier</button>

                </li>

            </ul>

        </div>

    </div>

</div>