Tailwind CSS Alerts

Get started on your web projects with our Tailwind CSS alert which provides contextual feedback messages for typical user actions.

An alert displays a short and important message attracting the user's attention without interrupting the user's task. Use this element when you need to show highly-important messages to users or when you need a persistent static container that is closable by user actions.

Below we are presenting examples of alerts that you can use in your Tailwind CSS project. The examples come in different colors and styles so you can adapt them easily to your needs.

Alert primary

Alert Variants

The alert component comes with 2 different variants that you can change it using the gradient classes.

Alert primary

<div class="flex w-full flex-col gap-2">
  <div class="font-regular relative block w-full rounded-lg bg-pink-500 p-4 text-base leading-5 text-white opacity-100">
    Alert primary
  </div>
  <div class="font-regular relative mb-4 block w-full rounded-lg bg-gradient-to-tr from-pink-600 to-pink-400 p-4 text-base leading-5 text-white opacity-100">
    Alert primary
  </div>
</div>

Alert Colors

The alert component comes with 19 different colors that you can change it using the color classes, below there are some examples of the colors but you can check all of the them.

An info alert for showing message.

An error alert for showing message.

A success alert for showing message.

A warning alert for showing message.

<div class="font-regular relative mb-4 block w-full rounded-lg bg-blue-500 p-4 text-base leading-5 text-white opacity-100">
  An info alert for showing message.
</div>
<div class="font-regular relative mb-4 block w-full rounded-lg bg-red-500 p-4 text-base leading-5 text-white opacity-100">
  An error alert for showing message.
</div>
<div class="font-regular relative mb-4 block w-full rounded-lg bg-green-500 p-4 text-base leading-5 text-white opacity-100">
  A success alert for showing message.
</div>
<div class="font-regular relative mb-4 block w-full rounded-lg bg-orange-500 p-4 text-base leading-5 text-white opacity-100">
  A warning alert for showing message.
</div>

Alert with Icon

You can add an icon at the beginning of alert component using the i tag.

Alert with Icon

<div class="font-regular relative mb-4 block w-full rounded-lg bg-gradient-to-tr from-pink-600 to-pink-400 p-4 text-base leading-5 text-white opacity-100">
  <i class="fas fa-exclamation mr-2"></i>
  Alert with Icon
</div>

Alert Dismissible

You can make an alert dismissible by adding the data-dismissible="alertName" data attribute to the alert element and the data-dismissible-target="alertName" data attribute to the element that you want to close the alert with.

Alert dismissible

<div
  class="font-regular relative block w-full rounded-lg bg-pink-500 p-4 text-base leading-5 text-white opacity-100"
  data-dismissible="alert"
>
  <div class="mr-12">Alert dismissible</div>
  <div
    class="absolute top-2.5 right-3 w-max rounded-lg transition-all hover:bg-white hover:bg-opacity-20"
    data-dismissible-target="alert"
  >
    <button
      role="button"
      class="w-max rounded-lg p-1"
      data-alert-dimissible="true"
    >
      <svg
        xmlns="http://www.w3.org/2000/svg"
        class="h-6 w-6"
        fill="none"
        viewBox="0 0 24 24"
        stroke="currentColor"
        stroke-width="2"
      >
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          d="M6 18L18 6M6 6l12 12"
        ></path>
      </svg>
    </button>
  </div>
</div>

Custom Alert Close Icon

You can use any DOM element as the alert closing icon.

Sorry, something went wrong please try again.

<div
  class="font-regular relative block w-full rounded-lg bg-gradient-to-tr from-red-600 to-red-400 px-4 py-4 text-base text-white"
  data-dismissible="alert"
>
  <div class="absolute top-4 left-4">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 24 24"
      fill="currentColor"
      aria-hidden="true"
      class="h-6 w-6"
    >
      <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"
      ></path>
    </svg>
  </div>
  <div class="ml-8 mr-12">Sorry, something went wrong please try again.</div>
  <div
    class="absolute top-3 right-3 w-max rounded-lg transition-all hover:bg-white hover:bg-opacity-20"
    data-dismissible-target="alert"
  >
    <div role="button" class="w-max">
      <button
        class="select-none rounded-lg py-2 px-4 text-center align-middle font-sans text-xs font-bold uppercase text-white transition-all hover:bg-white/10 active:bg-white/30 disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none"
        type="button"
        data-ripple-dark="true"
      >
        Close
      </button>
    </div>
  </div>
</div>

Alert with Content

Use the example below to use alert component with more content like title and description.

Success

I don't know what that word means. I'm happy. But success, that goes back to what in somebody's eyes success means. For me, success is inner peace. That's a good day htmlFor me.

<div
  class="font-regular relative block w-full max-w-screen-md rounded-lg bg-green-500 px-4 py-4 text-base text-white"
  data-dismissible="alert"
>
  <div class="absolute top-4 left-4">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 24 24"
      fill="currentColor"
      aria-hidden="true"
      class="mt-px h-6 w-6"
    >
      <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"
      ></path>
    </svg>
  </div>
  <div class="ml-8 mr-12">
    <h5 class="block font-sans text-xl font-semibold leading-snug tracking-normal text-white antialiased">
      Success
    </h5>
    <p class="mt-2 block font-sans text-base font-normal leading-relaxed text-white antialiased">
      I don't know what that word means. I'm happy. But success, that goes
      back to what in somebody's eyes success means. For me, success is inner
      peace. That's a good day for me.
    </p>
  </div>
  <div
    data-dismissible-target="alert"
    data-ripple-dark="true"
    class="absolute top-3 right-3 w-max rounded-lg transition-all hover:bg-white hover:bg-opacity-20"
  >
    <div role="button" class="w-max rounded-lg p-1">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        class="h-6 w-6"
        fill="none"
        viewBox="0 0 24 24"
        stroke="currentColor"
        stroke-width="2"
      >
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          d="M6 18L18 6M6 6l12 12"
        ></path>
      </svg>
    </div>
  </div>
</div>

Alert Data Attributes

The following data attributes are available for alert element.

Attribute	Description
`data-dismissible`	Set the alert dismissible name, it should be the same as the `data-dismissible-target` data attribute.

Alert Trigger Data Attributes

The following data attributes are available for alert trigger element (The element that you want to close the alert with).

Attribute	Description
`data-dismissible-target`	Hide the alert element that has the same value of `data-dismissible-target` data attribute for it's `data-dismissible` data attribute.

Required Scrips

The alert component needs a required script file to work, you just need to add the below script file to the bottom of your html file.

<!-- from node_modules -->
<script src="node_modules/@material-tailwind/[email protected]/scripts/dismissible.js"></script>
 
<!-- from cdn -->
<script src="https://unpkg.com/@material-tailwind/[email protected]/scripts/dismissible.js"></script>

accordion

avatar

Edit this page on Github