<div x-data="{ open: false }">
    <button @click="open = true" class="m-2 p-2 text-sm font-medium bg-gray-200 rounded-lg outline-none focus:outline-none">Open Dropdown</button>

    <template x-if="open">
        <ul
            @click.away="open = false"
            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"
            class="shadow-sm p-5 rounded max-w-sm ml-2 border border-gray-200"
        >
            <li>Dropdown Item 1</li>
            <li>Dropdown Item 2</li>
            <li>Dropdown Item 3</li>
        </ul>
    </template>
</div>