by Nemrut Creative Studio on 19 Jun 2020
In this tutorial, we will be creating a simple modal with AlpineJS and Tailwindcss. In fact, we will be using the very similar logic and structure that the modal used here on Nemrut Creative Studio.
<div x-data="{open: false}">
<button x-on:click.prevent="open = true"
class="py-2 px-4 rounded-full text-center inline-block border border-black text-black bg-white hover:bg-black hover:text-white focus:outline-none">
Open
</button>
<div x-show.transition.opacity="open" x-on:click.away="open = false"
class="p-4 fixed flex justify-center items-center inset-0 bg-black bg-opacity-75 z-50">
<div x-show.transition="open"
class="container max-w-3xl max-h-full bg-white rounded-xl shadow-lg overflow-auto">
<div class="px-8 py-4 border-b border-black">
<h2>Header</h2>
</div>
<div class="px-8 py-4">
<p>Body</p>
</div>
<div class="px-8 py-4 border-t border-black text-center">
<button x-on:click.prevent="open = false"
class="py-2 px-4 rounded-full text-center inline-block border border-black text-black bg-white hover:bg-black hover:text-white focus:outline-none">
Close
</button>
</div>
</div>
</div>
</div>
Body
That's it. You can style it as your own Tailwindcss configuration.
Copyright ©2021 Nemrut Creative Studio