Published on

Surprisingly Effective Ways To Build A Free Tailwind CSS Modals Component With Tailwind CSS

Tags
PagesWidget
Free Tailwind CSS Modals Component

As a FrontEnd technology blogger, it's essential to keep up with the latest trends in web development. One of the most popular CSS frameworks today is Tailwind CSS. It's a utility-first CSS framework that helps developers create beautiful and responsive UI components quickly. In this article, we'll explore how to build a free Tailwind CSS Modals Component using Tailwind CSS.

What is Tailwind CSS?

Tailwind CSS is a utility-first CSS framework that provides a set of pre-defined classes that can be used to style HTML elements. It's a low-level framework that allows developers to build custom UI components quickly. Tailwind CSS is highly customizable, and developers can create their own utility classes to suit their needs.

The description of Free Tailwind CSS Modals Component ui component

A modal is a UI component that appears on top of the page's content and requires user interaction to dismiss it. A modal is commonly used to display additional information or to prompt the user for input. The Free Tailwind CSS Modals Component is a UI component that allows developers to create modals quickly and easily using Tailwind CSS.

Why use Tailwind CSS to create a Free Tailwind CSS Modals Component ui component?

Tailwind CSS provides a set of pre-defined classes that can be used to style HTML elements. This makes it easy for developers to create UI components quickly and efficiently. Tailwind CSS is highly customizable, and developers can create their own utility classes to suit their needs. This flexibility makes Tailwind CSS an excellent choice for creating UI components like modals.

The preview of Free Tailwind CSS Modals Component ui component

The Free Tailwind CSS Modals Component is a UI component that allows developers to create modals quickly and easily using Tailwind CSS.

Free download of the Free Tailwind CSS Modals Component's source code

The source code of Free Tailwind CSS Modals Component ui component

The source code for the Free Tailwind CSS Modals Component is available on GitHub.

<div id="button" class="hidden container mx-auto flex justify-center items-center px-4 md:px-10 py-20">
  <!--- more free and premium Tailwind CSS components at https://tailwinduikit.com/ --->
  <button onclick="openModal()" class="bg-white text-gray-800 py-5 px-10 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white rounded">Open Modal</button>
</div>
<div id="modal" class="container mx-auto flex justify-center items-center px-4 md:px-10 py-20">
  <!--- more free and premium Tailwind CSS components at https://tailwinduikit.com/ --->
  <div class="bg-white dark:bg-gray-800 px-3 md:px-4 py-12 flex flex-col justify-center items-center">
    <div role="img" aria-label="Luxe. Logo.">
      <svg class="text-gray-900 dark:text-white" width="54" height="24" viewBox="0 0 54 24" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M4.9521 20.3965C4.9521 21.1843 5.12115 21.7319 5.45924 22.0394C5.79734 22.3276 6.38403 22.4717 7.21933 22.4717V23.077C5.38964 23.0001 4.18642 22.9617 3.60966 22.9617C3.03291 22.9617 1.82969 23.0001 0 23.077V22.4717C0.835294 22.4717 1.42199 22.3276 1.76008 22.0394C2.09818 21.7319 2.26723 21.1843 2.26723 20.3965V3.93912C2.26723 3.05524 2.09818 2.41155 1.76008 2.00804C1.42199 1.60453 0.835294 1.40277 0 1.40277V0.797511C0.616527 0.855155 1.23305 0.883977 1.84958 0.883977C3.10252 0.883977 4.13669 0.749475 4.9521 0.480469V20.3965Z" fill="currentColor" />
        <path d="M22.2884 19.9642C22.2884 20.8481 22.4575 21.4917 22.7956 21.8953C23.1337 22.2988 23.7204 22.5005 24.5556 22.5005V23.1058C23.9391 23.0481 23.3226 23.0193 22.7061 23.0193C21.4531 23.0193 20.419 23.1538 19.6035 23.4228V20.0218C19.1262 21.2131 18.45 22.0874 17.575 22.6446C16.6999 23.2019 15.7453 23.4805 14.7111 23.4805C13.3587 23.4805 12.3246 23.1154 11.6086 22.3852C11.2506 22.0009 10.9921 21.511 10.833 20.9153C10.6937 20.3197 10.6241 19.5511 10.6241 18.6095V11.3752C10.6241 10.4913 10.4551 9.84764 10.117 9.44413C9.77889 9.04062 9.1922 8.83887 8.3569 8.83887V8.2336C8.97343 8.29125 9.58996 8.32007 10.2065 8.32007C11.4594 8.32007 12.4936 8.18557 13.309 7.91656V19.2436C13.309 19.9738 13.3488 20.5694 13.4283 21.0306C13.5278 21.4725 13.7366 21.8376 14.0548 22.1258C14.3929 22.4141 14.9 22.5582 15.5762 22.5582C16.332 22.5582 17.0181 22.3276 17.6346 21.8664C18.2512 21.4053 18.7285 20.7808 19.0666 19.993C19.4246 19.186 19.6035 18.3021 19.6035 17.3414V11.3752C19.6035 10.4913 19.4345 9.84764 19.0964 9.44413C18.7583 9.04062 18.1716 8.83887 17.3363 8.83887V8.2336C17.9528 8.29125 18.5694 8.32007 19.1859 8.32007C20.4388 8.32007 21.473 8.18557 22.2884 7.91656V19.9642Z" fill="currentColor" />
        <path d="M38.459 21.0306C38.8169 21.511 39.1153 21.8568 39.3539 22.0682C39.6125 22.2603 39.9307 22.3948 40.3085 22.4717V23.077C39.2744 23.0001 38.5683 22.9617 38.1905 22.9617C37.5143 22.9617 36.3409 23.0001 34.6703 23.077V22.4717C34.9885 22.4717 35.257 22.4141 35.4758 22.2988C35.7144 22.1835 35.8337 22.0298 35.8337 21.8376C35.8337 21.7031 35.794 21.5878 35.7144 21.4917L32.3136 16.7073L30.1359 19.4454C29.579 20.1563 29.3006 20.7328 29.3006 21.1747C29.3006 21.5782 29.4895 21.8953 29.8674 22.1258C30.2651 22.3372 30.812 22.4621 31.5081 22.5005V23.077C30.4739 23.0193 29.3403 22.9905 28.1073 22.9905C27.2322 22.9905 26.4765 23.0193 25.84 23.077V22.5005C26.2378 22.4621 26.6356 22.2892 27.0333 21.9817C27.451 21.6743 27.9283 21.1747 28.4653 20.483L31.8959 16.1308L27.7493 10.28C27.3515 9.72274 27.0333 9.35766 26.7947 9.18473C26.556 8.99258 26.2577 8.87729 25.8997 8.83887V8.2336C26.9339 8.31046 27.6399 8.34889 28.0178 8.34889C28.694 8.34889 29.8674 8.31046 31.538 8.2336V8.83887C31.2197 8.83887 30.9413 8.89651 30.7027 9.0118C30.4839 9.12709 30.3745 9.2808 30.3745 9.47295C30.3745 9.60745 30.4143 9.72274 30.4938 9.81882L33.6859 14.3151L35.7443 11.5193C36.3409 10.6931 36.6392 10.0878 36.6392 9.70353C36.6392 9.43452 36.5 9.23277 36.2216 9.09826C35.963 8.94455 35.5354 8.84847 34.9388 8.81004V8.2336C35.973 8.29125 36.8083 8.32007 37.4447 8.32007C38.3197 8.32007 39.0755 8.29125 39.7119 8.2336V8.81004C38.8965 8.90612 38.0214 9.57863 37.0867 10.8276L34.0737 14.8627L38.459 21.0306Z" fill="currentColor" />
        <path d="M54 19.6183C53.642 20.6751 52.9658 21.5878 51.9714 22.3564C50.9969 23.1058 49.8136 23.4805 48.4214 23.4805C47.0094 23.4805 45.7863 23.173 44.7521 22.5582C43.7179 21.9241 42.9224 21.0498 42.3655 19.9354C41.8286 18.8017 41.5601 17.4951 41.5601 16.0156C41.5601 14.3439 41.8385 12.8932 42.3954 11.6634C42.9522 10.4337 43.7378 9.49217 44.7521 8.83887C45.7664 8.16635 46.9497 7.83009 48.3021 7.83009C50.092 7.83009 51.4643 8.3585 52.4189 9.41531C53.3934 10.4529 53.8807 12.0381 53.8807 14.1709H44.5433C44.4836 14.709 44.4538 15.3238 44.4538 16.0156C44.4538 17.2837 44.6626 18.3886 45.0802 19.3301C45.5178 20.2716 46.0846 21.0018 46.7807 21.5206C47.4966 22.0202 48.2424 22.2699 49.0181 22.2699C49.9727 22.2699 50.8179 22.049 51.5538 21.607C52.2896 21.1651 52.9062 20.4253 53.4034 19.3877L54 19.6183ZM48.1828 8.37771C47.248 8.37771 46.4426 8.81965 45.7664 9.70353C45.0902 10.5874 44.6725 11.894 44.5134 13.6233H51.0168C51.0566 12.1246 50.8279 10.8756 50.3307 9.87646C49.8534 8.87729 49.1374 8.37771 48.1828 8.37771Z" fill="currentColor" />
      </svg>
    </div>
    <h1 class="mt-8 md:mt-12 text-3xl lg:text-4xl font-semibold leading-10 text-center text-gray-800 text-center md:w-9/12 lg:w-7/12 dark:text-white">Welcome to the coveted family of luxe!</h1>
    <p class="mt-10 text-base leading-normal text-center text-gray-600 md:w-9/12 lg:w-7/12 dark:text-white">A confirmation email has been sent to your account, [email protected], with the details of shipping and delivery.</p>
    <div class="mt-12 md:mt-14 w-full flex justify-center">
      <button onclick="closeModal()" class="dark:text-white dark:border-white w-full sm:w-auto border border-gray-800 text-base font-medium text-gray-800 py-5 px-14 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-800 hover:bg-gray-800 hover:text-white dark:hover:text-white dark:hover:bg-gray-700">Back to store</button>
    </div>
  </div>
</div>

<script>const openModal = () => {
  document.getElementById("button").classList.add("hidden");
  document.getElementById("modal").classList.remove("hidden");
};
const closeModal = () => {
  document.getElementById("button").classList.remove("hidden");
  document.getElementById("modal").classList.add("hidden");
};
</script>

How to create a Free Tailwind CSS Modals Component with Tailwind CSS?

To create a Free Tailwind CSS Modals Component, we'll need to follow these steps:

Step 1: Set up the HTML structure

The first step is to set up the HTML structure for the modal. We'll need to create a container element for the modal and add the necessary HTML elements inside it. Here's an example:

<div class="modal">
  <div class="modal-overlay"></div>
  <div class="modal-container">
    <div class="modal-header">
      <h3 class="modal-title">Modal Title</h3>
      <button class="modal-close"></button>
    </div>
    <div class="modal-body">
      <!-- Modal content goes here -->
    </div>
  </div>
</div>

Step 2: Add Tailwind CSS classes

Next, we'll need to add Tailwind CSS classes to the HTML elements to style them. Here's an example:

<div class="modal fixed w-full h-full top-0 left-0 flex items-center justify-center">
  <div class="modal-overlay absolute w-full h-full bg-gray-900 opacity-50"></div>
  <div class="modal-container bg-white w-11/12 md:max-w-md mx-auto rounded shadow-lg z-50 overflow-y-auto">
    <div class="modal-header py-3 px-4">
      <h3 class="modal-title text-lg">Modal Title</h3>
      <button class="modal-close text-gray-700 hover:text-gray-500">
        <svg class="fill-current h-6 w-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M14.348 14.849a1.25 1.25 0 01-1.768 1.768l-3.58-3.579-3.58 3.58a1.25 1.25 0 01-1.768-1.768l3.579-3.58-3.58-3.579a1.25 1.25 0 011.768-1.768l3.58 3.579 3.579-3.579a1.25 1.25 0 011.768 1.768l-3.579 3.58 3.579 3.579z"/></svg>
      </button>
    </div>
    <div class="modal-body p-4">
      <!-- Modal content goes here -->
    </div>
  </div>
</div>

Step 3: Add JavaScript

Finally, we'll need to add JavaScript to show and hide the modal. Here's an example:

const modal = document.querySelector('.modal');
const modalOverlay = document.querySelector('.modal-overlay');
const modalClose = document.querySelector('.modal-close');

modal.addEventListener('click', function(event) {
  if (event.target === modalOverlay || event.target === modalClose) {
    modal.classList.remove('opacity-100');
    modal.classList.add('opacity-0');
    setTimeout(function() {
      modal.classList.remove('fixed');
      modal.classList.remove('inset-0');
      modal.classList.remove('z-50');
      modalOverlay.classList.remove('opacity-50');
      modalOverlay.classList.add('opacity-0');
    }, 200);
  }
});

function showModal() {
  modal.classList.add('opacity-100');
  modal.classList.remove('opacity-0');
  modal.classList.add('fixed');
  modal.classList.add('inset-0');
  modal.classList.add('z-50');
  modalOverlay.classList.add('opacity-50');
  modalOverlay.classList.remove('opacity-0');
}

Step 4: Use the modal

To use the modal, we'll need to call the showModal() function. Here's an example:

<button onclick="showModal()">Show Modal</button>

Conclusion

In this article, we explored how to build a free Tailwind CSS Modals Component using Tailwind CSS. We learned that Tailwind CSS provides a set of pre-defined classes that can be used to style HTML elements, making it easy for developers to create UI components quickly and efficiently. We also learned that the Free Tailwind CSS Modals Component is a UI component that allows developers to create modals quickly and easily using Tailwind CSS. By following the steps outlined in this article, developers can create their own modals using Tailwind CSS.