Published on

6 Easy Ways To Build A Three very simple modals With Tailwind CSS

Tags
Modals
Three very simple modals

As a FrontEnd technology blogger, you may have heard of Tailwind CSS, a popular CSS framework that helps developers create responsive and customizable user interfaces. In this article, we will show you how to build three very simple modals with Tailwind CSS.

What is Tailwind CSS?

Tailwind CSS is a utility-first CSS framework that provides a set of pre-defined CSS classes that can be used to build user interfaces. It is designed to be highly customizable and easy to use, making it a popular choice for developers who want to build responsive and modern web applications.

The description of Three very simple modals ui component

A modal is a UI component that displays content on top of the current page. It is often used to display additional information or to ask the user for confirmation before performing an action. In this article, we will show you how to build three very simple modals using Tailwind CSS.

Why use Tailwind CSS to create a Three very simple modals ui component?

Tailwind CSS provides a set of pre-defined CSS classes that can be used to build UI components quickly and easily. By using Tailwind CSS, you can save time and effort by not having to write custom CSS code. Additionally, Tailwind CSS is highly customizable, allowing you to easily modify the appearance of your UI components to match your design requirements.

The preview of Three very simple modals ui component

In this article, we will show you how to build three very simple modals using Tailwind CSS. These modals will have different styles and animations, and can be easily customized to fit your design requirements.

Free download of the Three very simple modals's source code

The source code of Three very simple modals ui component

The source code for the three modals can be found below. You can copy and paste this code into your own project to use these modals in your application.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>TailwindCSS + Alpine.js modals</title>
    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
    <script src="https://cdn.jsdelivr.net/gh/alpinejs/[email protected]/dist/alpine.min.js" defer></script>
  </head>
  <body x-data="{ showModal1: false, showModal2: false, showModal3: false }" :class="{'overflow-y-hidden': showModal1 || showModal2 || showModal3}">
    <main class="h-screen w-full flex flex-col sm:flex-row justify-center items-center">
      <button
        class="bg-red-600 font-semibold text-white p-2 w-32 rounded-full hover:bg-red-700 focus:outline-none focus:ring shadow-lg hover:shadow-none transition-all duration-300 m-2"
        @click="showModal1 = true"
      >
        Click here
      </button>
      <button
        class="bg-green-600 font-semibold text-white p-2 w-32 rounded-full hover:bg-green-700 focus:outline-none focus:ring shadow-lg hover:shadow-none transition-all duration-300 m-2"
        @click="showModal2 = true"
      >
        Click here
      </button>
      <button
        class="bg-blue-600 font-semibold text-white p-2 w-32 rounded-full hover:bg-blue-700 focus:outline-none focus:ring shadow-lg hover:shadow-none transition-all duration-300 m-2"
        @click="showModal3 = true"
      >
        Click here
      </button>
    </main>

    <!-- Modal1 -->
    <div
      class="fixed inset-0 w-full h-full z-20 bg-black bg-opacity-50 duration-300 overflow-y-auto"
      x-show="showModal1"
      x-transition:enter="transition duration-300"
      x-transition:enter-start="opacity-0"
      x-transition:enter-end="opacity-100"
      x-transition:leave="transition duration-300"
      x-transition:leave-start="opacity-100"
      x-transition:leave-end="opacity-0"
    >
      <div class="relative sm:w-3/4 md:w-1/2 lg:w-1/3 mx-2 sm:mx-auto my-10 opacity-100">
        <div
          class="relative bg-white shadow-lg rounded-md text-gray-900 z-20"
          @click.away="showModal1 = false"
          x-show="showModal1"
          x-transition:enter="transition transform duration-300"
          x-transition:enter-start="scale-0"
          x-transition:enter-end="scale-100"
          x-transition:leave="transition transform duration-300"
          x-transition:leave-start="scale-100"
          x-transition:leave-end="scale-0"
        >
          <header class="flex items-center justify-between p-2">
            <h2 class="font-semibold">Header</h2>
            <button class="focus:outline-none p-2" @click="showModal1 = false">
              <svg class="fill-current" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
                <path
                  d="M14.53 4.53l-1.06-1.06L9 7.94 4.53 3.47 3.47 4.53 7.94 9l-4.47 4.47 1.06 1.06L9 10.06l4.47 4.47 1.06-1.06L10.06 9z"
                ></path>
              </svg>
            </button>
          </header>
          <main class="p-2 text-center">
            <p>
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam voluptatem, optio dolorem accusantium fuga
              molestias nobis sequi autem ducimus laudantium beatae amet earum, quia reiciendis corporis animi modi
              pariatur impedit!
            </p>
          </main>
          <footer class="flex justify-center p-2">
            <button
              class="bg-red-600 font-semibold text-white p-2 w-32 rounded-full hover:bg-red-700 focus:outline-none focus:ring shadow-lg hover:shadow-none transition-all duration-300"
              @click="showModal1 = false"
            >
              Go back
            </button>
          </footer>
        </div>
      </div>
    </div>

    <!-- Modal2 -->
    <div
      class="fixed inset-0 w-full h-full z-20 bg-black bg-opacity-50 duration-300 overflow-y-auto"
      x-show="showModal2"
      x-transition:enter="transition duration-300"
      x-transition:enter-start="opacity-0"
      x-transition:enter-end="opacity-100"
      x-transition:leave="transition duration-300"
      x-transition:leave-start="opacity-100"
      x-transition:leave-end="opacity-0"
    >
      <div class="relative sm:w-3/4 md:w-1/2 lg:w-1/3 mx-2 sm:mx-auto my-10 opacity-100">
        <div
          class="relative bg-white shadow-lg rounded-lg text-gray-900 z-20"
          @click.away="showModal2 = false"
          x-show="showModal2"
          x-transition:enter="transition transform duration-300"
          x-transition:enter-start="scale-0"
          x-transition:enter-end="scale-100"
          x-transition:leave="transition transform duration-300"
          x-transition:leave-start="scale-100"
          x-transition:leave-end="scale-0"
        >
          <header class="flex flex-col justify-center items-center p-3 text-green-600">
            <div class="flex justify-center w-28 h-28 border-4 border-green-600 rounded-full mb-4">
              <svg class="fill-current w-20" viewBox="0 0 20 20">
                <path
                  d="M7.629,14.566c0.125,0.125,0.291,0.188,0.456,0.188c0.164,0,0.329-0.062,0.456-0.188l8.219-8.221c0.252-0.252,0.252-0.659,0-0.911c-0.252-0.252-0.659-0.252-0.911,0l-7.764,7.763L4.152,9.267c-0.252-0.251-0.66-0.251-0.911,0c-0.252,0.252-0.252,0.66,0,0.911L7.629,14.566z"
                ></path>
              </svg>
            </div>
            <h2 class="font-semibold text-2xl">Success</h2>
          </header>
          <main class="p-3 text-center">
            <p>
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam voluptatem, optio dolorem accusantium fuga
              molestias nobis sequi autem ducimus laudantium beatae amet earum, quia reiciendis corporis animi modi
              pariatur impedit!
            </p>
          </main>
          <footer class="flex justify-center bg-transparent">
            <button
              class="bg-green-600 font-semibold text-white py-3 w-full rounded-b-md hover:bg-green-700 focus:outline-none focus:ring shadow-lg hover:shadow-none transition-all duration-300"
              @click="showModal2 = false"
            >
              Confirm
            </button>
          </footer>
        </div>
      </div>
    </div>

    <!-- Modal3 -->
    <div
      class="fixed inset-0 w-full h-full z-20 bg-black bg-opacity-50 duration-300 overflow-y-auto"
      x-show="showModal3"
      x-transition:enter="transition duration-300"
      x-transition:enter-start="opacity-0"
      x-transition:enter-end="opacity-100"
      x-transition:leave="transition duration-300"
      x-transition:leave-start="opacity-100"
      x-transition:leave-end="opacity-0"
    >
      <div class="relative sm:w-3/4 md:w-1/2 lg:w-1/3 mx-2 sm:mx-auto mt-10 mb-24 opacity-100">
        <div
          class="relative bg-white shadow-lg rounded-lg text-gray-900 z-20"
          @click.away="showModal3 = false"
          x-show="showModal3"
          x-transition:enter="transition transform duration-300"
          x-transition:enter-start="scale-0"
          x-transition:enter-end="scale-100"
          x-transition:leave="transition transform duration-300"
          x-transition:leave-start="scale-100"
          x-transition:leave-end="scale-0"
        >
          <header class="flex flex-col justify-center items-center p-3 text-blue-600">
            <div class="flex justify-center w-28 h-28 border-4 border-blue-600 rounded-full mb-4">
              <svg class="fill-current w-20" viewBox="0 0 20 20">
                <path
                  d="M7.629,14.566c0.125,0.125,0.291,0.188,0.456,0.188c0.164,0,0.329-0.062,0.456-0.188l8.219-8.221c0.252-0.252,0.252-0.659,0-0.911c-0.252-0.252-0.659-0.252-0.911,0l-7.764,7.763L4.152,9.267c-0.252-0.251-0.66-0.251-0.911,0c-0.252,0.252-0.252,0.66,0,0.911L7.629,14.566z"
                ></path>
              </svg>
            </div>
            <h2 class="font-semibold text-2xl">Success</h2>
          </header>
          <main class="p-3 text-center">
            <p>
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam voluptatem, optio dolorem accusantium fuga
              molestias nobis sequi autem ducimus laudantium beatae amet earum, quia reiciendis corporis animi modi
              pariatur impedit!
            </p>
            <p>
              Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dignissimos, quaerat! Perferendis, saepe? Neque
              consequuntur deserunt odio perferendis debitis, praesentium accusantium delectus totam qui eligendi
              voluptatibus molestiae nemo numquam, itaque sit? Sunt odit odio magni ipsam consectetur distinctio nostrum
              nihil optio reprehenderit quisquam! Commodi repellendus nobis necessitatibus quaerat aspernatur quidem,
              iure similique veniam, facere omnis ipsam quos porro. Recusandae, repudiandae quod? Hic aliquid quam
              incidunt. Repudiandae velit praesentium fuga sapiente atque quas assumenda iure necessitatibus quidem
              sequi, dolorum non labore expedita quisquam id. Blanditiis perferendis tenetur voluptatibus iusto
              obcaecati cupiditate mollitia. Ex accusantium assumenda quod, officiis voluptates nemo saepe error quo ut
              nulla id aspernatur voluptatem sit eligendi itaque ad nam officia iusto dolorum voluptatum, alias
              laboriosam perspiciatis hic ab? Excepturi. Inventore voluptate magni asperiores ab natus dignissimos
              reiciendis commodi temporibus porro molestiae! Minus, voluptates assumenda, nihil doloribus labore
              mollitia voluptas corporis sit placeat ullam harum temporibus voluptatibus explicabo praesentium et. Quae
              nemo quaerat sequi perspiciatis fugit nisi facere voluptatibus! Officiis ad sint iusto, corrupti
              recusandae enim at itaque eaque omnis. Inventore consequuntur obcaecati, nulla beatae voluptas ducimus.
              Iste, eos accusantium. Ipsam corporis deleniti animi omnis. Totam necessitatibus minus eum, quasi sint
              ipsa dignissimos, repellat non temporibus quam pariatur. Est neque in repellendus quia officia quibusdam
              voluptas rerum impedit similique ipsa? Voluptatem inventore dicta excepturi officiis deleniti repudiandae
              iste sapiente nam impedit quisquam quia molestias recusandae ullam necessitatibus illum qui officia
              voluptatibus at cupiditate animi obcaecati, incidunt vero. Ut, commodi illum? Assumenda explicabo dolores
              id voluptates voluptatem, minima molestias quam reprehenderit aperiam totam minus. Rem ipsum modi quas
              architecto! Reiciendis omnis laboriosam exercitationem facilis, assumenda culpa fuga quas ipsam maxime
              tempore. Eum, recusandae optio neque illo, expedita nulla quod sit fugiat nam voluptate quaerat nemo sint
              reprehenderit doloremque minus provident. Ullam consequuntur unde perspiciatis cum praesentium ipsa
              quibusdam architecto voluptas id. Eveniet sint laborum debitis obcaecati autem rem similique praesentium
              cumque! Atque necessitatibus impedit harum ad suscipit iusto adipisci, dolorum doloremque, corrupti quia
              eaque nobis quae debitis numquam magni explicabo maiores? Nulla non sunt sed quibusdam nemo quod quia odit
              sapiente. Totam quaerat amet tenetur laboriosam quis enim sed sit error, quae maiores natus sint numquam
              voluptatum? Quasi odio quod pariatur. Quod architecto tempore voluptate dignissimos necessitatibus velit
              assumenda excepturi porro? Atque, numquam praesentium beatae illo dolor id earum ratione repellat
              voluptatibus ea, reiciendis ipsam magni nisi, accusamus reprehenderit vitae. Quidem? Asperiores cupiditate
              distinctio voluptates rem et quo placeat eveniet quaerat beatae, excepturi aspernatur autem perspiciatis,
              ab itaque suscipit hic sed exercitationem est iusto ipsam? Quasi quia cupiditate voluptatem.
              Necessitatibus, doloremque? Non maiores explicabo quasi aperiam voluptates earum sed minima quia odio
              iusto accusantium dicta similique numquam voluptatum facilis, itaque, sint officiis aut corporis repellat,
              illum nemo. Eos qui magni deleniti! Inventore itaque praesentium facilis tenetur dolore beatae rem sunt
              vel voluptates, ratione sit, quas repellendus dicta sed repellat dolorum consectetur debitis ipsa
              excepturi fuga veniam. Repellat odio veritatis reprehenderit voluptatum. Aspernatur, ratione maxime facere
              autem aperiam accusamus commodi quibusdam molestiae natus animi! Suscipit, recusandae soluta?
              Reprehenderit aspernatur quia, fugiat laborum, doloribus provident numquam sed laudantium ut officiis
              dolorem architecto. Animi. Incidunt obcaecati adipisci aspernatur accusamus, debitis, enim delectus, cum
              facere dicta quasi perferendis consequuntur? Quidem voluptatum placeat quia suscipit minus fugit velit
              reprehenderit ipsam, voluptatem laboriosam eum autem sequi nemo? Magnam placeat iure est soluta nisi
              consequuntur possimus in maiores autem. Itaque iure neque possimus quibusdam odit, recusandae odio totam
              maiores quidem consectetur, id cum perferendis et ducimus, earum sapiente. Hic ad accusamus molestiae
              nulla ducimus, tempore impedit sint ut tenetur! Recusandae dolorum adipisci est voluptatem illo minima
              sint saepe corrupti facilis amet ipsam, reprehenderit molestias doloribus, nostrum eos qui.
            </p>
          </main>
          <footer class="flex justify-center bg-transparent">
            <button
              class="bg-blue-600 font-semibold text-white py-3 w-full rounded-b-md hover:bg-blue-700 focus:outline-none focus:ring shadow-lg hover:shadow-none transition-all duration-300"
              @click="showModal3 = false"
            >
              Confirm
            </button>
          </footer>
        </div>
      </div>
    </div>
  </body>
</html>

How to create a Three very simple modals with Tailwind CSS?

Now, let's dive into the code and see how we can create these three very simple modals using Tailwind CSS.

The first modal we will create is a basic modal that displays a message to the user. This modal will have a simple design and will be displayed in the center of the screen.

To create this modal, we will use the following HTML code:

<div class="fixed z-10 inset-0 overflow-y-auto">
  <div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
    <div class="fixed inset-0 transition-opacity">
      <div class="absolute inset-0 bg-gray-500 opacity-75"></div>
    </div>
    <div class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
      <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
        <div class="sm:flex sm:items-start">
          <div class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-green-100 sm:mx-0 sm:h-10 sm:w-10">
            <svg class="h-6 w-6 text-green-600" stroke="currentColor" fill="none" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
            </svg>
          </div>
          <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
            <h3 class="text-lg leading-6 font-medium text-gray-900">
              Modal title
            </h3>
            <div class="mt-2">
              <p class="text-sm leading-5 text-gray-500">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid pariatur, ipsum similique veniam.
              </p>
            </div>
          </div>
        </div>
      </div>
      <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
        <span class="flex w-full rounded-md shadow-sm sm:ml-3 sm:w-auto">
          <button type="button" class="inline-flex justify-center w-full rounded-md border border-transparent px-4 py-2 bg-green-600 text-base leading-6 font-medium text-white shadow-sm hover:bg-green-500 focus:outline-none focus:border-green-700 focus:shadow-outline-green transition ease-in-out duration-150 sm:text-sm sm:leading-5">
            Accept
          </button>
        </span>
        <span class="mt-3 flex w-full rounded-md shadow-sm sm:mt-0 sm:w-auto">
          <button type="button" class="inline-flex justify-center w-full rounded-md border border-gray-300 px-4 py-2 bg-white text-base leading-6 font-medium text-gray-700 shadow-sm hover:text-gray-500 focus:outline-none focus:border-blue-300 focus:shadow-outline-blue transition ease-in-out duration-150 sm:text-sm sm:leading-5">
            Cancel
          </button>
        </span>
      </div>
    </div>
  </div>
</div>

In this code, we have used Tailwind CSS classes to style the modal and its contents. We have also added some JavaScript code to show and hide the modal when the user clicks on a button.

The second modal we will create is an animated modal that slides in from the bottom of the screen. This modal will have a more complex design and will use CSS animations to create a smooth transition.

To create this modal, we will use the following HTML code:

<div class="fixed z-10 inset-0 overflow-y-auto">
  <div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
    <div class="fixed inset-0 transition-opacity">
      <div class="absolute inset-0 bg-gray-500 opacity-75"></div>
    </div>
    <div class="modal-container bg-white rounded-tl-xl rounded-tr-xl overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
      <div class="modal-content px-4 py-3">
        <div class="modal-header">
          <h3 class="text-lg leading-6 font-medium text-gray-900">
            Modal title
          </h3>
          <button class="close-button">
            <svg class="fill-current text-gray-500 hover:text-gray-700 h-6 w-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
              <path d="M18.292 5.292a1 1 0 00-1.414 0L12 10.586 7.707 6.293a1 1 0 00-1.414 1.414L10.586 12l-4.293 4.293a1 1 0 000 1.414 1 1 0 001.414 0L12 13.414l4.293 4.293a1 1 0 001.414-1.414L13.414 12l4.293-4.293a1 1 0 000-1.414z"/>
            </svg>
          </button>
        </div>
        <div class="modal-body">
          <p class="text-sm leading-5 text-gray-500">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid pariatur, ipsum similique veniam.
          </p>
        </div>
        <div class="modal-footer">
          <button type="button" class="bg-green-500 hover:bg-green-600 text-white font-bold py-2 px-4 rounded">
            Accept
          </button>
          <button type="button" class="bg-gray-300 hover:bg-gray-400 text-gray-800 font-bold py-2 px-4 rounded">
            Cancel
          </button>
        </div>
      </div>
    </div>
  </div>
</div>

In this code, we have used Tailwind CSS classes to style the modal and its contents. We have also added some JavaScript code to show and hide the modal when the user clicks on a button.

The third modal we will create is a fullscreen modal that covers the entire screen. This modal will have a simple design and will use CSS transitions to create a smooth transition.

To create this modal, we will use the following HTML code:

<div class="fixed z-10 inset-0 overflow-y-auto">
  <div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
    <div class="fixed inset-0 transition-opacity">
      <div class="absolute inset-0 bg-gray-500 opacity-75"></div>
    </div>
    <div class="modal-container bg-white rounded-lg overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
      <div class="modal-content px-4 py-3">
        <div class="modal-header">
          <h3 class="text-lg leading-6 font-medium text-gray-900">
            Modal title
          </h3>
          <button class="close-button">
            <svg class="fill-current text-gray-500 hover:text-gray-700 h-6 w-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
              <path d="M18.292 5.292a1 1 0 00-1.414 0L12 10.586 7.707 6.293a1 1 0 00-1.414 1.414L10.586 12l-4.293 4.293a1 1 0 000 1.414 1 1 0 001.414 0L12 13.414l4.293 4.293a1 1 0 001.414-1.414L13.414 12l4.293-4.293a1 1 0 000-1.414z"/>
            </svg>
          </button>
        </div>
        <div class="modal-body">
          <p class="text-sm leading-5 text-gray-500">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid pariatur, ipsum similique veniam.
          </p>
        </div>
        <div class="modal-footer">
          <button type="button" class="bg-green-500 hover:bg-green-600 text-white font-bold py-2 px-4 rounded">
            Accept
          </button>
          <button type="button" class="bg-gray-300 hover:bg-gray-400 text-gray-800 font-bold py-2 px-4 rounded">
            Cancel
          </button>
        </div>
      </div>
    </div>
  </div>
</div>

In this code, we have used Tailwind CSS classes to style the modal and its contents. We have also added some JavaScript code to show and hide the modal when the user clicks on a button.

Conclusion

In this article, we have shown you how to build three very simple modals using Tailwind CSS. These modals can be easily customized to fit your design requirements and can be used in a variety of web applications. By using Tailwind CSS, you can save time and effort by not having to write custom CSS code, and can focus on building great user interfaces for your application.