Published on

16 Tailwind Alert components

16 Tailwind Alert components

16 Tailwind Alert components

Tailwind: Alerts Components

Here are 16 Tailwind Alerts components along with their HTML and Tailwind classes:

1. Success Alert:

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

2. Information Alert:

<div
  class="rounded-b border-t-4 border-blue-500 bg-blue-100 px-4 py-3 text-blue-900 shadow-md"
  role="alert"
>
  <div class="flex">
    <div class="py-1">
      <svg
        width="20"
        height="20"
        xmlns="http://www.w3.org/2000/svg"
        fill="currentColor"
        class="bi bi-info-circle-fill mr-2 text-blue-500"
        viewBox="0 0 16 16"
      >
        <path
          d="M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0zm.5 4a.5.5 0 0 1 .5.5v4a.5.5 0 0 1-1 0V4.5a.5.5 0 0 1 .5-.5zM8 11a1 1 0 1 1 0-2 1 1 0 0 1 0 2z"
        />
      </svg>
    </div>
    <div>
      <p class="font-bold">Information Alert</p>
      <p class="text-sm">This is an example of an information alert.</p>
    </div>
  </div>
</div>

3. Warning Alert:

<div
  class="border-l-4 border-yellow-500 bg-yellow-100 p-4 text-yellow-700"
  role="alert"
>
  <p class="font-bold">Warning</p>
  <p>This is an example of a warning alert.</p>
</div>

4. Error Alert:

<div
  class="relative rounded border border-red-400 bg-red-100 px-4 py-3 text-red-700"
  role="alert"
>
  <strong class="font-bold">Error!</strong>
  <span class="block sm:inline">Your data has not been saved.</span>
  <span class="absolute bottom-0 right-0 top-0 px-4 py-3">
    <svg
      class="h-6 w-6 fill-current text-red-500"
      role="button"
      viewBox="0 0 20 20"
    >
      <title>Close</title>
      <path
        d="M14.348 5.652a1 1 0 0 0-1.414 0L10 8.586 6.066 4.652a1 1 0 0 0-1.414 1.414L8.586 10l-3.934 3.934a1 1 0 1 0 1.414 1.414L10 11.414l3.934 3.934a1 1 0 1 0 1.414-1.414L11.414 10l3.934-3.934a1 1 0 0 0 0-1.414z"
      />
    </svg>
  </span>
</div>

5. Square Success Alert:

<div
  class="rounded-b-2xl border-b border-t border-green-500 bg-green-100 px-4 py-3 text-green-700"
  role="alert"
>
  <p class="font-bold">Success!</p>
  <p>Your data has been saved.</p>
</div>

6. Square Information Alert:

<div
  class="rounded-b-2xl border-b border-t border-blue-500 bg-blue-100 px-4 py-3 text-blue-700"
  role="alert"
>
  <p class="font-bold">Information Alert</p>
  <p>This is an example of an information alert.</p>
</div>

7. Square Warning Alert:

<div
  class="rounded-b-2xl border-b border-t border-yellow-500 bg-yellow-100 px-4 py-3 text-yellow-700"
  role="alert"
>
  <p class="font-bold">Warning</p>
  <p>This is an example of a warning alert.</p>
</div>

8. Square Error Alert:

<div
  class="rounded-b-2xl border-b border-t border-red-500 bg-red-100 px-4 py-3 text-red-700"
  role="alert"
>
  <p class="font-bold">Error!</p>
  <p>Your data has not been saved.</p>
</div>

9. Success Alert with Icon:

<div
  class="relative rounded border border-green-400 bg-green-100 px-4 py-3 text-green-700"
  role="alert"
>
  <span class="block sm:inline"
    ><svg
      class="mr-4 h-6 w-6 fill-current text-green-500"
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 20 20"
    >
      <path d="M0 11l2-2 5 5L18 3l2 2L7 18z" /></svg
    >Your data has been saved.</span
  >
  <span class="absolute bottom-0 right-0 top-0 px-4 py-3">
    <svg
      class="h-6 w-6 fill-current text-green-500"
      role="button"
      viewBox="0 0 20 20"
    >
      <title>Close</title>
      <path
        d="M14.348 5.652a1 1 0 0 0-1.414 0L10 8.586 6.066 4.652a1 1 0 0 0-1.414 1.414L8.586 10l-3.934 3.934a1 1 0 1 0 1.414 1.414L10 11.414l3.934 3.934a1 1 0 1 0 1.414-1.414L11.414 10l3.934-3.934a1 1 0 0 0 0-1.414z"
      />
    </svg>
  </span>
</div>

10. Information Alert with Icon:

<div
  class="rounded-b border-t-4 border-blue-500 bg-blue-100 px-4 py-3 text-blue-900 shadow-md"
  role="alert"
>
  <div class="flex">
    <div class="py-1">
      <svg
        width="20"
        height="20"
        xmlns="http://www.w3.org/2000/svg"
        fill="currentColor"
        class="bi bi-info-circle-fill mr-2 text-blue-500"
        viewBox="0 0 16 16"
      >
        <path
          d="M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0zm.5 4a.5.5 0 0 1 .5.5v4a.5.5 0 0 1-1 0V4.5a.5.5 0 0 1 .5-.5zM8 11a1 1 0 1 1 0-2 1 1 0 0 1 0 2z"
        />
      </svg>
    </div>
    <div>
      <p class="font-bold">Information Alert</p>
      <p class="text-sm">This is an example of an information alert.</p>
    </div>
  </div>
</div>

11. Warning Alert with Icon:

<div
  class="border-l-4 border-yellow-500 bg-yellow-100 p-4 text-yellow-700"
  role="alert"
>
  <div class="flex">
    <div class="py-1">
      <svg
        class="mr-4 h-6 w-6 fill-current text-yellow-500"
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 20 20"
      >
        <path
          fill-rule="evenodd"
          d="M18 10a8 8 0 1 1-16 0 8 8 0 0 1 16 0zm-9.293-1.707a1 1 0 0 0-1.414 1.414L8.586 10 7.293 11.293a1 1 0 1 0 1.414 1.414L10 11.414l1.293 1.293a1 1 0 1 0 1.414-1.414L11.414 10l1.293-1.293a1 1 0 0 0-1.414-1.414L10 8.586 8.707 7.293z"
        />
      </svg>
    </div>
    <div>
      <p class="font-bold">Warning</p>
      <p>This is an example of a warning alert.</p>
    </div>
  </div>
</div>

12. Error Alert with Icon:

<div
  class="relative rounded border border-red-400 bg-red-100 px-4 py-3 text-red-700"
  role="alert"
>
  <span class="block sm:inline"
    ><svg
      class="mr-4 h-6 w-6 fill-current text-red-500"
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 20 20"
    >
      <path
        fill-rule="evenodd"
        d="M18 10a8 8 0 1 1-16 0 8 8 0 0 1 16 0zm-9.293-1.707a1 1 0 0 0-1.414 1.414L8.586 10 7.293 11.293a1 1 0 1 0 1.414 1.414L10 11.414l1.293 1.293a1 1 0 1 0 1.414-1.414L11.414 10l1.293-1.293a1 1 0 0 0-1.414-1.414L10 8.586 8.707 7.293z"
      /></svg
    >Your data has not been saved.</span
  >
  <span class="absolute bottom-0 right-0 top-0 px-4 py-3">
    <svg
      class="h-6 w-6 fill-current text-red-500"
      role="button"
      viewBox="0 0 20 20"
    >
      <title>Close</title>
      <path
        d="M14.348 5.652a1 1 0 0 0-1.414 0L10 8.586 6.066 4.652a1 1 0 0 0-1.414 1.414L8.586 10l-3.934 3.934a1 1 0 1 0 1.414 1.414L10 11.414l3.934 3.934a1 1 0 1 0 1.414-1.414L11.414 10l3.934-3.934a1 1 0 0 0 0-1.414z"
      />
    </svg>
  </span>
</div>

13. Success Outline:

<div
  class="relative rounded border border-green-500 bg-green-50 px-4 py-3 text-green-700"
  role="alert"
>
  <strong class="font-bold">Success!</strong>
  <span class="block sm:inline">Your data has been saved.</span>
  <span class="absolute bottom-0 right-0 top-0 px-4 py-3">
    <svg
      class="h-6 w-6 fill-current text-green-500"
      role="button"
      viewBox="0 0 20 20"
    >
      <title>Close</title>
      <path
        d="M14.348 5.652a1 1 0 0 0-1.414 0L10 8.586 6.066 4.652a1 1 0 0 0-1.414 1.414L8.586 10l-3.934 3.934a1 1 0 1 0 1.414 1.414L10 11.414l3.934 3.934a1 1 0 1 0 1.414-1.414L11.414 10l3.934-3.934a1 1 0 0 0 0-1.414z"
      />
    </svg>
  </span>
</div>

14. Warning Outline:

<div
  class="rounded border border-yellow-500 bg-yellow-50 px-4 py-3 text-yellow-700"
  role="alert"
>
  <p class="font-bold">Warning</p>
  <p>This is an example of a warning alert.</p>
</div>

15. Dark Success:

Success

Your data has been saved.

<div class="rounded-md bg-green-900 px-4 py-3 text-center text-white">
  <p class="font-bold">Success</p>
  <p>Your data has been saved.</p>
</div>

16. Dark Warning:

Warning

This is an example of a warning alert.

<div class="rounded-md bg-yellow-900 px-4 py-3 text-center text-white">
  <p class="font-bold">Warning</p>
  <p>This is an example of a warning alert.</p>
</div>