How To Create Alert Box Using Tailwind CSS


As web developers, we understand the importance of alert boxes in delivering essential information and notifications to users. They serve as a critical communication tool, guiding users through actions or notifying them about important updates. However, designing and styling alert boxes can often be a time-consuming task. Luckily, I've discovered a solution that makes the process much more efficient and enjoyable: Tailwind CSS.

Tailwind CSS, a utility-first CSS framework, offers a convenient and straightforward approach to creating stylish and customizable alert boxes for our web applications. With its extensive range of utility classes, we can easily apply styles, customize colors, and add interactive elements to our alert boxes without the need for complex CSS code.

In this article, I will guide you through the world of Tailwind CSS alert boxes. Together, we'll explore step-by-step instructions on how to create and customize alert boxes using Tailwind CSS. I'll provide you with code examples at each step to ensure a clear understanding. Whether you're a beginner or an experienced developer, this guide will help you enhance the user experience of your web applications with visually appealing and functional alert boxes.

By the end of this article, you'll have the knowledge and skills to create various types of alert boxes, such as informational alerts, success notifications, warning messages, and error notifications, all powered by the simplicity and flexibility of Tailwind CSS.

So, let's embark on this journey together and level up our alert box game with Tailwind CSS!

Creating Stylish Alert Boxes with Tailwind CSS:

Step 1: Set up a new HTML file

Create a new HTML file and add the necessary boilerplate code, including the <html>, <head>, and <body> tags.

 

Step 2: Include Tailwind CSS CDN or import in your project

Option 1: Using CDN In the <head> section of your HTML file, include the following link to the Tailwind CSS CDN.

<link href="https://cdn.tailwindcss.com/2.2.19/tailwind.min.css" rel="stylesheet">

Option 2: Importing into your project If you have a local installation of Tailwind CSS, you can import it into your project using a bundler like webpack or by including the compiled CSS file in your HTML.

 

Step 3: Create the alert box container

Inside the <body> section of your HTML file, create a container to hold the alert box. You can use a <div> element with appropriate classes to style it as an alert box.

<div class="alert-box bg-blue-100 border-l-4 border-blue-500 text-blue-900 px-4 py-3 rounded relative" role="alert">
  <!-- Alert box content goes here -->
</div>

 

Step 4: Customize the alert box style

Tailwind CSS provides utility classes to style the alert box. Apply the relevant classes to the container to customize its appearance.

<div class="alert-box bg-blue-100 border-l-4 border-blue-500 text-blue-900 px-4 py-3 rounded relative" role="alert">
  <!-- Alert box content goes here -->
</div>

 

 

Step 5: Add content to the alert box

Inside the alert box container, add the necessary content for the alert box, such as a title and a description.

<div class="alert-box bg-blue-100 border-l-4 border-blue-500 text-blue-900 px-4 py-3 rounded relative" role="alert">
  <strong class="font-bold">Info:</strong>
  <span class="block sm:inline">This is an informational alert box.</span>
</div>

 

Step 6: Customize and style the alert box further

You can further customize and style the alert box using additional Tailwind CSS utility classes. For example, you can adjust the colors, padding, margin, or add icons to the alert box.

 

Step 7: types of alert boxes

To create different types of alert boxes (e.g., success, warning, error), repeat steps 3-6 with appropriate classes and content for each type.

Here's an example of creating a success alert box.

<div class="alert-box bg-green-100 border-l-4 border-green-500 text-green-900 px-4 py-3 rounded relative" role="alert">
  <strong class="font-bold">Success:</strong>
  <span class="block sm:inline">This is a success alert box.</span>
</div>

And here's an example of creating a warning alert box.

<div class="alert-box bg-yellow-100 border-l-4 border-yellow-500 text-yellow-900 px-4 py-3 rounded relative" role="alert">
  <strong class="font-bold">Warning:</strong>
  <span class="block sm:inline">This is a warning alert box.</span>
</div>

Basic alert box examples:

Alert offers different levels of severity that require immediate attention of the end users such as warning, error, or confirmation messages, which are determined by a distinctive color. Use one of the contextual classes below for a different look.

<div
  class="mb-4 rounded-lg bg-primary-100 px-6 py-5 text-base text-primary-600"
  role="alert">
  A simple primary alert—check it out!
</div>
<div
  class="mb-4 rounded-lg bg-secondary-100 px-6 py-5 text-base text-secondary-800"
  role="alert">
  A simple secondary alert—check it out!
</div>
<div
  class="mb-4 rounded-lg bg-success-100 px-6 py-5 text-base text-success-700"
  role="alert">
  A simple success alert—check it out!
</div>
<div
  class="mb-4 rounded-lg bg-danger-100 px-6 py-5 text-base text-danger-700"
  role="alert">
  A simple danger alert—check it out!
</div>
<div
  class="mb-4 rounded-lg bg-warning-100 px-6 py-5 text-base text-warning-800"
  role="alert">
  A simple warning alert—check it out!
</div>
<div
  class="mb-4 rounded-lg bg-info-100 px-6 py-5 text-base text-info-800"
  role="alert">
  A simple info alert—check it out!
</div>
<div
  class="mb-4 rounded-lg bg-neutral-50 px-6 py-5 text-base text-neutral-600"
  role="alert">
  A simple light alert—check it out!
</div>
<div
  class="mb-4 rounded-lg bg-neutral-800 px-6 py-5 text-base text-neutral-50 dark:bg-neutral-900"
  role="alert">
  A simple dark alert—check it out!
</div>

Output:

tailwind_css_basic_alert_box_example

 

Alert box with Icon examples:

Include a descriptive icon to complement the message inside the alert component with the following example.

<div
  class="mb-3 inline-flex w-full items-center rounded-lg bg-primary-100 px-6 py-5 text-base text-primary-700"
  role="alert">
  <span class="mr-2">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 24 24"
      fill="currentColor"
      class="h-5 w-5">
      <path
        fill-rule="evenodd"
        d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12zm8.706-1.442c1.146-.573 2.437.463 2.126 1.706l-.709 2.836.042-.02a.75.75 0 01.67 1.34l-.04.022c-1.147.573-2.438-.463-2.127-1.706l.71-2.836-.042.02a.75.75 0 11-.671-1.34l.041-.022zM12 9a.75.75 0 100-1.5.75.75 0 000 1.5z"
        clip-rule="evenodd" />
    </svg>
  </span>
  A simple primary alert - check it out!
</div>
<div
  class="mb-3 inline-flex w-full items-center rounded-lg bg-secondary-100 px-6 py-5 text-base text-secondary-800"
  role="alert">
  <span class="mr-2">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 24 24"
      fill="currentColor"
      class="h-5 w-5">
      <path
        fill-rule="evenodd"
        d="M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25zM12.75 9a.75.75 0 00-1.5 0v2.25H9a.75.75 0 000 1.5h2.25V15a.75.75 0 001.5 0v-2.25H15a.75.75 0 000-1.5h-2.25V9z"
        clip-rule="evenodd" />
    </svg>
  </span>
  A simple secondary alert - check it out!
</div>
<div
  class="mb-3 inline-flex w-full items-center rounded-lg bg-success-100 px-6 py-5 text-base text-success-700"
  role="alert">
  <span class="mr-2">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 24 24"
      fill="currentColor"
      class="h-5 w-5">
      <path
        fill-rule="evenodd"
        d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12zm13.36-1.814a.75.75 0 10-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 00-1.06 1.06l2.25 2.25a.75.75 0 001.14-.094l3.75-5.25z"
        clip-rule="evenodd" />
    </svg>
  </span>
  A simple success alert - check it out!
</div>
<div
  class="mb-3 inline-flex w-full items-center rounded-lg bg-danger-100 px-6 py-5 text-base text-danger-700"
  role="alert">
  <span class="mr-2">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 24 24"
      fill="currentColor"
      class="h-5 w-5">
      <path
        fill-rule="evenodd"
        d="M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25zm-1.72 6.97a.75.75 0 10-1.06 1.06L10.94 12l-1.72 1.72a.75.75 0 101.06 1.06L12 13.06l1.72 1.72a.75.75 0 101.06-1.06L13.06 12l1.72-1.72a.75.75 0 10-1.06-1.06L12 10.94l-1.72-1.72z"
        clip-rule="evenodd" />
    </svg>
  </span>
  A simple danger alert - check it out!
</div>
<div
  class="mb-3 inline-flex w-full items-center rounded-lg bg-warning-100 px-6 py-5 text-base text-warning-800"
  role="alert">
  <span class="mr-2">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 24 24"
      fill="currentColor"
      class="h-5 w-5">
      <path
        fill-rule="evenodd"
        d="M9.401 3.003c1.155-2 4.043-2 5.197 0l7.355 12.748c1.154 2-.29 4.5-2.599 4.5H4.645c-2.309 0-3.752-2.5-2.598-4.5L9.4 3.003zM12 8.25a.75.75 0 01.75.75v3.75a.75.75 0 01-1.5 0V9a.75.75 0 01.75-.75zm0 8.25a.75.75 0 100-1.5.75.75 0 000 1.5z"
        clip-rule="evenodd" />
    </svg>
  </span>
  A simple warning alert - check it out!
</div>
<div
  class="mb-3 inline-flex w-full items-center rounded-lg bg-info-100 px-6 py-5 text-base text-info-800"
  role="alert">
  <span class="mr-2">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 24 24"
      fill="currentColor"
      class="h-5 w-5">
      <path
        fill-rule="evenodd"
        d="M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25zm4.28 10.28a.75.75 0 000-1.06l-3-3a.75.75 0 10-1.06 1.06l1.72 1.72H8.25a.75.75 0 000 1.5h5.69l-1.72 1.72a.75.75 0 101.06 1.06l3-3z"
        clip-rule="evenodd" />
    </svg>
  </span>
  A simple indigo alert - check it out!
</div>
<div
  class="mb-3 inline-flex w-full items-center rounded-lg bg-neutral-50 px-6 py-5 text-base text-neutral-600"
  role="alert">
  <span class="mr-2">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 24 24"
      fill="currentColor"
      class="h-5 w-5">
      <path
        d="M8.25 10.875a2.625 2.625 0 115.25 0 2.625 2.625 0 01-5.25 0z" />
      <path
        fill-rule="evenodd"
        d="M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25zm-1.125 4.5a4.125 4.125 0 102.338 7.524l2.007 2.006a.75.75 0 101.06-1.06l-2.006-2.007a4.125 4.125 0 00-3.399-6.463z"
        clip-rule="evenodd" />
    </svg>
  </span>
  A simple light alert - check it out!
</div>
<div
  class="mb-3 inline-flex w-full items-center rounded-lg bg-neutral-800 px-6 py-5 text-base text-neutral-50 dark:bg-neutral-900"
  role="alert">
  <span class="mr-2">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 24 24"
      fill="currentColor"
      class="h-5 w-5">
      <path
        fill-rule="evenodd"
        d="M6.32 2.577a49.255 49.255 0 0111.36 0c1.497.174 2.57 1.46 2.57 2.93V21a.75.75 0 01-1.085.67L12 18.089l-7.165 3.583A.75.75 0 013.75 21V5.507c0-1.47 1.073-2.756 2.57-2.93z"
        clip-rule="evenodd" />
    </svg>
  </span>
  A simple dark alert - check it out!
</div>

Output:

tailwind_css_alert_box_with_icon_example

 

Alert box with dismissing example:

To skip alerts that the user has already read, we can add an optional close button so the user can easily dismiss it.

HTML:
<div
  class="mb-3 hidden w-full items-center rounded-lg bg-warning-100 px-6 py-5 text-base text-warning-800 data-[te-alert-show]:inline-flex"
  role="alert"
  data-te-alert-init
  data-te-alert-show>
  <strong class="mr-1">Holy guacamole! </strong> You should check in on
  some of those fields below.
  <button
    type="button"
    class="ml-auto box-content rounded-none border-none p-1 text-warning-900 opacity-50 hover:text-warning-900 hover:no-underline hover:opacity-75 focus:opacity-100 focus:shadow-none focus:outline-none"
    data-te-alert-dismiss
    aria-label="Close">
    <span
      class="w-[1em] focus:opacity-100 disabled:pointer-events-none disabled:select-none disabled:opacity-25 [&.disabled]:pointer-events-none [&.disabled]:select-none [&.disabled]:opacity-25">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 24 24"
        fill="currentColor"
        class="h-6 w-6">
        <path
          fill-rule="evenodd"
          d="M5.47 5.47a.75.75 0 011.06 0L12 10.94l5.47-5.47a.75.75 0 111.06 1.06L13.06 12l5.47 5.47a.75.75 0 11-1.06 1.06L12 13.06l-5.47 5.47a.75.75 0 01-1.06-1.06L10.94 12 5.47 6.53a.75.75 0 010-1.06z"
          clip-rule="evenodd" />
      </svg>
    </span>
  </button>
</div>

Javascript:

// Initialization for ES Users
import {
  Alert,
  initTE,
} from "tw-elements";

initTE({ Alert });

If you are looking for more advanced options, try Bootstrap Alerts from MDBootstrap.

 


You might also like: 

RECOMMENDED POSTS

FEATURE POSTS