1+ Modal Components - Tailwind

Welcome to our collection of Tailwind CSS modals! Modals are like little pop-up windows that appear on top of a webpage. They're great for showing important information or asking for user input without leaving the current page. In this collection, we've gathered different designs for modals that you can use on your website. Whether you want something simple or something more fancy, we've got examples to help you. Let's see how you can enhance user interaction on your website with these easy-to-use modal components, all thanks to Tailwind CSS!

Simple Modal with AlpineJS

Explore the power of Modal components with AlpineJS and Tailwind CSS, perfect for displaying important information and interactive content.

Author: Admin

Preview
Code

<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>

<div class="flex justify-center items-center w-screen h-screen bg-white" x-data="{ open: false }">
      <button x-on:click="open = true" type="button" class="bg-[#0d1117] text-white px-10 py-4 rounded-md font-semibold">
          Open modal
      </button>
  
      <div
          x-show="open"
          x-on:keydown.escape.prevent.stop="open = false"
          role="dialog"
          aria-modal="true"
          x-id="['modal-title']"
          :aria-labelledby="$id('modal-title')"
          class="overflow-y-auto fixed inset-0"
      >
          <div x-show="open" x-transition.opacity.duration.300 class="fixed inset-0 bg-[#0d1117] bg-opacity-80"></div>
          <div
              x-show="open"
              x-transition:enter="ease-out duration-300"
              x-transition:enter-start="opacity-0 translate-y-4"
              x-transition:enter-end="opacity-100 translate-y-0"
              x-transition:leave="ease-in duration-300"
              x-transition:leave-start="opacity-100 translate-y-0"
              x-transition:leave-end="opacity-0 translate-y-4"
              x-on:click="open = false"
              class="flex relative justify-center items-center p-4 min-h-screen"
          >
              <div
                  x-on:click.stop
                  x-trap.noscroll.inert="open"
                  class="overflow-y-auto relative p-8 w-full max-w-2xl bg-white border border-black rounded-md"
              >
                  <h2 class="text-3xl font-medium" :id="$id('modal-title')">Simple Modal!</h2>
                  <p class="mt-2 text-base max-w-md text-gray-700">Modal content can go here</p>
                  <div class="flex mt-4">
                      <button type="button" x-on:click="open = false" class="bg-indigo-500 hover:bg-indigo-400 text-white px-8 py-3 rounded-md font-semibold">
                          Close
                      </button>
                  </div>
              </div>
          </div>
      </div>
  </div>

```
No Custom CSS
```
```
No need of JavaScript
```