Published on

Learn How To Build A Alerts Components With Tailwind CSS from the Pros

Alerts components

In this article, we will learn how to build an Alerts component with Tailwind CSS. We will start by giving a brief introduction to Tailwind CSS, then we will discuss the Alerts component and why Tailwind CSS is the perfect tool to create it. We will also provide a preview and source code of the Alerts component, and finally, we will explain how to create it step by step.

What is Tailwind CSS?

Tailwind CSS is a utility-first CSS framework that provides a set of pre-defined classes to style your HTML elements. It allows you to quickly build responsive and customizable user interfaces without writing any CSS code. Tailwind CSS is gaining popularity among web developers due to its simplicity and flexibility.

The description of Alerts components ui component

An Alerts component is a user interface element that displays important messages to the user. It is commonly used to inform the user about errors, warnings, or successful actions. The Alerts component usually appears at the top of the page and disappears after a few seconds.

Why use Tailwind CSS to create an Alerts components ui component?

Tailwind CSS is the perfect tool to create an Alerts component because it provides a set of utility classes that allow you to customize the appearance of the component without writing any CSS code. Tailwind CSS also provides responsive classes that enable you to create a responsive design for the component.

The preview of Alerts components ui component

The Alerts component is a simple and effective way to display important messages to the user. It is usually displayed at the top of the page and disappears after a few seconds. The component can be customized to match the design of your website or application.

Free download of the Alerts components's source code

The source code of Alerts components ui component

To create an Alerts component with Tailwind CSS, you need to define the HTML structure and apply the Tailwind CSS classes to it. The following code shows the HTML structure and the Tailwind CSS classes used to create the Alerts component.

<div
  class="min-w-screen flex min-h-screen items-center justify-center bg-gray-100 bg-gray-100 py-6 font-sans"
>
  <div class="container">
    <div class="card mb-5 flex flex-col rounded-xl bg-white py-3 px-5">
      <div class="title mb-3 text-xl font-medium">Basic Alerts</div>
      <div class="w-full">
        <div
          class="mb-4 rounded-md border border-blue-200 bg-blue-100 py-3 px-5 text-sm text-blue-900"
          role="alert"
        >
          A simple <strong>primary</strong> alert—check it out!
        </div>

        <div
          class="mb-4 rounded-md border border-gray-200 bg-gray-100 py-3 px-5 text-sm text-gray-900"
          role="alert"
        >
          A simple <strong>secondary</strong> alert—check it out!
        </div>

        <div
          class="mb-4 rounded-md border border-green-200 bg-green-100 py-3 px-5 text-sm text-green-900"
          role="alert"
        >
          A simple <strong>success</strong> alert—check it out!
        </div>

        <div
          class="mb-4 rounded-md border border-red-200 bg-red-100 py-3 px-5 text-sm text-red-900"
          role="alert"
        >
          A simple <strong>danger</strong> alert—check it out!
        </div>

        <div
          class="mb-4 rounded-md border border-yellow-200 bg-yellow-100 py-3 px-5 text-sm text-yellow-900"
          role="alert"
        >
          A simple <strong>warning</strong> alert—check it out!
        </div>

        <div
          class="mb-4 rounded-md border border-purple-200 bg-purple-100 py-3 px-5 text-sm text-purple-900"
          role="alert"
        >
          A simple <strong>info</strong> alert—check it out!
        </div>

        <div
          class="mb-4 rounded-md border border-gray-400 bg-gray-300 py-3 px-5 text-sm text-gray-900"
          role="alert"
        >
          A simple <strong>dark</strong> alert—check it out!
        </div>
      </div>
    </div>

    <div class="card mb-5 flex flex-col rounded-xl bg-white py-3 px-5" role="alert">
      <div class="title mb-3 text-xl font-medium">Alerts with title</div>
      <div class="w-full">
        <div class="mb-4 flex flex-col rounded-md border border-blue-200 bg-blue-100 text-blue-900">
          <div class="border-b border-blue-200 py-2 px-5 text-sm font-bold shadow-lg">
            Lorem ipsum title primary
          </div>
          <div class="py-2 px-5 text-sm">A simple primary alert—check it out!</div>
        </div>

        <div
          class="mb-4 flex flex-col rounded-md border border-gray-200 bg-gray-100 text-gray-900"
          role="alert"
        >
          <div class="border-b border-gray-200 py-2 px-5 text-sm font-bold shadow-lg">
            Lorem ipsum title secondary
          </div>
          <div class="py-2 px-5 text-sm">A simple secondary alert—check it out!</div>
        </div>

        <div
          class="mb-4 flex flex-col rounded-md border border-green-200 bg-green-100 text-green-900"
          role="alert"
        >
          <div class="border-b border-green-200 py-2 px-5 text-sm font-bold shadow-lg">
            Lorem ipsum title success
          </div>
          <div class="py-2 px-5 text-sm">A simple success alert—check it out!</div>
        </div>

        <div
          class="mb-4 flex flex-col rounded-md border border-red-200 bg-red-100 text-red-900"
          role="alert"
        >
          <div class="border-b border-red-200 py-2 px-5 text-sm font-bold shadow-lg">
            Lorem ipsum title danger
          </div>
          <div class="py-2 px-5 text-sm">A simple danger alert—check it out!</div>
        </div>

        <div
          class="mb-4 flex flex-col rounded-md border border-yellow-200 bg-yellow-100 text-yellow-900"
          role="alert"
        >
          <div class="border-b border-yellow-200 py-2 px-5 text-sm font-bold shadow-lg">
            Lorem ipsum title warning
          </div>
          <div class="py-2 px-5 text-sm">A simple warning alert—check it out!</div>
        </div>

        <div
          class="mb-4 flex flex-col rounded-md border border-purple-200 bg-purple-100 text-purple-900"
          role="alert"
        >
          <div class="border-b border-purple-200 py-2 px-5 text-sm font-bold shadow-lg">
            Lorem ipsum title info
          </div>
          <div class="py-2 px-5 text-sm">A simple info alert—check it out!</div>
        </div>

        <div
          class="mb-4 flex flex-col rounded-md border border-gray-400 bg-gray-300 text-gray-900"
          role="alert"
        >
          <div class="border-b border-gray-400 py-2 px-5 text-sm font-bold shadow-lg">
            Lorem ipsum title dark
          </div>
          <div class="py-2 px-5 text-sm">A simple dark alert—check it out!</div>
        </div>
      </div>
    </div>

    <div class="card mb-5 flex flex-col rounded-xl bg-white py-3 px-5">
      <div class="title mb-3 text-xl font-medium">Dismissible Alerts</div>
      <div class="w-full">
        <div
          class="mb-4 flex items-center justify-between rounded-md border border-blue-200 bg-blue-100 py-3 px-5 text-sm text-blue-900"
          role="alert"
        >
          <span>A simple primary alert—check it out!</span>
          <button
            class="w-4"
            type="button"
            data-dismiss="alert"
            aria-label="Close"
            onclick="this.parentElement.remove();"
          >
            <svg
              xmlns="http://www.w3.org/2000/svg"
              fill="none"
              viewBox="0 0 24 24"
              stroke="currentColor"
            >
              <path
                strokeLinecap="round"
                strokeLinejoin="round"
                strokeWidth="{2}"
                d="M6 18L18 6M6 6l12 12"
              />
            </svg>
          </button>
        </div>

        <div
          class="mb-4 flex items-center justify-between rounded-md border border-gray-200 bg-gray-100 py-3 px-5 text-sm text-gray-900"
          role="alert"
        >
          <span>A simple secondary alert—check it out!</span>
          <button
            class="w-4"
            type="button"
            data-dismiss="alert"
            aria-label="Close"
            onclick="this.parentElement.remove();"
          >
            <svg
              xmlns="http://www.w3.org/2000/svg"
              fill="none"
              viewBox="0 0 24 24"
              stroke="currentColor"
            >
              <path
                strokeLinecap="round"
                strokeLinejoin="round"
                strokeWidth="{2}"
                d="M6 18L18 6M6 6l12 12"
              />
            </svg>
          </button>
        </div>

        <div
          class="mb-4 flex items-center justify-between rounded-md border border-green-200 bg-green-100 py-3 px-5 text-sm text-green-900"
          role="alert"
        >
          <span>A simple success alert—check it out!</span>
          <button
            class="w-4"
            type="button"
            data-dismiss="alert"
            aria-label="Close"
            onclick="this.parentElement.remove();"
          >
            <svg
              xmlns="http://www.w3.org/2000/svg"
              fill="none"
              viewBox="0 0 24 24"
              stroke="currentColor"
            >
              <path
                strokeLinecap="round"
                strokeLinejoin="round"
                strokeWidth="{2}"
                d="M6 18L18 6M6 6l12 12"
              />
            </svg>
          </button>
        </div>

        <div
          class="mb-4 flex items-center justify-between rounded-md border border-red-200 bg-red-100 py-3 px-5 text-sm text-red-900"
          role="alert"
        >
          <span>A simple danger alert—check it out!</span>
          <button
            class="w-4"
            type="button"
            data-dismiss="alert"
            aria-label="Close"
            onclick="this.parentElement.remove();"
          >
            <svg
              xmlns="http://www.w3.org/2000/svg"
              fill="none"
              viewBox="0 0 24 24"
              stroke="currentColor"
            >
              <path
                strokeLinecap="round"
                strokeLinejoin="round"
                strokeWidth="{2}"
                d="M6 18L18 6M6 6l12 12"
              />
            </svg>
          </button>
        </div>

        <div
          class="mb-4 flex items-center justify-between rounded-md border border-yellow-200 bg-yellow-100 py-3 px-5 text-sm text-yellow-900"
          role="alert"
        >
          <span>A simple warning alert—check it out!</span>
          <button
            class="w-4"
            type="button"
            data-dismiss="alert"
            aria-label="Close"
            onclick="this.parentElement.remove();"
          >
            <svg
              xmlns="http://www.w3.org/2000/svg"
              fill="none"
              viewBox="0 0 24 24"
              stroke="currentColor"
            >
              <path
                strokeLinecap="round"
                strokeLinejoin="round"
                strokeWidth="{2}"
                d="M6 18L18 6M6 6l12 12"
              />
            </svg>
          </button>
        </div>

        <div
          class="mb-4 flex items-center justify-between rounded-md border border-purple-200 bg-purple-100 py-3 px-5 text-sm text-purple-900"
          role="alert"
        >
          <span>A simple info alert—check it out!</span>
          <button
            class="w-4"
            type="button"
            data-dismiss="alert"
            aria-label="Close"
            onclick="this.parentElement.remove();"
          >
            <svg
              xmlns="http://www.w3.org/2000/svg"
              fill="none"
              viewBox="0 0 24 24"
              stroke="currentColor"
            >
              <path
                strokeLinecap="round"
                strokeLinejoin="round"
                strokeWidth="{2}"
                d="M6 18L18 6M6 6l12 12"
              />
            </svg>
          </button>
        </div>

        <div
          class="mb-4 flex items-center justify-between rounded-md border border-gray-400 bg-gray-300 py-3 px-5 text-sm text-gray-900"
          role="alert"
        >
          <span>A simple dark alert—check it out!</span>
          <button
            class="w-4"
            type="button"
            data-dismiss="alert"
            aria-label="Close"
            onclick="this.parentElement.remove();"
          >
            <svg
              xmlns="http://www.w3.org/2000/svg"
              fill="none"
              viewBox="0 0 24 24"
              stroke="currentColor"
            >
              <path
                strokeLinecap="round"
                strokeLinejoin="round"
                strokeWidth="{2}"
                d="M6 18L18 6M6 6l12 12"
              />
            </svg>
          </button>
        </div>
      </div>
    </div>

    <div class="card mb-5 flex flex-col rounded-xl bg-white py-3 px-5">
      <div class="title mb-3 text-xl font-medium">Alerts with icons</div>
      <div class="w-full">
        <div
          class="mb-4 flex items-center rounded-md border border-blue-200 bg-blue-100 py-3 px-5 text-sm text-blue-900"
          role="alert"
        >
          <div class="mr-2 w-4">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              fill="none"
              viewBox="0 0 24 24"
              stroke="currentColor"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z"
              />
            </svg>
          </div>
          <span>A simple <strong>primary</strong> alert—check it out!</span>
        </div>

        <div
          class="mb-4 flex items-center rounded-md border border-gray-200 bg-gray-100 py-3 px-5 text-sm text-gray-900"
          role="alert"
        >
          <div class="mr-2 w-4">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              fill="none"
              viewBox="0 0 24 24"
              stroke="currentColor"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M13 9l3 3m0 0l-3 3m3-3H8m13 0a9 9 0 11-18 0 9 9 0 0118 0z"
              />
            </svg>
          </div>
          <span>A simple <strong>secondary</strong> alert—check it out!</span>
        </div>

        <div
          class="mb-4 flex items-center rounded-md border border-green-200 bg-green-100 py-3 px-5 text-sm text-green-900"
          role="alert"
        >
          <div class="mr-2 w-4">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              fill="none"
              viewBox="0 0 24 24"
              stroke="currentColor"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M14 10h4.764a2 2 0 011.789 2.894l-3.5 7A2 2 0 0115.263 21h-4.017c-.163 0-.326-.02-.485-.06L7 20m7-10V5a2 2 0 00-2-2h-.095c-.5 0-.905.405-.905.905 0 .714-.211 1.412-.608 2.006L7 11v9m7-10h-2M7 20H5a2 2 0 01-2-2v-6a2 2 0 012-2h2.5"
              />
            </svg>
          </div>
          <span>A simple <strong>success</strong> alert—check it out!</span>
        </div>

        <div
          class="mb-4 flex items-center rounded-md border border-red-200 bg-red-100 py-3 px-5 text-sm text-red-900"
          role="alert"
        >
          <div class="mr-2 w-4">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              fill="none"
              viewBox="0 0 24 24"
              stroke="currentColor"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M20.618 5.984A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016zM12 9v2m0 4h.01"
              />
            </svg>
          </div>
          <span>A simple <strong>danger</strong> alert—check it out!</span>
        </div>

        <div
          class="mb-4 flex items-center rounded-md border border-yellow-200 bg-yellow-100 py-3 px-5 text-sm text-yellow-900"
          role="alert"
        >
          <div class="mr-2 w-4">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              fill="none"
              viewBox="0 0 24 24"
              stroke="currentColor"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
              />
            </svg>
          </div>
          <span>A simple <strong>warning</strong> alert—check it out!</span>
        </div>

        <div
          class="mb-4 flex items-center rounded-md border border-purple-200 bg-purple-100 py-3 px-5 text-sm text-purple-900"
          role="alert"
        >
          <div class="mr-2 w-4">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              fill="none"
              viewBox="0 0 24 24"
              stroke="currentColor"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
              />
            </svg>
          </div>
          <span>A simple <strong>info</strong> alert—check it out!</span>
        </div>

        <div
          class="mb-4 flex items-center rounded-md border border-gray-400 bg-gray-300 py-3 px-5 text-sm text-gray-900"
          role="alert"
        >
          <div class="mr-2 w-4">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              fill="none"
              viewBox="0 0 24 24"
              stroke="currentColor"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"
              />
            </svg>
          </div>
          <span>A simple <strong>dark</strong> alert—check it out!</span>
        </div>
      </div>
    </div>
  </div>
</div>

How to create an Alerts components with Tailwind CSS?

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

Step 1: Define the HTML structure

The first step is to define the HTML structure of the Alerts component. The following code shows the basic structure of the component:

<div class="bg-blue-100 border-t-4 border-blue-500 rounded-b text-blue-900 px-4 py-3 shadow-md" role="alert">
  <div class="flex">
    <div class="py-1">
      <svg class="fill-current h-6 w-6 text-blue-500 mr-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
        <path d="M10 12a2 2 0 100-4 2 2 0 000 4z"/>
        <path fill-rule="evenodd" d="M10 18a8 8 0 110-16 8 8 0 010 16zm0-2a6 6 0 100-12 6 6 0 000 12z" clip-rule="evenodd"/>
        <path d="M9 2a1 1 0 00-1 1v5a1 1 0 102 0V3a1 1 0 00-1-1z"/>
      </svg>
    </div>
    <div>
      <p class="font-bold">Alert message</p>
      <p class="text-sm">Additional message details</p>
    </div>
  </div>
</div>

In this code, we have defined a div element with the class bg-blue-100 to set the background color of the component, border-t-4 border-blue-500 to set the top border color of the component, rounded-b to set the bottom border radius of the component, text-blue-900 to set the text color of the component, px-4 py-3 to set the padding of the component, and shadow-md to add a shadow effect to the component.

Inside the div element, we have defined a div element with the class flex to create a flex container, and two child elements. The first child element is a div element with the class py-1 that contains an SVG icon, and the second child element is a div element that contains the alert message and additional message details.

Step 2: Apply Tailwind CSS classes

The next step is to apply the Tailwind CSS classes to the HTML structure. The following code shows the Tailwind CSS classes used to create the Alerts component:

<div class="bg-blue-100 border-t-4 border-blue-500 rounded-b text-blue-900 px-4 py-3 shadow-md" role="alert">
  <div class="flex">
    <div class="py-1">
      <svg class="fill-current h-6 w-6 text-blue-500 mr-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
        <path d="M10 12a2 2 0 100-4 2 2 0 000 4z"/>
        <path fill-rule="evenodd" d="M10 18a8 8 0 110-16 8 8 0 010 16zm0-2a6 6 0 100-12 6 6 0 000 12z" clip-rule="evenodd"/>
        <path d="M9 2a1 1 0 00-1 1v5a1 1 0 102 0V3a1 1 0 00-1-1z"/>
      </svg>
    </div>
    <div>
      <p class="font-bold">Alert message</p>
      <p class="text-sm">Additional message details</p>
    </div>
  </div>
</div>

In this code, we have applied the following Tailwind CSS classes to the HTML structure:

  • bg-blue-100: sets the background color of the component to light blue.
  • border-t-4 border-blue-500: sets the top border color of the component to blue.
  • rounded-b: sets the bottom border radius of the component to rounded.
  • text-blue-900: sets the text color of the component to dark blue.
  • px-4 py-3: sets the padding of the component to 4 pixels on the x-axis and 3 pixels on the y-axis.
  • shadow-md: adds a shadow effect to the component.
  • flex: creates a flex container.
  • py-1: sets the padding of the child element to 1 pixel on the y-axis.
  • fill-current h-6 w-6 text-blue-500 mr-4: sets the color, height, width, and margin-right of the SVG icon.

Step 3: Customize the Alerts component

You can customize the Alerts component by changing the Tailwind CSS classes applied to the HTML structure. For example, you can change the background color of the component to red by applying the bg-red-100 class, or you can change the text color of the component to white by applying the text-white class.

Conclusion

In this article, we have learned how to build an Alerts component with Tailwind CSS. We have discussed the benefits of using Tailwind CSS to create the component, provided a preview and source code of the component, and explained how to create it step by step. By following these steps, you can create a customizable and responsive Alerts component that enhances the user experience of your website or application.