Tailwind CSS Alert - Nuanxa

The alert component is used to display important messages or contextual feedback. It supports dismiss and show states controlled via data attribute options.

Default Alert

Basic alert component with standard styling.

Info alert

Success alert

Warning alert

Danger alert


<div class="px-3 py-2 rounded-lg border text-sm font-medium bg-blue-100 text-blue-800 border-blue-300 dark:bg-blue-950 dark:text-blue-300 dark:border-blue-700">
  Info alert
</div>
<div class="px-3 py-2 rounded-lg border font-medium text-sm bg-green-100 text-green-800 border-green-300 dark:text-green-300 dark:bg-green-950 dark:border-green-700">
  Success alert
</div>
<div class="px-3 py-2 rounded-lg border font-medium text-sm bg-yellow-100 text-yellow-800 border-yellow-300 dark:text-yellow-300 dark:bg-yellow-950 dark:border-yellow-700">
  Warning alert
</div>
<div class="px-3 py-2 rounded-lg border font-medium text-sm bg-red-100 text-red-800 border-red-300 dark:text-red-300 dark:bg-red-950 dark:border-red-700">
  Danger alert
</div>

Alert With Icon

Alert component enhanced with an icon to provide clearer visual context.

Info alert

Success alert

Warning alert

Danger alert


<div
    class="flex items-center px-3 py-2 rounded-lg border font-medium text-sm bg-blue-100 text-blue-800 border-blue-300 dark:bg-blue-950 dark:text-blue-300 dark:border-blue-700">
    <i class="fas fa-circle-info mr-2 text-blue-600"></i>
    <span>Info alert</span>
</div>
<div
    class="flex items-center px-3 py-2 rounded-lg border font-medium text-sm bg-green-100 text-green-800 border-green-300 dark:text-green-300 dark:bg-green-950 dark:border-green-700">
    <i class="fas fa-circle-check mr-2 text-green-600"></i>
    <span>Success alert</span>
</div>
<div
    class="flex items-center px-3 py-2 rounded-lg border font-medium text-sm bg-yellow-100 text-yellow-800 border-yellow-300 dark:text-yellow-300 dark:bg-yellow-950 dark:border-yellow-700">
    <i class="fas fa-triangle-exclamation mr-2 text-yellow-600"></i>
    <span>Warning alert</span>
</div>
<div
    class="flex items-center px-3 py-2 rounded-lg border font-medium text-sm bg-red-100 text-red-800 border-red-300 dark:text-red-300 dark:bg-red-950 dark:border-red-700">
    <i class="fas fa-circle-xmark mr-2 text-red-600"></i>
    <span>Danger alert</span>
</div>

Alert With Dismissible

Alert component that can be dismissed by the user.

Info alert

Success alert

Warning alert

Danger alert


 <div
     class="alert flex items-center justify-between px-3 py-2 rounded-lg border font-medium text-sm bg-blue-100 text-blue-800 border-blue-300 dark:bg-blue-950 dark:text-blue-300 dark:border-blue-700 transition-all duration-300">
     <div class="flex items-center">
         <i class="fas fa-circle-info mr-2 text-blue-600"></i>
         <span>Info alert</span>
     </div>
     <button type="button" class="alert-close hover:text-blue-600 transition" aria-label="Close alert">
         <i class="fas fa-xmark"></i>
     </button>
 </div>
 <div
     class="alert flex items-center justify-between px-3 py-2 rounded-lg border font-medium text-sm bg-green-100 text-green-800 border-green-300 dark:text-green-300 dark:bg-green-950 dark:border-green-700 transition-all duration-300">
     <div class="flex items-center">
         <i class="fas fa-circle-check mr-2 text-green-600"></i>
         <span>Success alert</span>
     </div>
     <button type="button" class="alert-close hover:text-green-600 transition" aria-label="Close alert">
         <i class="fas fa-xmark"></i>
     </button>
 </div>
 <div
     class="alert flex items-center justify-between px-3 py-2 rounded-lg border font-medium text-sm bg-yellow-100 text-yellow-800 border-yellow-300 dark:text-yellow-300 dark:bg-yellow-950 dark:border-yellow-700 transition-all duration-300">
     <div class="flex items-center">
         <i class="fas fa-triangle-exclamation mr-2 text-yellow-600"></i>
         <span>Warning alert</span>
     </div>
     <button type="button" class="alert-close hover:text-yellow-600 transition" aria-label="Close alert">
         <i class="fas fa-xmark"></i>
     </button>
 </div>
 <div
     class="alert flex items-center justify-between px-3 py-2 rounded-lg border font-medium text-sm bg-red-100 text-red-800 border-red-300 dark:text-red-300 dark:bg-red-950 dark:border-red-700 transition-all duration-300">
     <div class="flex items-center">
         <i class="fas fa-circle-xmark mr-2 text-red-600"></i>
         <span>Danger alert</span>
     </div>
     <button type="button" class="alert-close hover:text-red-600 transition" aria-label="Close alert">
         <i class="fas fa-xmark"></i>
     </button>
 </div>

Transparent Alert

Alert component with transparent background styling.

Info alert

Success alert

Warning alert

Danger alert


 <div
    class="px-3 py-2 rounded-lg border text-sm font-medium bg-transparent text-blue-800 border-blue-300 dark:text-blue-300 dark:border-blue-700">
    Info alert
 </div>
 <div
    class="px-3 py-2 rounded-lg border font-medium text-sm bg-transparent text-green-800 border-green-300 dark:text-green-300 dark:border-green-700">
    Success alert
 </div>
 <div
    class="px-3 py-2 rounded-lg border font-medium text-sm bg-transparent text-yellow-800 border-yellow-300 dark:text-yellow-300 dark:border-yellow-700">
    Warning alert
 </div>
 <div
    class="px-3 py-2 rounded-lg border font-medium text-sm bg-transparent text-red-800 border-red-300 dark:text-red-300 dark:border-red-700">
    Danger alert
 </div>

Transparent Alert With Icon

Transparent alert component combined with an icon for additional context.

Info alert

Success alert

Warning alert

Danger alert


 <div
    class="flex items-center px-3 py-2 rounded-lg border font-medium text-sm bg-transparent text-blue-800 border-blue-300 dark:text-blue-300 dark:border-blue-700">
    <i class="fas fa-circle-info mr-2 text-blue-600"></i>
    <span>Info alert</span>
 </div>
 <div
    class="flex items-center px-3 py-2 rounded-lg border font-medium text-sm bg-transparent text-green-800 border-green-300 dark:text-green-300 dark:border-green-700">
    <i class="fas fa-circle-check mr-2 text-green-600"></i>
    <span>Success alert</span>
 </div>
 <div
    class="flex items-center px-3 py-2 rounded-lg border font-medium text-sm bg-transparent text-yellow-800 border-yellow-300 dark:text-yellow-300 dark:border-yellow-700">
    <i class="fas fa-triangle-exclamation mr-2 text-yellow-600"></i>
    <span>Warning alert</span>
 </div>
 <div
    class="flex items-center px-3 py-2 rounded-lg border font-medium text-sm bg-transparent text-red-800 border-red-300 dark:text-red-300 dark:border-red-700">
    <i class="fas fa-circle-xmark mr-2 text-red-600"></i>
    <span>Danger alert</span>
 </div>

Transparent Alert With Dismissible

Transparent alert component that can be dismissed by the user.

Info alert

Success alert

Warning alert

Danger alert


<div class="alert flex items-center justify-between px-3 py-2 rounded-lg border font-medium text-sm bg-transparent text-blue-800 border-blue-300 dark:text-blue-300 dark:border-blue-700 transition-all duration-300"
    role="alert">
    <div class="flex items-center">
        <i class="fas fa-circle-info mr-2 text-blue-600"></i>
        <span>Info alert</span>
    </div>
    <button type="button" class="alert-close hover:text-blue-600 transition" aria-label="Close alert">
        <i class="fas fa-xmark"></i>
    </button>
</div>
<div class="alert flex items-center justify-between px-3 py-2 rounded-lg border font-medium text-sm bg-transparent text-green-800 border-green-300 dark:text-green-300 dark:border-green-700 transition-all duration-300"
    role="alert">
    <div class="flex items-center">
        <i class="fas fa-circle-check mr-2 text-green-600"></i>
        <span>Success alert</span>
    </div>
    <button type="button" class="alert-close hover:text-green-600 transition" aria-label="Close alert">
        <i class="fas fa-xmark"></i>
    </button>
</div>
<div class="alert flex items-center justify-between px-3 py-2 rounded-lg border font-medium text-sm bg-transparent text-yellow-800 border-yellow-300 dark:text-yellow-300 dark:border-yellow-700 transition-all duration-300"
    role="alert">
    <div class="flex items-center">
        <i class="fas fa-triangle-exclamation mr-2 text-yellow-600"></i>
        <span>Warning alert</span>
    </div>
    <button type="button" class="alert-close hover:text-yellow-600 transition" aria-label="Close alert">
        <i class="fas fa-xmark"></i>
    </button>
</div>
<div class="alert flex items-center justify-between px-3 py-2 rounded-lg border font-medium text-sm bg-transparent text-red-800 border-red-300 dark:text-red-300 dark:border-red-700 transition-all duration-300"
    role="alert">
    <div class="flex items-center gap-2">
        <i class="fas fa-circle-xmark text-red-600"></i>
        <span>Danger alert</span>
    </div>

    <button type="button" class="alert-close hover:text-red-600 transition" aria-label="Close alert">
        <i class="fas fa-xmark"></i>
    </button>
</div>