Published on

How To Create A Alerts Components With Tailwindcss With Tailwind CSS In 5 Easy Steps

Tags
Alerts components with Tailwindcss

What is Tailwind CSS?

Tailwind CSS is a utility-first CSS framework that allows you to quickly build custom user interfaces. It provides a set of pre-defined CSS classes that you can use to style your HTML elements. With Tailwind CSS, you can create a responsive and mobile-first design without writing any custom CSS.

The description of Alerts components with Tailwindcss ui component

Alerts are an important UI component that is used to display important messages to the user. It can be used to display success messages, error messages, warning messages, and informational messages. In this article, we will learn how to create an Alerts component with Tailwind CSS.

Why use Tailwind CSS to create a Alerts components with Tailwindcss ui component?

Tailwind CSS provides a set of pre-defined CSS classes that you can use to style your HTML elements. It allows you to quickly create custom user interfaces without writing any custom CSS. With Tailwind CSS, you can create a responsive and mobile-first design that is easy to maintain.

The preview of Alerts components with Tailwindcss ui component.

To create an Alerts component with Tailwind CSS, we will use the following CSS classes:

  • bg-red-100
  • border border-red-400 text-red-700
  • bg-green-100
  • border border-green-400 text-green-700
  • bg-yellow-100
  • border border-yellow-400 text-yellow-700
  • bg-blue-100
  • border border-blue-400 text-blue-700

Free download of the Alerts components with Tailwindcss's source code

The source code of Alerts components with Tailwindcss ui component.

To create an Alerts component with Tailwind CSS, you can use the following HTML and CSS code:

<div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative" role="alert">
  <strong class="font-bold">Error!</strong>
  <span class="block sm:inline">Something went wrong.</span>
  <span class="absolute top-0 bottom-0 right-0 px-4 py-3">
    <svg class="fill-current h-6 w-6 text-red-500" role="button" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
      <title>Close</title>
      <path d="M14.348 5.652a1 1 0 00-1.414 0L10 8.586 6.066 4.652a1 1 0 00-1.414 1.414L8.586 10l-3.934 3.934a1 1 0 000 1.414 1 1 0 001.414 0L10 11.414l3.934 3.934a1 1 0 001.414-1.414L11.414 10l3.934-3.934a1 1 0 000-1.414z" clip-rule="evenodd" fill-rule="evenodd"></path>
    </svg>
  </span>
</div>
.alert {
  border-radius: 0.25rem;
}

.alert-success {
  background-color: #d1f2eb;
  border-color: #b3ece1;
  color: #0f5132;
}

.alert-danger {
  background-color: #f8d7da;
  border-color: #f5c6cb;
  color: #721c24;
}

.alert-warning {
  background-color: #fff3cd;
  border-color: #ffeeba;
  color: #856404;
}

.alert-info {
  background-color: #d1ecf1;
  border-color: #bee5eb;
  color: #0c5460;
}
<div class="flex flex-col">
  <div class="bg-yellow-lighter mb-4 flex max-w-sm">
    <div class="bg-yellow w-16">
      <div class="p-4">
        <svg
          class="h-8 w-8 fill-current text-white"
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 512 512"
        >
          <path
            d="M503.191 381.957c-.055-.096-.111-.19-.168-.286L312.267 63.218l-.059-.098c-9.104-15.01-23.51-25.577-40.561-29.752-17.053-4.178-34.709-1.461-49.72 7.644a66 66 0 0 0-22.108 22.109l-.058.097L9.004 381.669c-.057.096-.113.191-.168.287-8.779 15.203-11.112 32.915-6.569 49.872 4.543 16.958 15.416 31.131 30.62 39.91a65.88 65.88 0 0 0 32.143 8.804l.228.001h381.513l.227.001c36.237-.399 65.395-30.205 64.997-66.444a65.86 65.86 0 0 0-8.804-32.143zm-56.552 57.224H65.389a24.397 24.397 0 0 1-11.82-3.263c-5.635-3.253-9.665-8.507-11.349-14.792a24.196 24.196 0 0 1 2.365-18.364L235.211 84.53a24.453 24.453 0 0 1 8.169-8.154c5.564-3.374 12.11-4.381 18.429-2.833 6.305 1.544 11.633 5.444 15.009 10.986L467.44 402.76a24.402 24.402 0 0 1 3.194 11.793c.149 13.401-10.608 24.428-23.995 24.628z"
          />
          <path
            d="M256.013 168.924c-11.422 0-20.681 9.26-20.681 20.681v90.085c0 11.423 9.26 20.681 20.681 20.681 11.423 0 20.681-9.259 20.681-20.681v-90.085c.001-11.421-9.258-20.681-20.681-20.681zM270.635 355.151c-3.843-3.851-9.173-6.057-14.624-6.057a20.831 20.831 0 0 0-14.624 6.057c-3.842 3.851-6.057 9.182-6.057 14.624 0 5.452 2.215 10.774 6.057 14.624a20.822 20.822 0 0 0 14.624 6.057c5.45 0 10.772-2.206 14.624-6.057a20.806 20.806 0 0 0 6.057-14.624 20.83 20.83 0 0 0-6.057-14.624z"
          />
        </svg>
      </div>
    </div>
    <div class="text-grey-darker w-auto items-center p-4">
      <span class="pb-4 text-lg font-bold"> Heads Up! </span>
      <p class="leading-tight">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    </div>
  </div>

  <div class="bg-green-lighter mb-4 flex max-w-sm">
    <div class="bg-green w-16">
      <div class="p-4">
        <svg
          class="h-8 w-8 fill-current text-white"
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 512 512"
        >
          <path
            d="M468.907 214.604c-11.423 0-20.682 9.26-20.682 20.682v20.831c-.031 54.338-21.221 105.412-59.666 143.812-38.417 38.372-89.467 59.5-143.761 59.5h-.12C132.506 459.365 41.3 368.056 41.364 255.883c.031-54.337 21.221-105.411 59.667-143.813 38.417-38.372 89.468-59.5 143.761-59.5h.12c28.672.016 56.49 5.942 82.68 17.611 10.436 4.65 22.659-.041 27.309-10.474 4.648-10.433-.04-22.659-10.474-27.309-31.516-14.043-64.989-21.173-99.492-21.192h-.144c-65.329 0-126.767 25.428-172.993 71.6C25.536 129.014.038 190.473 0 255.861c-.037 65.386 25.389 126.874 71.599 173.136 46.21 46.262 107.668 71.76 173.055 71.798h.144c65.329 0 126.767-25.427 172.993-71.6 46.262-46.209 71.76-107.668 71.798-173.066v-20.842c0-11.423-9.259-20.683-20.682-20.683z"
          />
          <path
            d="M505.942 39.803c-8.077-8.076-21.172-8.076-29.249 0L244.794 271.701l-52.609-52.609c-8.076-8.077-21.172-8.077-29.248 0-8.077 8.077-8.077 21.172 0 29.249l67.234 67.234a20.616 20.616 0 0 0 14.625 6.058 20.618 20.618 0 0 0 14.625-6.058L505.942 69.052c8.077-8.077 8.077-21.172 0-29.249z"
          />
        </svg>
      </div>
    </div>
    <div class="text-grey-darker w-auto items-center p-4">
      <span class="pb-4 text-lg font-bold"> Heads Up! </span>
      <p class="leading-tight">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab beatae consequuntur dolore
        doloribus eius fugit, porro quidem repellat temporibus unde?
      </p>
    </div>
  </div>

  <div class="bg-teal-lighter mb-4 flex max-w-sm">
    <div class="bg-teal w-16">
      <div class="p-4">
        <svg
          class="h-8 w-8 fill-current text-white"
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 512 512"
        >
          <path
            d="M437.019 74.981C388.667 26.629 324.38 0 256 0S123.333 26.63 74.981 74.981 0 187.62 0 256s26.629 132.667 74.981 181.019C123.332 485.371 187.62 512 256 512s132.667-26.629 181.019-74.981C485.371 388.667 512 324.38 512 256s-26.629-132.668-74.981-181.019zM256 470.636C137.65 470.636 41.364 374.35 41.364 256S137.65 41.364 256 41.364 470.636 137.65 470.636 256 374.35 470.636 256 470.636z"
          />
          <path
            d="M256 235.318c-11.422 0-20.682 9.26-20.682 20.682v94.127c0 11.423 9.26 20.682 20.682 20.682 11.423 0 20.682-9.259 20.682-20.682V256c0-11.422-9.259-20.682-20.682-20.682zM270.625 147.248A20.826 20.826 0 0 0 256 141.19a20.826 20.826 0 0 0-14.625 6.058 20.824 20.824 0 0 0-6.058 14.625 20.826 20.826 0 0 0 6.058 14.625A20.83 20.83 0 0 0 256 182.556a20.826 20.826 0 0 0 14.625-6.058 20.826 20.826 0 0 0 6.058-14.625 20.839 20.839 0 0 0-6.058-14.625z"
          />
        </svg>
      </div>
    </div>
    <div class="text-grey-darker w-auto items-center p-4">
      <span class="pb-4 text-lg font-bold"> Heads Up! </span>
      <p class="leading-tight">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis, labore, voluptatem.
        Deserunt illum laborum maxime?
      </p>
    </div>
  </div>

  <div class="bg-red-lighter mb-4 flex max-w-sm">
    <div class="bg-red w-16">
      <div class="p-4">
        <svg
          class="h-8 w-8 fill-current text-white"
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 512 512"
        >
          <path
            d="M437.019 74.981C388.667 26.629 324.38 0 256 0S123.333 26.63 74.981 74.981 0 187.62 0 256s26.629 132.667 74.981 181.019C123.332 485.371 187.62 512 256 512s132.667-26.629 181.019-74.981C485.371 388.667 512 324.38 512 256s-26.629-132.668-74.981-181.019zM256 470.636C137.65 470.636 41.364 374.35 41.364 256S137.65 41.364 256 41.364 470.636 137.65 470.636 256 374.35 470.636 256 470.636z"
            fill="#FFF"
          />
          <path
            d="M341.22 170.781c-8.077-8.077-21.172-8.077-29.249 0L170.78 311.971c-8.077 8.077-8.077 21.172 0 29.249 4.038 4.039 9.332 6.058 14.625 6.058s10.587-2.019 14.625-6.058l141.19-141.191c8.076-8.076 8.076-21.171 0-29.248z"
            fill="#FFF"
          />
          <path
            d="M341.22 311.971l-141.191-141.19c-8.076-8.077-21.172-8.077-29.248 0-8.077 8.076-8.077 21.171 0 29.248l141.19 141.191a20.616 20.616 0 0 0 14.625 6.058 20.618 20.618 0 0 0 14.625-6.058c8.075-8.077 8.075-21.172-.001-29.249z"
            fill="#FFF"
          />
        </svg>
      </div>
    </div>
    <div class="w-auto items-center p-4 text-black opacity-75">
      <span class="pb-4 text-lg font-bold"> Heads Up! </span>
      <p class="leading-tight">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam, nemo!
      </p>
    </div>
  </div>
</div>

How to create a Alerts components with Tailwindcss with Tailwind CSS?

To create an Alerts component with Tailwind CSS, follow these steps:

Step 1: Create a new HTML file

Create a new HTML file and add the following code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Alerts Component with Tailwind CSS</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css">
</head>
<body>
  <div class="container mx-auto">
    <div class="my-4">
      <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative" role="alert">
        <strong class="font-bold">Error!</strong>
        <span class="block sm:inline">Something went wrong.</span>
        <span class="absolute top-0 bottom-0 right-0 px-4 py-3">
          <svg class="fill-current h-6 w-6 text-red-500" role="button" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
            <title>Close</title>
            <path d="M14.348 5.652a1 1 0 00-1.414 0L10 8.586 6.066 4.652a1 1 0 00-1.414 1.414L8.586 10l-3.934 3.934a1 1 0 000 1.414 1 1 0 001.414 0L10 11.414l3.934 3.934a1 1 0 001.414-1.414L11.414 10l3.934-3.934a1 1 0 000-1.414z" clip-rule="evenodd" fill-rule="evenodd"></path>
          </svg>
        </span>
      </div>
    </div>
  </div>
</body>
</html>

Step 2: Add Tailwind CSS

Add the Tailwind CSS stylesheet to your HTML file by adding the following code to the head section:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css">

Step 3: Add the Alerts component

Add the Alerts component to your HTML file by adding the following code:

<div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative" role="alert">
  <strong class="font-bold">Error!</strong>
  <span class="block sm:inline">Something went wrong.</span>
  <span class="absolute top-0 bottom-0 right-0 px-4 py-3">
    <svg class="fill-current h-6 w-6 text-red-500" role="button" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
      <title>Close</title>
      <path d="M14.348 5.652a1 1 0 00-1.414 0L10 8.586 6.066 4.652a1 1 0 00-1.414 1.414L8.586 10l-3.934 3.934a1 1 0 000 1.414 1 1 0 001.414 0L10 11.414l3.934 3.934a1 1 0 001.414-1.414L11.414 10l3.934-3.934a1 1 0 000-1.414z" clip-rule="evenodd" fill-rule="evenodd"></path>
    </svg>
  </span>
</div>

Step 4: Customize the Alerts component

Customize the Alerts component by adding the appropriate CSS classes to the HTML elements. For example, to create a success alert, you can use the following code:

<div class="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded relative" role="alert">
  <strong class="font-bold">Success!</strong>
  <span class="block sm:inline">Your request has been processed.</span>
  <span class="absolute top-0 bottom-0 right-0 px-4 py-3">
    <svg class="fill-current h-6 w-6 text-green-500" role="button" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
      <title>Close</title>
      <path d="M14.348 5.652a1 1 0 00-1.414 0L10 8.586 6.066 4.652a1 1 0 00-1.414 1.414L8.586 10l-3.934 3.934a1 1 0 000 1.414 1 1 0 001.414 0L10 11.414l3.934 3.934a1 1 0 001.414-1.414L11.414 10l3.934-3.934a1 1 0 000-1.414z" clip-rule="evenodd" fill-rule="evenodd"></path>
    </svg>
  </span>
</div>

Step 5: Add JavaScript to close the Alerts component

Add JavaScript code to close the Alerts component when the close button is clicked. For example, you can use the following code:

<script>
  document.addEventListener('DOMContentLoaded', function() {
    var closeButton = document.querySelectorAll('.alert .close');
    closeButton.forEach(function(button) {
      button.addEventListener('click', function() {
        this.parentElement.style.display = 'none';
      });
    });
  });
</script>

Conclusion

In this article, we learned how to create an Alerts component with Tailwind CSS. We saw how easy it is to create custom user interfaces with Tailwind CSS by using pre-defined CSS classes. We also saw how to customize the Alerts component by adding the appropriate CSS classes to the HTML elements. Finally, we added JavaScript code to close the Alerts component when the close button is clicked.