<div x-data="{ dropdownOpen: false }" class="relative">

    <!-- Button Dropdown -->
    <button type="button" @click="dropdownOpen=true" class="flex items-center -mx-3 px-3 py-2 font-medium text-neutral-900" aria-expanded="false">
        <span>Dropdown</span> 
        <svg :class="{ '-rotate-180' : dropdownOpen }" class="ml-1 size-4 ease-out duration-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="6 9 12 15 18 9"></polyline></svg>
    </button>

    <!-- Container Transition -->
    <div x-show="dropdownOpen" 
        @click.away="dropdownOpen=false"
        x-transition:enter="ease-out duration-200"
        x-transition:enter-start="-translate-y-2"
        x-transition:enter-end="translate-y-0"
        x-cloak>

        <!-- Links -->
        <div class="space-y-4 grid grid-cols-1 *:text-sm *:text-neutral-500 *:mx-4 *:font-medium">
            <ul class="space-y-3">
                <li>
                    <a href="#">Link 1</a>
                </li>
                <li>
                    <a href="#">Link 2</a>
                </li>
                <li>
                    <a href="#">Link 3</a>
                </li>
            </ul>
        </div>
    </div>

</div>