<div class="relative" x-data="{ open: false }">
	<button class="focus:outline-none transition-all duration-150 focus:shadow-outline px-6 py-2 rounded bg-blue-600 text-white" @click="open = true">AlpineJS 👇</button>

	<ul class="absolute rounded w-64 p-3 mt-4 bg-white shadow-md right-0" x-show="open" @click.away="open = false" x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0 transform scale-90" x-transition:enter-end="opacity-100 transform scale-100" x-transition:leave="transition ease-in duration-300" x-transition:leave-start="opacity-100 transform scale-100" x-transition:leave-end="opacity-0 transform scale-90">
		<li class="py-2 border-b text-sm">😱 El TailwindCSS para JavaScript</li>
		<li class="py-2 border-b text-sm">🧙‍♂️ Transiciones rápidas y fáciles</li>
		<li class="py-2 border-b text-sm">👨‍💻 Compatibilidad con Tailwind al 100%</li>
		<li class="py-2 text-sm">👴 Compatibilidad con IE</li>
	</ul>
</div>