<div
    x-data="{ open: false }"
    class="w-full flex flex-col items-start"
>
    <div>
        <button @click="open = !open" class="bg-white rounded px-8 py-2">Select</button>
    </div>
    <div
        x-cloak
        x-show="open"
        class="mt-1 bg-white rounded"
        x-transition:enter="transition ease-out origin-top-left duration-200"
        x-transition:enter-start="opacity-0 transform scale-90"
        x-transition:enter-end="opacity-100 transform scale-100"
        x-transition:leave="transition origin-top-left ease-in duration-100"
        x-transition:leave-start="opacity-100 transform scale-100"
        x-transition:leave-end="opacity-0 transform scale-90"
    >
        <ul class="space-y-2">
            <li class="w-full">
                <a href="#" class="px-8 py-2 rounded w-full block hover:bg-gray-100">Option</a>
            </li>
            <li class="w-full">
                <a href="#" class="px-8 py-2 rounded w-full block hover:bg-gray-100">Option</a>
            </li>
            <li class="w-full">
                <a href="#" class="px-8 py-2 rounded w-full block hover:bg-gray-100">Option</a>
            </li>
        </ul>
    </div>
</div>