Adding a modal is very common to display important information to visitors on the site. You can use a modal to display a popup for the newsletter subscription, display a notification, or fill out a form required to complete some extra steps. This article explains how TailwindCSS can help you in designing a simple but amazing modal.
Step 1: Creating a Background Overlay for Modal
The first step is to create a background overlay for the modal with a transparent color. This overlay should cover the entire screen. The opacity of the background color is decreased to make it transparent. The following code adds a background overlay that covers the entire screen of the web page.
1 2 3 4 5 6 |
<div class="h-screen flex justify-center items-center bg-gray-600/50"> </div> |
Step 2: Designing a Modal with TailwindCSS
The next step is to design the actual modal with content. The modal designed in this example is simply asking for the acceptance of cookies. The following code creates a modal with two buttons and a simple heading followed by a paragraph. The extra classes in the modal container are added to make it mobile-responsive.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<div class="h-screen flex justify-center items-center bg-gray-600/50"> <div class="h-3/4 sm:h-1/2 flex flex-cols justify-center space-y-10 flex-col items-center max-w-3xl sm:m-10 m-4 sm:p-20 p-5 rounded-lg bg-white"> <h1 class="text-3xl font-bold">Attention Required! </h1> <p> By enabling cookies, you are giving us an oppurtunity to deliver the best results with the advertisements on the website. Please Accept the cookes and contunue browsing on the website. </p> <div class="flex justify-between w-full"> <button class="bg-gray-300 px-4 py-2 rounded-md text-black">Reject Cookies </button> <button class="bg-green-600 px-4 py-2 rounded-md text-white">Accept Cookies </button> </div> </div> </div> |
Step 3: Adding a Close Button on Modal
The last step in creating a modal is to add a close button with a cross icon. For this purpose, Heroicons are very helpful for adding an SVG icon inside a button. The following code adds an SVG icon with a button at the top right corner of the modal.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<div class="h-screen flex justify-center items-center bg-gray-600/50"> <div class="h-3/4 sm:h-1/2 flex flex-cols justify-center space-y-10 flex-col items-center max-w-3xl sm:m-10 m-4 sm:p-20 p-5 rounded-lg bg-white relative "> <h1 class="text-3xl font-bold">Attention Required! </h1> <p> By enabling cookies, you are giving us an oppurtunity to deliver the best results with the advertisements on the website. Please Accept the cookes and contunue browsing on the website. </p> <div class="flex justify-between w-full"> <button class="bg-gray-300 px-4 py-2 rounded-md text-black">Reject Cookies </button> <button class="bg-green-600 px-4 py-2 rounded-md text-white">Accept Cookies </button> </div> <button class="absolute -top-8 right-2"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"> <path stroke-linecap="round" stroke-linejoin="round" d="M9.75 9.75l4.5 4.5m0-4.5l-4.5 4.5M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /> </svg> </button> </div> </div> |
You can check the working example on the tailwind play. The screenshot of the modal designed with TailwindCSS is attached below.
Conclusion
You can design an awesome modal with TailwindCSS with just 3 simple steps. The first step is to add a transparent background overlay. The second step is to add the modal content and, in the third step, add the close button with a close icon.