Alert

Basic Alerts

Show example code

Awesome simple alert

  HTMLOpenTagdiv class="rounded-md px-5 py-4 mb-2 bg-theme-1 text-white"HTMLCloseTagAwesome simple alertHTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="rounded-md px-5 py-4 mb-2 border text-gray-700 dark:text-gray-300 dark:border-dark-5"HTMLCloseTagAwesome simple alertHTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="rounded-md px-5 py-4 mb-2 bg-theme-9 text-white"HTMLCloseTagAwesome simple alertHTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="rounded-md px-5 py-4 mb-2 bg-theme-12 text-white"HTMLCloseTagAwesome simple alertHTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="rounded-md px-5 py-4 mb-2 bg-theme-6 text-white"HTMLCloseTagAwesome simple alertHTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="rounded-md px-5 py-4 mb-2 bg-gray-200 text-gray-600"HTMLCloseTagAwesome simple alertHTMLOpenTag/divHTMLCloseTag

Icon Alerts

Show example code

Awesome alert with icon

  HTMLOpenTagdiv class="rounded-md flex items-center px-5 py-4 mb-2 bg-theme-1 text-white"HTMLCloseTag HTMLOpenTagi data-feather="alert-circle" class="w-6 h-6 mr-2"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag Awesome alert with icon HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="rounded-md flex items-center px-5 py-4 mb-2 border text-gray-700 dark:text-gray-300 dark:border-dark-5"HTMLCloseTag HTMLOpenTagi data-feather="alert-octagon" class="w-6 h-6 mr-2"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag Awesome alert with icon HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="rounded-md flex items-center px-5 py-4 mb-2 bg-theme-9 text-white"HTMLCloseTag HTMLOpenTagi data-feather="alert-triangle" class="w-6 h-6 mr-2"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag Awesome alert with icon HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="rounded-md flex items-center px-5 py-4 mb-2 bg-theme-12 text-white"HTMLCloseTag HTMLOpenTagi data-feather="alert-circle" class="w-6 h-6 mr-2"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag Awesome alert with icon HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="rounded-md flex items-center px-5 py-4 mb-2 bg-theme-6 text-white"HTMLCloseTag HTMLOpenTagi data-feather="alert-octagon" class="w-6 h-6 mr-2"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag Awesome alert with icon HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="rounded-md flex items-center px-5 py-4 mb-2 bg-gray-200 text-gray-600"HTMLCloseTag HTMLOpenTagi data-feather="alert-triangle" class="w-6 h-6 mr-2"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag Awesome alert with icon HTMLOpenTag/divHTMLCloseTag

Additional Content Alerts

Show example code

Awesome alert with additional info

New

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.

Awesome alert with additional info

New

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.

Awesome alert with additional info

New

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.

Awesome alert with additional info

New

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.

Awesome alert with additional info

New

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.

Awesome alert with additional info

New

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.

  HTMLOpenTagdiv class="rounded-md px-5 py-4 mb-2 bg-theme-1 text-white"HTMLCloseTag HTMLOpenTagdiv class="flex items-center"HTMLCloseTag HTMLOpenTagdiv class="font-medium text-lg"HTMLCloseTagAwesome alert with additional infoHTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="text-xs bg-white px-1 rounded-md text-gray-800 ml-auto"HTMLCloseTagNewHTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="mt-3"HTMLCloseTagLorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="rounded-md px-5 py-4 mb-2 border text-gray-700 dark:text-gray-300 dark:border-dark-5"HTMLCloseTag HTMLOpenTagdiv class="flex items-center"HTMLCloseTag HTMLOpenTagdiv class="font-medium text-lg"HTMLCloseTagAwesome alert with additional infoHTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="text-xs bg-gray-600 px-1 rounded-md text-white ml-auto"HTMLCloseTagNewHTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="mt-3"HTMLCloseTagLorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="rounded-md px-5 py-4 mb-2 bg-theme-9 text-white"HTMLCloseTag HTMLOpenTagdiv class="flex items-center"HTMLCloseTag HTMLOpenTagdiv class="font-medium text-lg"HTMLCloseTagAwesome alert with additional infoHTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="text-xs bg-white px-1 rounded-md text-gray-800 ml-auto"HTMLCloseTagNewHTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="mt-3"HTMLCloseTagLorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="rounded-md px-5 py-4 mb-2 bg-theme-12 text-white"HTMLCloseTag HTMLOpenTagdiv class="flex items-center"HTMLCloseTag HTMLOpenTagdiv class="font-medium text-lg"HTMLCloseTagAwesome alert with additional infoHTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="text-xs bg-white px-1 rounded-md text-gray-800 ml-auto"HTMLCloseTagNewHTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="mt-3"HTMLCloseTagLorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="rounded-md px-5 py-4 mb-2 bg-theme-6 text-white"HTMLCloseTag HTMLOpenTagdiv class="flex items-center"HTMLCloseTag HTMLOpenTagdiv class="font-medium text-lg"HTMLCloseTagAwesome alert with additional infoHTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="text-xs bg-white px-1 rounded-md text-gray-800 ml-auto"HTMLCloseTagNewHTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="mt-3"HTMLCloseTagLorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="rounded-md px-5 py-4 mb-2 bg-gray-200 text-gray-600"HTMLCloseTag HTMLOpenTagdiv class="flex items-center"HTMLCloseTag HTMLOpenTagdiv class="font-medium text-lg"HTMLCloseTagAwesome alert with additional infoHTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="text-xs bg-gray-600 px-1 rounded-md text-white ml-auto"HTMLCloseTagNewHTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="mt-3"HTMLCloseTagLorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag

Icon & Dismiss Alerts

Show example code

Awesome alert with icon

  HTMLOpenTagdiv class="rounded-md flex items-center px-5 py-4 mb-2 bg-theme-1 text-white"HTMLCloseTag HTMLOpenTagi data-feather="alert-circle" class="w-6 h-6 mr-2"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag Awesome alert with icon HTMLOpenTagi data-feather="x" class="w-4 h-4 ml-auto"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="rounded-md flex items-center px-5 py-4 mb-2 border text-gray-700 dark:text-gray-300 dark:border-dark-5"HTMLCloseTag HTMLOpenTagi data-feather="alert-octagon" class="w-6 h-6 mr-2"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag Awesome alert with icon HTMLOpenTagi data-feather="x" class="w-4 h-4 ml-auto"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="rounded-md flex items-center px-5 py-4 mb-2 bg-theme-9 text-white"HTMLCloseTag HTMLOpenTagi data-feather="alert-triangle" class="w-6 h-6 mr-2"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag Awesome alert with icon HTMLOpenTagi data-feather="x" class="w-4 h-4 ml-auto"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="rounded-md flex items-center px-5 py-4 mb-2 bg-theme-12 text-white"HTMLCloseTag HTMLOpenTagi data-feather="alert-circle" class="w-6 h-6 mr-2"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag Awesome alert with icon HTMLOpenTagi data-feather="x" class="w-4 h-4 ml-auto"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="rounded-md flex items-center px-5 py-4 mb-2 bg-theme-6 text-white"HTMLCloseTag HTMLOpenTagi data-feather="alert-octagon" class="w-6 h-6 mr-2"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag Awesome alert with icon HTMLOpenTagi data-feather="x" class="w-4 h-4 ml-auto"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="rounded-md flex items-center px-5 py-4 mb-2 bg-gray-200 text-gray-600"HTMLCloseTag HTMLOpenTagi data-feather="alert-triangle" class="w-6 h-6 mr-2"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag Awesome alert with icon HTMLOpenTagi data-feather="x" class="w-4 h-4 ml-auto"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag HTMLOpenTag/divHTMLCloseTag

Outline Alerts

Show example code

Awesome alert with icon

  HTMLOpenTagdiv class="rounded-md flex items-center px-5 py-4 mb-2 border border-theme-1 text-theme-1 dark:text-theme-10 dark:border-theme-10"HTMLCloseTag HTMLOpenTagi data-feather="alert-circle" class="w-6 h-6 mr-2"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag Awesome alert with icon HTMLOpenTagi data-feather="x" class="w-4 h-4 ml-auto"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="rounded-md flex items-center px-5 py-4 mb-2 border text-gray-700 dark:text-gray-300 dark:border-dark-5"HTMLCloseTag HTMLOpenTagi data-feather="alert-octagon" class="w-6 h-6 mr-2"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag Awesome alert with icon HTMLOpenTagi data-feather="x" class="w-4 h-4 ml-auto"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="rounded-md flex items-center px-5 py-4 mb-2 border border-theme-9 text-theme-9 dark:border-theme-9"HTMLCloseTag HTMLOpenTagi data-feather="alert-triangle" class="w-6 h-6 mr-2"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag Awesome alert with icon HTMLOpenTagi data-feather="x" class="w-4 h-4 ml-auto"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="rounded-md flex items-center px-5 py-4 mb-2 border border-theme-12 text-theme-12 dark:border-theme-12"HTMLCloseTag HTMLOpenTagi data-feather="alert-circle" class="w-6 h-6 mr-2"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag Awesome alert with icon HTMLOpenTagi data-feather="x" class="w-4 h-4 ml-auto"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="rounded-md flex items-center px-5 py-4 mb-2 border border-theme-6 text-theme-6 dark:border-theme-6"HTMLCloseTag HTMLOpenTagi data-feather="alert-octagon" class="w-6 h-6 mr-2"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag Awesome alert with icon HTMLOpenTagi data-feather="x" class="w-4 h-4 ml-auto"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag HTMLOpenTag/divHTMLCloseTag

Soft Color Alerts

Show example code

Awesome alert with icon

  HTMLOpenTagdiv class="rounded-md flex items-center px-5 py-4 mb-2 bg-theme-14 text-theme-10"HTMLCloseTag HTMLOpenTagi data-feather="alert-circle" class="w-6 h-6 mr-2"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag Awesome alert with icon HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="rounded-md flex items-center px-5 py-4 mb-2 border text-gray-700 dark:text-gray-300 dark:border-dark-5"HTMLCloseTag HTMLOpenTagi data-feather="alert-octagon" class="w-6 h-6 mr-2"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag Awesome alert with icon HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="rounded-md flex items-center px-5 py-4 mb-2 bg-theme-18 text-theme-9"HTMLCloseTag HTMLOpenTagi data-feather="alert-triangle" class="w-6 h-6 mr-2"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag Awesome alert with icon HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="rounded-md flex items-center px-5 py-4 mb-2 bg-theme-17 text-theme-11"HTMLCloseTag HTMLOpenTagi data-feather="alert-circle" class="w-6 h-6 mr-2"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag Awesome alert with icon HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="rounded-md flex items-center px-5 py-4 mb-2 bg-theme-31 text-theme-6"HTMLCloseTag HTMLOpenTagi data-feather="alert-octagon" class="w-6 h-6 mr-2"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag Awesome alert with icon HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="rounded-md flex items-center px-5 py-4 mb-2 bg-gray-200 text-gray-600"HTMLCloseTag HTMLOpenTagi data-feather="alert-triangle" class="w-6 h-6 mr-2"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag Awesome alert with icon HTMLOpenTag/divHTMLCloseTag