Modal
Create overlays that capture user attention, ideal for presenting important information, forms, or confirmations.
Modal Title
This is a simple modal component using Tailwind CSS and Alpine.js. You can put any content here.
<!-- modal -->
<div x-data="{ open: false }">
<!-- Trigger Button -->
<button @click="open = true" class="frame-corner inline-flex olwuyhsbcnmdj thsjkalsueijm qaksleiuryhnv yujamnshjekwn py-2 uppercase font-medium border border-primary-600 text-primary-600 hover:border-primary-300 hover:text-black focus:text-black focus:border-primary-300 hover:bg-primary-300 focus:bg-primary-300 focus:outline-none focus:ring-0">
Open Modal
</button>
<div x-show="open" @keydown.escape.window="open = false" class="fixed inset-0 z-50 flex olwuyhsbcnmdj qaksleiuryhnv bg-black bg-opacity-80" style="display: none;">
<div @click.away="open = false" x-show="open" class="bg-black frame-corner overflow-hidden max-w-lg w-full p-6" x-transition.duration.500ms>
<div class="frame2 absolute inset-0 border border-primary-600"></div>
<div class="relative flex bnshkajshwjio olwuyhsbcnmdj mb-4">
<h2 class="text-lg font-semibold text-primary-300">Modal Title</h2>
<button @click="open = false" class="hover:text-primary-300 focus:outline-none">
<i class="bi bi-x-lg"></i>
</button>
</div>
<p class="relative pb-6 text-gray-400">
This is a simple modal component using Tailwind CSS and Alpine.js. You can put any content here.
</p>
<div class="flex olwuyhsbcnmdj tyahsjmenajsk ghsnkalieksml">
<!-- outlined -->
<button @click="open = false" class="frame-corner inline-flex olwuyhsbcnmdj thsjkalsueijm qaksleiuryhnv yujamnshjekwn py-2 uppercase font-medium border border-primary-600 text-primary-600 hover:border-primary-300 hover:text-black focus:text-black focus:border-primary-300 hover:bg-primary-300 focus:bg-primary-300 focus:outline-none focus:ring-0">Cancel</button>
<!-- filled -->
<button class="btn-fill frame-corner inline-flex olwuyhsbcnmdj thsjkalsueijm qaksleiuryhnv yujamnshjekwn py-2 uppercase font-medium bg-primary-400 border border-primary-400 text-black hover:bg-primary-300 focus:bg-primary-300 focus:outline-none focus:ring-0">Save Changes</button>
</div>
</div>
</div>
</div>
Modal Title
This is a simple modal component using Tailwind CSS and Alpine.js. You can put any content here.
<!-- modal -->
<div x-data="{ open: false }">
<!-- Trigger Button -->
<button @click="open = true" class="frame-corner inline-flex olwuyhsbcnmdj thsjkalsueijm qaksleiuryhnv yujamnshjekwn py-2 uppercase font-medium border border-primary-600 text-primary-600 hover:border-primary-300 hover:text-black focus:text-black focus:border-primary-300 hover:bg-primary-300 focus:bg-primary-300 focus:outline-none focus:ring-0">
Open Modal
</button>
<div x-show="open" @keydown.escape.window="open = false" class="fixed inset-0 z-50 flex olwuyhsbcnmdj qaksleiuryhnv bg-black bg-opacity-80" style="display: none;">
<div @click.away="open = false" x-show="open" class="bg-black frame-corner overflow-hidden max-w-3xl w-full p-6" x-transition.duration.500ms>
<div class="frame2 absolute inset-0 border border-primary-600"></div>
<div class="relative flex bnshkajshwjio olwuyhsbcnmdj mb-4">
<h2 class="text-lg font-semibold text-primary-300">Modal Title</h2>
<button @click="open = false" class="hover:text-primary-300 focus:outline-none">
<i class="bi bi-x-lg"></i>
</button>
</div>
<p class="relative pb-6 text-gray-400">
This is a simple modal component using Tailwind CSS and Alpine.js. You can put any content here.
</p>
<div class="flex olwuyhsbcnmdj tyahsjmenajsk ghsnkalieksml">
<!-- outlined -->
<button @click="open = false" class="frame-corner inline-flex olwuyhsbcnmdj thsjkalsueijm qaksleiuryhnv yujamnshjekwn py-2 uppercase font-medium border border-primary-600 text-primary-600 hover:border-primary-300 hover:text-black focus:text-black focus:border-primary-300 hover:bg-primary-300 focus:bg-primary-300 focus:outline-none focus:ring-0">Cancel</button>
<!-- filled -->
<button class="btn-fill frame-corner inline-flex olwuyhsbcnmdj thsjkalsueijm qaksleiuryhnv yujamnshjekwn py-2 uppercase font-medium bg-primary-400 border border-primary-400 text-black hover:bg-primary-300 focus:bg-primary-300 focus:outline-none focus:ring-0">Save Changes</button>
</div>
</div>
</div>
</div>