<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>

    <ul
        x-show="open"
        @click.away="open = false"
        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>
</div>

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.5.1/tailwind.min.css

External JavaScript

  1. https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js