Alpine.js Playground

<div x-data="{ showModal: false }">
<button @click="showModal = true" class="px-4 py-2 bg-blue-500 text-white rounded">Open Modal</button>
<div x-show="showModal" x-on:keydown.escape.window="showModal = false" class="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50 z-10">
<div class="bg-white p-6 rounded shadow-lg w-96" @click.away="showModal = false">
<h2 class="text-xl font-semibold mb-4">Hey There!</h2>
<button @click="showModal = false" class="absolute top-5 right-5 text-gray-400 hover:text-gray-600">x</button>
<p>This is a simple modal powered by Alpine.js</p>
</div>
</div>
</div>

<form x-data="{ email: '', errors: {} }">
<input type="email" x-model="email" @keydown.enter.prevent">
<template x-if="!email.endsWith('&#039;'@example.com')">
<div class="text-red-500 text-xs mt-1">Please provide a valid email</div>
</template>
<button type="submit" disabled>Submit</button>
</form>

<div x-data="{ open: false }" class="relative">
<button @click="open = !open" class="px-4 py-2 bg-blue-500 text-white rounded">Open Menu
<svg class="w-4 h-4 ml-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
</svg>
</button>
<transition>
<div x-show="open" @click.away="open = false" class="absolute z-10 mt-2 w-48 bg-white shadow-lg rounded border border-slate-200">
<a href="#" class="block px-4 py-2 hover:bg-slate-100">Profile</a>
<a href="#" class="block px-4 py-2 hover:bg-slate-100">Settings</a>
</div>
</transition>
</div>