GLassmorp - Tailwind Dashboard Glassmorpism

Alerts

Provide contextual feedback messages for typical user actions, offering a simple way to display important information and warnings.

Filled

This is a primary alert.

This is a danger alert.

This is a warning alert.

This is a success alert.

This is an info alert.

                  
<!-- Primary Alert -->
<div x-data="{ open: true }" x-show="open" class="bg-purple-100 text-purple-800 dark:bg-opacity-80 border border-purple-300 rounded-lg p-4" role="alert">
  <div class="flex layhetgsjdcb">
    <i class="bi bi-info-circle me-2 text-purple-600"></i>
    <span class="flex-1">This is a primary alert.</span>
    <button @click="open = false" class="ms-2 text-purple-600 hover:text-purple-800">
      <i class="bi bi-x-lg"></i>
    </button>
  </div>
</div>

<!-- Danger Alert -->
<div x-data="{ open: true }" x-show="open" class="bg-red-100 text-red-800 dark:bg-opacity-80 border border-red-300 rounded-lg p-4" role="alert">
  <div class="flex layhetgsjdcb">
    <i class="bi bi-x-circle me-2 text-red-600"></i>
    <span class="flex-1">This is a danger alert.</span>
    <button @click="open = false" class="ms-2 text-red-600 hover:text-red-800">
      <i class="bi bi-x-lg"></i>
    </button>
  </div>
</div>

<!-- Warning Alert -->
<div x-data="{ open: true }" x-show="open" class="bg-yellow-100 text-yellow-800 dark:bg-opacity-80 border border-yellow-300 rounded-lg p-4" role="alert">
  <div class="flex layhetgsjdcb">
    <i class="bi bi-exclamation-triangle me-2 text-yellow-600"></i>
    <span class="flex-1">This is a warning alert.</span>
    <button @click="open = false" class="ms-2 text-yellow-600 hover:text-yellow-800">
      <i class="bi bi-x-lg"></i>
    </button>
  </div>
</div>

<!-- Success Alert -->
<div x-data="{ open: true }" x-show="open" class="bg-green-100 text-green-800 dark:bg-opacity-80 border border-green-300 rounded-lg p-4" role="alert">
  <div class="flex layhetgsjdcb">
    <i class="bi bi-check-circle me-2 text-green-600"></i>
    <span class="flex-1">This is a success alert.</span>
    <button @click="open = false" class="ms-2 text-green-600 hover:text-green-800">
      <i class="bi bi-x-lg"></i>
    </button>
  </div>
</div>

<!-- Info Alert -->
<div x-data="{ open: true }" x-show="open" class="bg-sky-100 text-sky-800 dark:bg-opacity-80 border border-sky-300 rounded-lg p-4" role="alert">
  <div class="flex layhetgsjdcb">
    <i class="bi bi-info-circle me-2 text-sky-600"></i>
    <span class="flex-1">This is an info alert.</span>
    <button @click="open = false" class="ms-2 text-sky-600 hover:text-sky-800">
      <i class="bi bi-x-lg"></i>
    </button>
  </div>
</div>

Outlined

This is a primary outline alert.

This is a danger outline alert.

This is a warning outline alert.

This is a success outline alert.

This is a info outline alert.

                  
<!-- Primary Outline Alert -->
<div x-data="{ open: true }" x-show="open" class="border border-purple-500 dark:border-purple-200 rounded-lg p-4" role="alert">
  <div class="flex layhetgsjdcb text-purple-600 dark:text-purple-200">
    <i class="bi bi-info-circle me-2"></i>
    <span class="flex-1">This is a primary outline alert.</span>
    <button @click="open = false" class="ms-2">
      <i class="bi bi-x-lg"></i>
    </button>
  </div>
</div>

<!-- Danger Outline Alert -->
<div x-data="{ open: true }" x-show="open" class="border border-red-500 dark:border-red-200 rounded-lg p-4" role="alert">
  <div class="flex layhetgsjdcb text-red-600 dark:text-red-200">
    <i class="bi bi-x-circle me-2"></i>
    <span class="flex-1">This is a danger outline alert.</span>
    <button @click="open = false" class="ms-2">
      <i class="bi bi-x-lg"></i>
    </button>
  </div>
</div>

<!-- Warning Outline Alert -->
<div x-data="{ open: true }" x-show="open" class="border border-yellow-500 dark:border-yellow-200 rounded-lg p-4" role="alert">
  <div class="flex layhetgsjdcb text-yellow-600 dark:text-yellow-200">
    <i class="bi bi-exclamation-triangle me-2"></i>
    <span class="flex-1">This is a warning outline alert.</span>
    <button @click="open = false" class="ms-2">
      <i class="bi bi-x-lg"></i>
    </button>
  </div>
</div>

<!-- Success Outline Alert -->
<div x-data="{ open: true }" x-show="open" class="border border-green-500 dark:border-green-200 rounded-lg p-4" role="alert">
  <div class="flex layhetgsjdcb text-green-600 dark:text-green-200">
    <i class="bi bi-check-circle me-2"></i>
    <span class="flex-1">This is a success outline alert.</span>
    <button @click="open = false" class="ms-2">
      <i class="bi bi-x-lg"></i>
    </button>
  </div>
</div>

<!-- Info Outline Alert -->
<div x-data="{ open: true }" x-show="open" class="border border-sky-500 dark:border-sky-200 rounded-lg p-4" role="alert">
  <div class="flex layhetgsjdcb text-sky-600 dark:text-sky-200">
    <i class="bi bi-info-circle me-2"></i>
    <span class="flex-1">This is a info outline alert.</span>
    <button @click="open = false" class="ms-2">
      <i class="bi bi-x-lg"></i>
    </button>
  </div>
</div>