Alerts
- Ui Elements
- Alerts
Basic Alert
Holy guacamole! You should check in on some of those fields
below.
<div class="alert alert-warning fade show flex" role="alert" id="dismiss-alert1">
<div class="sm:flex-shrink-0">
<strong>Holy guacamole!</strong> You should check in on some of those fields
below.
</div>
<div class="ms-auto">
<div class="mx-1 my-1">
<button type="button"
class="inline-flex rounded-sm focus:outline-none focus:ring-0 focus:ring-offset-0 "
data-hs-remove-element="#dismiss-alert1">
<span class="sr-only">Dismiss</span>
<svg class="h-3 w-3" width="16" height="16" viewBox="0 0 16 16"
fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path
d="M0.92524 0.687069C1.126 0.486219 1.39823 0.373377 1.68209 0.373377C1.96597 0.373377 2.2382 0.486219 2.43894 0.687069L8.10514 6.35813L13.7714 0.687069C13.8701 0.584748 13.9882 0.503105 14.1188 0.446962C14.2494 0.39082 14.3899 0.361248 14.5321 0.360026C14.6742 0.358783 14.8151 0.38589 14.9468 0.439762C15.0782 0.493633 15.1977 0.573197 15.2983 0.673783C15.3987 0.774389 15.4784 0.894026 15.5321 1.02568C15.5859 1.15736 15.6131 1.29845 15.6118 1.44071C15.6105 1.58297 15.5809 1.72357 15.5248 1.85428C15.4688 1.98499 15.3872 2.10324 15.2851 2.20206L9.61883 7.87312L15.2851 13.5441C15.4801 13.7462 15.588 14.0168 15.5854 14.2977C15.5831 14.5787 15.4705 14.8474 15.272 15.046C15.0735 15.2449 14.805 15.3574 14.5244 15.3599C14.2437 15.3623 13.9733 15.2543 13.7714 15.0591L8.10514 9.38812L2.43894 15.0591C2.23704 15.2543 1.96663 15.3623 1.68594 15.3599C1.40526 15.3574 1.13677 15.2449 0.938279 15.046C0.739807 14.8474 0.627232 14.5787 0.624791 14.2977C0.62235 14.0168 0.730236 13.7462 0.92524 13.5441L6.59144 7.87312L0.92524 2.20206C0.724562 2.00115 0.611816 1.72867 0.611816 1.44457C0.611816 1.16047 0.724562 0.887983 0.92524 0.687069Z"
fill="currentColor" />
</svg>
</button>
</div>
</div>
</div>
Default Alert
A new software update is available. See what's new in version 3.0.7
<div class="bg-gray-50 border border-gray-200 dark:bg-light dark:border-defaultborder/10 alert mb-0"
role="alert">
<div class="flex">
<div class="sm:flex-shrink-0">
<svg class="h-4 w-4 text-gray-500 mt-0.5" xmlns="http://www.w3.org/2000/svg"
width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
<path
d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm.93-9.412-1 4.705c-.07.34.029.533.304.533.194 0 .487-.07.686-.246l-.088.416c-.287.346-.92.598-1.465.598-.703 0-1.002-.422-.808-1.319l.738-3.468c.064-.293.006-.399-.287-.47l-.451-.081.082-.381 2.29-.287zM8 5.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2z" />
</svg>
</div>
<div class="flex-1 md:flex md:justify-between ms-2">
<p class="text-sm dark:text-defaulttextcolor/70">
A new software update is available. See what's new in version 3.0.7
</p>
<p class="text-sm mt-3 md:mt-0 md:ms-6">
<a class="dark:text-defaulttextcolor/70 hover:text-gray-500 font-medium whitespace-nowrap"
href="javascript:void(0);">Details</a>
</p>
</div>
</div>
</div>
Bordered Styles Alert
Successfully updated.
You have successfully updated your email preferences.
Error!
Your purchase has been declined.
<div class="space-y-4">
<div class="bg-success/20 border-t-2 border-success rounded-lg p-4 dark:bg-success/20" role="alert">
<div class="flex">
<div class="flex-shrink-0">
<!-- Icon -->
<span class="inline-flex justify-center items-center size-8 rounded-full border-1 border-success bg-success/50 text-teal-800 dark:border-teal-900 dark:bg-teal-800 dark:text-teal-400">
<svg class="flex-shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z"/><path d="m9 12 2 2 4-4"/></svg>
</span>
<!-- End Icon -->
</div>
<div class="ms-3">
<h6> class="text-gray-800 font-semibold dark:text-white">
Successfully updated.
</h6>
<p> class="text-sm text-gray-700 dark:text-gray-400">
You have successfully updated your email preferences.
</p>
</div>
</div>
</div>
<div class="bg-danger/20 border-s-4 border-danger p-4 dark:bg-danger/20" role="alert">
<div class="flex">
<div class="flex-shrink-0">
<!-- Icon -->
<span class="inline-flex justify-center items-center size-8 rounded-full border-1 border-danger bg-danger/40 text-red-800 dark:border-danger dark:bg-danger/20 dark:text-red-400">
<svg class="flex-shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
</span>
<!-- End Icon -->
</div>
<div class="ms-3">
<h6> class="text-gray-800 font-semibold dark:text-white">
Error!
</h6>
<p> class="text-sm text-gray-700 dark:text-gray-400">
Your purchase has been declined.
</p>
</div>
</div>
</div>
</div>
With description Alert
Cannot connect to the database
We are unable to save any progress at this time.
Cannot connect to the database
We are unable to save any progress at this time.
<div class="space-y-3">
<div class="bg-warning/10 border border-warning text-sm text-warning/80 rounded-lg p-4" role="alert">
<div class="flex">
<div class="flex-shrink-0">
<svg class="flex-shrink-0 size-4 mt-0.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z"/><path d="M12 9v4"/><path d="M12 17h.01"/></svg>
</div>
<div class="ms-4">
<h3 class="text-sm font-semibold">
Cannot connect to the database
</h3>
<div class="mt-1 text-sm">
We are unable to save any progress at this time.
</div>
</div>
</div>
</div>
<div class="bg-info/10 border border-info text-sm text-info/80 rounded-lg p-4" role="alert">
<div class="flex">
<div class="flex-shrink-0">
<svg class="flex-shrink-0 size-4 mt-0.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z"/><path d="M12 9v4"/><path d="M12 17h.01"/></svg>
</div>
<div class="ms-4">
<h3 class="text-sm font-semibold">
Cannot connect to the database
</h3>
<div class="mt-1 text-sm">
We are unable to save any progress at this time.
</div>
</div>
</div>
</div>
</div>
Alert With list
A problem has been occurred while submitting your data.
- This username is already in use
- Email field can't be empty
- Please enter a valid phone number
<div class="bg-danger/20 border border-danger/20 text-sm text-danger/80 rounded-lg p-4" role="alert">
<div class="flex">
<div class="flex-shrink-0">
<svg class="flex-shrink-0 size-4 mt-0.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="m15 9-6 6"/><path d="m9 9 6 6"/></svg>
</div>
<div class="ms-4">
<h3 class="text-sm font-semibold">
A problem has been occurred while submitting your data.
</h3>
<div class="mt-2 text-sm text-red-700 dark:text-red-400">
<ul class="list-disc space-y-1 ps-5">
<li>
This username is already in use
</li>
<li>
Email field can't be empty
</li>
<li>
Please enter a valid phone number
</li>
</ul>
</div>
</div>
</div>
</div>
Alert With Actions
YouTube would like you to send notifications
Notifications may include alerts, sounds and icon badges. These can be configured in Settings.
<div class="bg-info/10 border border-info/20 text-info/80 rounded-lg p-4 " role="alert">
<div class="flex">
<div class="flex-shrink-0">
<svg class="flex-shrink-0 size-4 mt-1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>
</div>
<div class="ms-3">
<h6> class="font-semibold">
YouTube would like you to send notifications
</h6>
<div> class="mt-2 text-sm text-gray-600 dark:text-gray-400">
Notifications may include alerts, sounds and icon badges. These can be configured in Settings.
</div>
<div class="mt-4">
<div class="flex space-x-3">
<button> type="button" class="inline-flex items-center gap-x-2 text-sm font-semibold rounded-lg border border-transparent text-blue-600 hover:text-blue-800 disabled:opacity-50 disabled:pointer-events-none dark:text-blue-500 dark:hover:text-blue-400 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600">
Don't allow
</button>
<button> type="button" class="inline-flex items-center gap-x-2 text-sm font-semibold rounded-lg border border-transparent text-blue-600 hover:text-blue-800 disabled:opacity-50 disabled:pointer-events-none dark:text-blue-500 dark:hover:text-blue-400 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600">
Allow
</button>
</div>
</div>
</div>
</div>
</div>
Link on right Alert
A new software update is available. See what's new in version 3.0.7
<div class="bg-gray-50 border border-gray-200 text-sm text-gray-600 rounded-lg p-4 dark:bg-white/[.05] dark:border-white/10 dark:text-gray-400" role="alert">
<div class="flex">
<div class="flex-shrink-0">
<svg class="flex-shrink-0 size-4 mt-0.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>
</div>
<div class="flex-1 md:flex md:justify-between ms-2">
<p> class="text-sm">
A new software update is available. See what's new in version 3.0.7
</p>
<p class="text-sm mt-3 md:mt-0 md:ms-6">
<a> class="text-gray-800 hover:text-gray-500 font-medium whitespace-nowrap dark:text-gray-200 dark:hover:text-gray-400 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600" href="#">Details</a>
</p>
</div>
</div>
</div>
Discovery Alert
New version published
Chris Lynch published a new version of this page. Refresh to see the changes.
<div class="bg-white border border-gray-200 rounded-lg shadow-lg p-4 dark:bg-bodybg dark:border-white/10" role="alert">
<div class="flex">
<div class="flex-shrink-0">
<svg class="flex-shrink-0 size-4 text-blue-600 mt-1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>
</div>
<div class="ms-3">
<h6 class="text-gray-800 font-semibold dark:text-white">
New version published
</h6>
<p class="mt-0 text-sm text-gray-700 dark:text-gray-400">
Chris Lynch published a new version of this page. Refresh to see the changes.
</p>
</div>
</div>
</div>
Default alerts
A simple primary alert—check it out!
A simple secondary alert—check it out!
A simple success alert—check it out!
A simple danger alert—check it out!
A simple warning alert—check it out!
A simple info alert—check it out!
A simple light alert—check it out!
A simple dark alert—check it out!
<div class="alert alert-primary" role="alert">
A simple primary alert—check it out!
</div>
<div class="alert alert-secondary" role="alert">
A simple secondary alert—check it out!
</div>
<div class="alert alert-success !border-success/10" role="alert">
A simple success alert—check it out!
</div>
<div class="alert alert-danger" role="alert">
A simple danger alert—check it out!
</div>
<div class="alert alert-warning" role="alert">
A simple warning alert—check it out!
</div>
<div class="alert alert-info" role="alert">
A simple info alert—check it out!
</div>
<div class="alert alert-light" role="alert">
A simple light alert—check it out!
</div>
<div class="alert alert-dark" role="alert">
A simple dark alert—check it out!
</div>
Links in alerts
A simple primary alert with an example
link.
Give it a click if you like.
A simple secondary alert with an example
link. Give it a click if you like.
A simple success alert with an example
link.
Give it a click if you like.
A simple danger alert with an example
link.
Give it a click if you like.
A simple warning alert with an example
link.
Give it a click if you like.
A simple info alert with an example link.
Give it a click if you like.
A simple light alert with an example
link.
Give it a click if you like.
A simple dark alert with an example link.
Give it a click if you like.
<div class="alert alert-primary" role="alert">
A simple primary alert with <a href="javascript:void(0);" class="alert-link">an example
link</a>.
Give it a click if you like.
</div>
<div class="alert alert-secondary" role="alert">
A simple secondary alert with <a href="javascript:void(0);" class="alert-link">an example
link</a>. Give it a click if you like.
</div>
<div class="alert alert-success !border-success/10" role="alert">
A simple success alert with <a href="javascript:void(0);" class="alert-link">an example
link</a>.
Give it a click if you like.
</div>
<div class="alert alert-danger" role="alert">
A simple danger alert with <a href="javascript:void(0);" class="alert-link">an example
link</a>.
Give it a click if you like.
</div>
<div class="alert alert-warning" role="alert">
A simple warning alert with <a href="javascript:void(0);" class="alert-link">an example
link</a>.
Give it a click if you like.
</div>
<div class="alert alert-info" role="alert">
A simple info alert with <a href="javascript:void(0);" class="alert-link">an example link</a>.
Give it a click if you like.
</div>
<div class="alert alert-light" role="alert">
A simple light alert with <a href="javascript:void(0);" class="alert-link">an example
link</a>.
Give it a click if you like.
</div>
<div class="alert alert-dark" role="alert">
A simple dark alert with <a href="javascript:void(0);"
class="alert-link dark:text-defaulttextcolor/70">an example link</a>.
Give it a click if you like.
</div>
Solid Colored Alerts
A simple solid primary alert—check it out!
A simple solid secondary alert—check it out!
A simple solid info alert—check it out!
A simple solid warning alert—check it out!
A simple solid success alert—check it out!
A simple solid danger alert—check it out!
A simple solid light alert—check it out!
A simple solid dark alert—check it out!
<div class="alert alert-solid-primary alert-dismissible fade show flex" role="alert"
id="dismiss-alert2">
<div class="sm:flex-shrink-0">
A simple solid primary alert—check it out!
</div>
<div class="ms-auto">
<div class="mx-1 my-1">
<button type="button"
class="inline-flex rounded-sm focus:outline-none focus:ring-0 focus:ring-offset-0 "
data-hs-remove-element="#dismiss-alert2">
<span class="sr-only">Dismiss</span>
<svg class="h-3 w-3" width="16" height="16" viewBox="0 0 16 16"
fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path
d="M0.92524 0.687069C1.126 0.486219 1.39823 0.373377 1.68209 0.373377C1.96597 0.373377 2.2382 0.486219 2.43894 0.687069L8.10514 6.35813L13.7714 0.687069C13.8701 0.584748 13.9882 0.503105 14.1188 0.446962C14.2494 0.39082 14.3899 0.361248 14.5321 0.360026C14.6742 0.358783 14.8151 0.38589 14.9468 0.439762C15.0782 0.493633 15.1977 0.573197 15.2983 0.673783C15.3987 0.774389 15.4784 0.894026 15.5321 1.02568C15.5859 1.15736 15.6131 1.29845 15.6118 1.44071C15.6105 1.58297 15.5809 1.72357 15.5248 1.85428C15.4688 1.98499 15.3872 2.10324 15.2851 2.20206L9.61883 7.87312L15.2851 13.5441C15.4801 13.7462 15.588 14.0168 15.5854 14.2977C15.5831 14.5787 15.4705 14.8474 15.272 15.046C15.0735 15.2449 14.805 15.3574 14.5244 15.3599C14.2437 15.3623 13.9733 15.2543 13.7714 15.0591L8.10514 9.38812L2.43894 15.0591C2.23704 15.2543 1.96663 15.3623 1.68594 15.3599C1.40526 15.3574 1.13677 15.2449 0.938279 15.046C0.739807 14.8474 0.627232 14.5787 0.624791 14.2977C0.62235 14.0168 0.730236 13.7462 0.92524 13.5441L6.59144 7.87312L0.92524 2.20206C0.724562 2.00115 0.611816 1.72867 0.611816 1.44457C0.611816 1.16047 0.724562 0.887983 0.92524 0.687069Z"
fill="currentColor" />
</svg>
</button>
</div>
</div>
</div>
<div class="alert alert-solid-secondary alert-dismissible fade show flex" role="alert"
id="dismiss-alert3">
<div class="sm:flex-shrink-0">
A simple solid secondary alert—check it out!
</div>
<div class="ms-auto">
<div class="mx-1 my-1">
<button type="button"
class="inline-flex rounded-sm focus:outline-none focus:ring-0 focus:ring-offset-0 "
data-hs-remove-element="#dismiss-alert3">
<span class="sr-only">Dismiss</span>
<svg class="h-3 w-3" width="16" height="16" viewBox="0 0 16 16"
fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path
d="M0.92524 0.687069C1.126 0.486219 1.39823 0.373377 1.68209 0.373377C1.96597 0.373377 2.2382 0.486219 2.43894 0.687069L8.10514 6.35813L13.7714 0.687069C13.8701 0.584748 13.9882 0.503105 14.1188 0.446962C14.2494 0.39082 14.3899 0.361248 14.5321 0.360026C14.6742 0.358783 14.8151 0.38589 14.9468 0.439762C15.0782 0.493633 15.1977 0.573197 15.2983 0.673783C15.3987 0.774389 15.4784 0.894026 15.5321 1.02568C15.5859 1.15736 15.6131 1.29845 15.6118 1.44071C15.6105 1.58297 15.5809 1.72357 15.5248 1.85428C15.4688 1.98499 15.3872 2.10324 15.2851 2.20206L9.61883 7.87312L15.2851 13.5441C15.4801 13.7462 15.588 14.0168 15.5854 14.2977C15.5831 14.5787 15.4705 14.8474 15.272 15.046C15.0735 15.2449 14.805 15.3574 14.5244 15.3599C14.2437 15.3623 13.9733 15.2543 13.7714 15.0591L8.10514 9.38812L2.43894 15.0591C2.23704 15.2543 1.96663 15.3623 1.68594 15.3599C1.40526 15.3574 1.13677 15.2449 0.938279 15.046C0.739807 14.8474 0.627232 14.5787 0.624791 14.2977C0.62235 14.0168 0.730236 13.7462 0.92524 13.5441L6.59144 7.87312L0.92524 2.20206C0.724562 2.00115 0.611816 1.72867 0.611816 1.44457C0.611816 1.16047 0.724562 0.887983 0.92524 0.687069Z"
fill="currentColor" />
</svg>
</button>
</div>
</div>
</div>
<div class="alert alert-solid-info alert-dismissible fade show flex" role="alert"
id="dismiss-alert4">
<div class="sm:flex-shrink-0">
A simple solid info alert—check it out!
</div>
<div class="ms-auto">
<div class="mx-1 my-1">
<button type="button"
class="inline-flex rounded-sm focus:outline-none focus:ring-0 focus:ring-offset-0 "
data-hs-remove-element="#dismiss-alert4">
<span class="sr-only">Dismiss</span>
<svg class="h-3 w-3" width="16" height="16" viewBox="0 0 16 16"
fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path
d="M0.92524 0.687069C1.126 0.486219 1.39823 0.373377 1.68209 0.373377C1.96597 0.373377 2.2382 0.486219 2.43894 0.687069L8.10514 6.35813L13.7714 0.687069C13.8701 0.584748 13.9882 0.503105 14.1188 0.446962C14.2494 0.39082 14.3899 0.361248 14.5321 0.360026C14.6742 0.358783 14.8151 0.38589 14.9468 0.439762C15.0782 0.493633 15.1977 0.573197 15.2983 0.673783C15.3987 0.774389 15.4784 0.894026 15.5321 1.02568C15.5859 1.15736 15.6131 1.29845 15.6118 1.44071C15.6105 1.58297 15.5809 1.72357 15.5248 1.85428C15.4688 1.98499 15.3872 2.10324 15.2851 2.20206L9.61883 7.87312L15.2851 13.5441C15.4801 13.7462 15.588 14.0168 15.5854 14.2977C15.5831 14.5787 15.4705 14.8474 15.272 15.046C15.0735 15.2449 14.805 15.3574 14.5244 15.3599C14.2437 15.3623 13.9733 15.2543 13.7714 15.0591L8.10514 9.38812L2.43894 15.0591C2.23704 15.2543 1.96663 15.3623 1.68594 15.3599C1.40526 15.3574 1.13677 15.2449 0.938279 15.046C0.739807 14.8474 0.627232 14.5787 0.624791 14.2977C0.62235 14.0168 0.730236 13.7462 0.92524 13.5441L6.59144 7.87312L0.92524 2.20206C0.724562 2.00115 0.611816 1.72867 0.611816 1.44457C0.611816 1.16047 0.724562 0.887983 0.92524 0.687069Z"
fill="currentColor" />
</svg>
</button>
</div>
</div>
</div>
<div class="alert alert-solid-warning alert-dismissible fade show flex" role="alert"
id="dismiss-alert5">
<div class="sm:flex-shrink-0">
A simple solid warning alert—check it out!
</div>
<div class="ms-auto">
<div class="mx-1 my-1">
<button type="button"
class="inline-flex rounded-sm focus:outline-none focus:ring-0 focus:ring-offset-0 "
data-hs-remove-element="#dismiss-alert5">
<span class="sr-only">Dismiss</span>
<svg class="h-3 w-3" width="16" height="16" viewBox="0 0 16 16"
fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path
d="M0.92524 0.687069C1.126 0.486219 1.39823 0.373377 1.68209 0.373377C1.96597 0.373377 2.2382 0.486219 2.43894 0.687069L8.10514 6.35813L13.7714 0.687069C13.8701 0.584748 13.9882 0.503105 14.1188 0.446962C14.2494 0.39082 14.3899 0.361248 14.5321 0.360026C14.6742 0.358783 14.8151 0.38589 14.9468 0.439762C15.0782 0.493633 15.1977 0.573197 15.2983 0.673783C15.3987 0.774389 15.4784 0.894026 15.5321 1.02568C15.5859 1.15736 15.6131 1.29845 15.6118 1.44071C15.6105 1.58297 15.5809 1.72357 15.5248 1.85428C15.4688 1.98499 15.3872 2.10324 15.2851 2.20206L9.61883 7.87312L15.2851 13.5441C15.4801 13.7462 15.588 14.0168 15.5854 14.2977C15.5831 14.5787 15.4705 14.8474 15.272 15.046C15.0735 15.2449 14.805 15.3574 14.5244 15.3599C14.2437 15.3623 13.9733 15.2543 13.7714 15.0591L8.10514 9.38812L2.43894 15.0591C2.23704 15.2543 1.96663 15.3623 1.68594 15.3599C1.40526 15.3574 1.13677 15.2449 0.938279 15.046C0.739807 14.8474 0.627232 14.5787 0.624791 14.2977C0.62235 14.0168 0.730236 13.7462 0.92524 13.5441L6.59144 7.87312L0.92524 2.20206C0.724562 2.00115 0.611816 1.72867 0.611816 1.44457C0.611816 1.16047 0.724562 0.887983 0.92524 0.687069Z"
fill="currentColor" />
</svg>
</button>
</div>
</div>
</div>
<div class="alert alert-solid-success alert-dismissible fade show flex" role="alert"
id="dismiss-alert6">
<div class="sm:flex-shrink-0">
A simple solid success alert—check it out!
</div>
<div class="ms-auto">
<div class="mx-1 my-1">
<button type="button"
class="inline-flex rounded-sm focus:outline-none focus:ring-0 focus:ring-offset-0 "
data-hs-remove-element="#dismiss-alert6">
<span class="sr-only">Dismiss</span>
<svg class="h-3 w-3" width="16" height="16" viewBox="0 0 16 16"
fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path
d="M0.92524 0.687069C1.126 0.486219 1.39823 0.373377 1.68209 0.373377C1.96597 0.373377 2.2382 0.486219 2.43894 0.687069L8.10514 6.35813L13.7714 0.687069C13.8701 0.584748 13.9882 0.503105 14.1188 0.446962C14.2494 0.39082 14.3899 0.361248 14.5321 0.360026C14.6742 0.358783 14.8151 0.38589 14.9468 0.439762C15.0782 0.493633 15.1977 0.573197 15.2983 0.673783C15.3987 0.774389 15.4784 0.894026 15.5321 1.02568C15.5859 1.15736 15.6131 1.29845 15.6118 1.44071C15.6105 1.58297 15.5809 1.72357 15.5248 1.85428C15.4688 1.98499 15.3872 2.10324 15.2851 2.20206L9.61883 7.87312L15.2851 13.5441C15.4801 13.7462 15.588 14.0168 15.5854 14.2977C15.5831 14.5787 15.4705 14.8474 15.272 15.046C15.0735 15.2449 14.805 15.3574 14.5244 15.3599C14.2437 15.3623 13.9733 15.2543 13.7714 15.0591L8.10514 9.38812L2.43894 15.0591C2.23704 15.2543 1.96663 15.3623 1.68594 15.3599C1.40526 15.3574 1.13677 15.2449 0.938279 15.046C0.739807 14.8474 0.627232 14.5787 0.624791 14.2977C0.62235 14.0168 0.730236 13.7462 0.92524 13.5441L6.59144 7.87312L0.92524 2.20206C0.724562 2.00115 0.611816 1.72867 0.611816 1.44457C0.611816 1.16047 0.724562 0.887983 0.92524 0.687069Z"
fill="currentColor" />
</svg>
</button>
</div>
</div>
</div>
<div class="alert alert-solid-danger alert-dismissible fade show flex" role="alert"
id="dismiss-alert7">
<div class="sm:flex-shrink-0">
A simple solid danger alert—check it out!
</div>
<div class="ms-auto">
<div class="mx-1 my-1">
<button type="button"
class="inline-flex rounded-sm focus:outline-none focus:ring-0 focus:ring-offset-0 "
data-hs-remove-element="#dismiss-alert7">
<span class="sr-only">Dismiss</span>
<svg class="h-3 w-3" width="16" height="16" viewBox="0 0 16 16"
fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path
d="M0.92524 0.687069C1.126 0.486219 1.39823 0.373377 1.68209 0.373377C1.96597 0.373377 2.2382 0.486219 2.43894 0.687069L8.10514 6.35813L13.7714 0.687069C13.8701 0.584748 13.9882 0.503105 14.1188 0.446962C14.2494 0.39082 14.3899 0.361248 14.5321 0.360026C14.6742 0.358783 14.8151 0.38589 14.9468 0.439762C15.0782 0.493633 15.1977 0.573197 15.2983 0.673783C15.3987 0.774389 15.4784 0.894026 15.5321 1.02568C15.5859 1.15736 15.6131 1.29845 15.6118 1.44071C15.6105 1.58297 15.5809 1.72357 15.5248 1.85428C15.4688 1.98499 15.3872 2.10324 15.2851 2.20206L9.61883 7.87312L15.2851 13.5441C15.4801 13.7462 15.588 14.0168 15.5854 14.2977C15.5831 14.5787 15.4705 14.8474 15.272 15.046C15.0735 15.2449 14.805 15.3574 14.5244 15.3599C14.2437 15.3623 13.9733 15.2543 13.7714 15.0591L8.10514 9.38812L2.43894 15.0591C2.23704 15.2543 1.96663 15.3623 1.68594 15.3599C1.40526 15.3574 1.13677 15.2449 0.938279 15.046C0.739807 14.8474 0.627232 14.5787 0.624791 14.2977C0.62235 14.0168 0.730236 13.7462 0.92524 13.5441L6.59144 7.87312L0.92524 2.20206C0.724562 2.00115 0.611816 1.72867 0.611816 1.44457C0.611816 1.16047 0.724562 0.887983 0.92524 0.687069Z"
fill="currentColor" />
</svg>
</button>
</div>
</div>
</div>
<div class="alert alert-solid-light alert-dismissible fade show flex" role="alert"
id="dismiss-alert8">
<div class="sm:flex-shrink-0">
A simple solid light alert—check it out!
</div>
<div class="ms-auto">
<div class="mx-1 my-1">
<button type="button"
class="inline-flex rounded-sm focus:outline-none focus:ring-0 focus:ring-offset-0 "
data-hs-remove-element="#dismiss-alert8">
<span class="sr-only">Dismiss</span>
<svg class="h-3 w-3" width="16" height="16" viewBox="0 0 16 16"
fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path
d="M0.92524 0.687069C1.126 0.486219 1.39823 0.373377 1.68209 0.373377C1.96597 0.373377 2.2382 0.486219 2.43894 0.687069L8.10514 6.35813L13.7714 0.687069C13.8701 0.584748 13.9882 0.503105 14.1188 0.446962C14.2494 0.39082 14.3899 0.361248 14.5321 0.360026C14.6742 0.358783 14.8151 0.38589 14.9468 0.439762C15.0782 0.493633 15.1977 0.573197 15.2983 0.673783C15.3987 0.774389 15.4784 0.894026 15.5321 1.02568C15.5859 1.15736 15.6131 1.29845 15.6118 1.44071C15.6105 1.58297 15.5809 1.72357 15.5248 1.85428C15.4688 1.98499 15.3872 2.10324 15.2851 2.20206L9.61883 7.87312L15.2851 13.5441C15.4801 13.7462 15.588 14.0168 15.5854 14.2977C15.5831 14.5787 15.4705 14.8474 15.272 15.046C15.0735 15.2449 14.805 15.3574 14.5244 15.3599C14.2437 15.3623 13.9733 15.2543 13.7714 15.0591L8.10514 9.38812L2.43894 15.0591C2.23704 15.2543 1.96663 15.3623 1.68594 15.3599C1.40526 15.3574 1.13677 15.2449 0.938279 15.046C0.739807 14.8474 0.627232 14.5787 0.624791 14.2977C0.62235 14.0168 0.730236 13.7462 0.92524 13.5441L6.59144 7.87312L0.92524 2.20206C0.724562 2.00115 0.611816 1.72867 0.611816 1.44457C0.611816 1.16047 0.724562 0.887983 0.92524 0.687069Z"
fill="currentColor" />
</svg>
</button>
</div>
</div>
</div>
<div class="alert alert-solid-dark alert-dismissible fade show flex" role="alert"
id="dismiss-alert9">
<div class="sm:flex-shrink-0">
A simple solid dark alert—check it out!
</div>
<div class="ms-auto">
<div class="mx-1 my-1">
<button type="button"
class="inline-flex rounded-sm focus:outline-none focus:ring-0 focus:ring-offset-0 "
data-hs-remove-element="#dismiss-alert9">
<span class="sr-only">Dismiss</span>
<svg class="h-3 w-3" width="16" height="16" viewBox="0 0 16 16"
fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path
d="M0.92524 0.687069C1.126 0.486219 1.39823 0.373377 1.68209 0.373377C1.96597 0.373377 2.2382 0.486219 2.43894 0.687069L8.10514 6.35813L13.7714 0.687069C13.8701 0.584748 13.9882 0.503105 14.1188 0.446962C14.2494 0.39082 14.3899 0.361248 14.5321 0.360026C14.6742 0.358783 14.8151 0.38589 14.9468 0.439762C15.0782 0.493633 15.1977 0.573197 15.2983 0.673783C15.3987 0.774389 15.4784 0.894026 15.5321 1.02568C15.5859 1.15736 15.6131 1.29845 15.6118 1.44071C15.6105 1.58297 15.5809 1.72357 15.5248 1.85428C15.4688 1.98499 15.3872 2.10324 15.2851 2.20206L9.61883 7.87312L15.2851 13.5441C15.4801 13.7462 15.588 14.0168 15.5854 14.2977C15.5831 14.5787 15.4705 14.8474 15.272 15.046C15.0735 15.2449 14.805 15.3574 14.5244 15.3599C14.2437 15.3623 13.9733 15.2543 13.7714 15.0591L8.10514 9.38812L2.43894 15.0591C2.23704 15.2543 1.96663 15.3623 1.68594 15.3599C1.40526 15.3574 1.13677 15.2449 0.938279 15.046C0.739807 14.8474 0.627232 14.5787 0.624791 14.2977C0.62235 14.0168 0.730236 13.7462 0.92524 13.5441L6.59144 7.87312L0.92524 2.20206C0.724562 2.00115 0.611816 1.72867 0.611816 1.44457C0.611816 1.16047 0.724562 0.887983 0.92524 0.687069Z"
fill="currentColor" />
</svg>
</button>
</div>
</div>
</div>
Outline Alerts
A simple outline primary alert—check it out!
A simple outline secondary alert—check it out!
A simple outline info alert—check it out!
A simple outline warning alert—check it out!
A simple outline success alert—check it out!
A simple outline danger alert—check it out!
A simple outline light alert—check it out!
A simple outline dark alert—check it out!
<div class="alert alert-outline-primary alert-dismissible fade show flex" role="alert"
id="dismiss-alert10">
<div class="sm:flex-shrink-0">
A simple outline primary alert—check it out!
</div>
<div class="ms-auto">
<div class="mx-1 my-1">
<button type="button"
class="inline-flex rounded-sm focus:outline-none focus:ring-0 focus:ring-offset-0 "
data-hs-remove-element="#dismiss-alert10">
<span class="sr-only">Dismiss</span>
<svg class="h-3 w-3" width="16" height="16" viewBox="0 0 16 16"
fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path
d="M0.92524 0.687069C1.126 0.486219 1.39823 0.373377 1.68209 0.373377C1.96597 0.373377 2.2382 0.486219 2.43894 0.687069L8.10514 6.35813L13.7714 0.687069C13.8701 0.584748 13.9882 0.503105 14.1188 0.446962C14.2494 0.39082 14.3899 0.361248 14.5321 0.360026C14.6742 0.358783 14.8151 0.38589 14.9468 0.439762C15.0782 0.493633 15.1977 0.573197 15.2983 0.673783C15.3987 0.774389 15.4784 0.894026 15.5321 1.02568C15.5859 1.15736 15.6131 1.29845 15.6118 1.44071C15.6105 1.58297 15.5809 1.72357 15.5248 1.85428C15.4688 1.98499 15.3872 2.10324 15.2851 2.20206L9.61883 7.87312L15.2851 13.5441C15.4801 13.7462 15.588 14.0168 15.5854 14.2977C15.5831 14.5787 15.4705 14.8474 15.272 15.046C15.0735 15.2449 14.805 15.3574 14.5244 15.3599C14.2437 15.3623 13.9733 15.2543 13.7714 15.0591L8.10514 9.38812L2.43894 15.0591C2.23704 15.2543 1.96663 15.3623 1.68594 15.3599C1.40526 15.3574 1.13677 15.2449 0.938279 15.046C0.739807 14.8474 0.627232 14.5787 0.624791 14.2977C0.62235 14.0168 0.730236 13.7462 0.92524 13.5441L6.59144 7.87312L0.92524 2.20206C0.724562 2.00115 0.611816 1.72867 0.611816 1.44457C0.611816 1.16047 0.724562 0.887983 0.92524 0.687069Z"
fill="currentColor" />
</svg>
</button>
</div>
</div>
</div>
<div class="alert alert-outline-secondary alert-dismissible fade show flex" role="alert"
id="dismiss-alert11">
<div class="sm:flex-shrink-0">
A simple outline secondary alert—check it out!
</div>
<div class="ms-auto">
<div class="mx-1 my-1">
<button type="button"
class="inline-flex rounded-sm focus:outline-none focus:ring-0 focus:ring-offset-0 "
data-hs-remove-element="#dismiss-alert11">
<span class="sr-only">Dismiss</span>
<svg class="h-3 w-3" width="16" height="16" viewBox="0 0 16 16"
fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path
d="M0.92524 0.687069C1.126 0.486219 1.39823 0.373377 1.68209 0.373377C1.96597 0.373377 2.2382 0.486219 2.43894 0.687069L8.10514 6.35813L13.7714 0.687069C13.8701 0.584748 13.9882 0.503105 14.1188 0.446962C14.2494 0.39082 14.3899 0.361248 14.5321 0.360026C14.6742 0.358783 14.8151 0.38589 14.9468 0.439762C15.0782 0.493633 15.1977 0.573197 15.2983 0.673783C15.3987 0.774389 15.4784 0.894026 15.5321 1.02568C15.5859 1.15736 15.6131 1.29845 15.6118 1.44071C15.6105 1.58297 15.5809 1.72357 15.5248 1.85428C15.4688 1.98499 15.3872 2.10324 15.2851 2.20206L9.61883 7.87312L15.2851 13.5441C15.4801 13.7462 15.588 14.0168 15.5854 14.2977C15.5831 14.5787 15.4705 14.8474 15.272 15.046C15.0735 15.2449 14.805 15.3574 14.5244 15.3599C14.2437 15.3623 13.9733 15.2543 13.7714 15.0591L8.10514 9.38812L2.43894 15.0591C2.23704 15.2543 1.96663 15.3623 1.68594 15.3599C1.40526 15.3574 1.13677 15.2449 0.938279 15.046C0.739807 14.8474 0.627232 14.5787 0.624791 14.2977C0.62235 14.0168 0.730236 13.7462 0.92524 13.5441L6.59144 7.87312L0.92524 2.20206C0.724562 2.00115 0.611816 1.72867 0.611816 1.44457C0.611816 1.16047 0.724562 0.887983 0.92524 0.687069Z"
fill="currentColor" />
</svg>
</button>
</div>
</div>
</div>
<div class="alert alert-outline-info alert-dismissible fade show flex" role="alert"
id="dismiss-alert12">
<div class="sm:flex-shrink-0">
A simple outline info alert—check it out!
</div>
<div class="ms-auto">
<div class="mx-1 my-1">
<button type="button"
class="inline-flex rounded-sm focus:outline-none focus:ring-0 focus:ring-offset-0 "
data-hs-remove-element="#dismiss-alert12">
<span class="sr-only">Dismiss</span>
<svg class="h-3 w-3" width="16" height="16" viewBox="0 0 16 16"
fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path
d="M0.92524 0.687069C1.126 0.486219 1.39823 0.373377 1.68209 0.373377C1.96597 0.373377 2.2382 0.486219 2.43894 0.687069L8.10514 6.35813L13.7714 0.687069C13.8701 0.584748 13.9882 0.503105 14.1188 0.446962C14.2494 0.39082 14.3899 0.361248 14.5321 0.360026C14.6742 0.358783 14.8151 0.38589 14.9468 0.439762C15.0782 0.493633 15.1977 0.573197 15.2983 0.673783C15.3987 0.774389 15.4784 0.894026 15.5321 1.02568C15.5859 1.15736 15.6131 1.29845 15.6118 1.44071C15.6105 1.58297 15.5809 1.72357 15.5248 1.85428C15.4688 1.98499 15.3872 2.10324 15.2851 2.20206L9.61883 7.87312L15.2851 13.5441C15.4801 13.7462 15.588 14.0168 15.5854 14.2977C15.5831 14.5787 15.4705 14.8474 15.272 15.046C15.0735 15.2449 14.805 15.3574 14.5244 15.3599C14.2437 15.3623 13.9733 15.2543 13.7714 15.0591L8.10514 9.38812L2.43894 15.0591C2.23704 15.2543 1.96663 15.3623 1.68594 15.3599C1.40526 15.3574 1.13677 15.2449 0.938279 15.046C0.739807 14.8474 0.627232 14.5787 0.624791 14.2977C0.62235 14.0168 0.730236 13.7462 0.92524 13.5441L6.59144 7.87312L0.92524 2.20206C0.724562 2.00115 0.611816 1.72867 0.611816 1.44457C0.611816 1.16047 0.724562 0.887983 0.92524 0.687069Z"
fill="currentColor" />
</svg>
</button>
</div>
</div>
</div>
<div class="alert alert-outline-warning alert-dismissible fade show flex" role="alert"
id="dismiss-alert13">
<div class="sm:flex-shrink-0">
A simple outline warning alert—check it out!
</div>
<div class="ms-auto">
<div class="mx-1 my-1">
<button type="button"
class="inline-flex rounded-sm focus:outline-none focus:ring-0 focus:ring-offset-0 "
data-hs-remove-element="#dismiss-alert13">
<span class="sr-only">Dismiss</span>
<svg class="h-3 w-3" width="16" height="16" viewBox="0 0 16 16"
fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path
d="M0.92524 0.687069C1.126 0.486219 1.39823 0.373377 1.68209 0.373377C1.96597 0.373377 2.2382 0.486219 2.43894 0.687069L8.10514 6.35813L13.7714 0.687069C13.8701 0.584748 13.9882 0.503105 14.1188 0.446962C14.2494 0.39082 14.3899 0.361248 14.5321 0.360026C14.6742 0.358783 14.8151 0.38589 14.9468 0.439762C15.0782 0.493633 15.1977 0.573197 15.2983 0.673783C15.3987 0.774389 15.4784 0.894026 15.5321 1.02568C15.5859 1.15736 15.6131 1.29845 15.6118 1.44071C15.6105 1.58297 15.5809 1.72357 15.5248 1.85428C15.4688 1.98499 15.3872 2.10324 15.2851 2.20206L9.61883 7.87312L15.2851 13.5441C15.4801 13.7462 15.588 14.0168 15.5854 14.2977C15.5831 14.5787 15.4705 14.8474 15.272 15.046C15.0735 15.2449 14.805 15.3574 14.5244 15.3599C14.2437 15.3623 13.9733 15.2543 13.7714 15.0591L8.10514 9.38812L2.43894 15.0591C2.23704 15.2543 1.96663 15.3623 1.68594 15.3599C1.40526 15.3574 1.13677 15.2449 0.938279 15.046C0.739807 14.8474 0.627232 14.5787 0.624791 14.2977C0.62235 14.0168 0.730236 13.7462 0.92524 13.5441L6.59144 7.87312L0.92524 2.20206C0.724562 2.00115 0.611816 1.72867 0.611816 1.44457C0.611816 1.16047 0.724562 0.887983 0.92524 0.687069Z"
fill="currentColor" />
</svg>
</button>
</div>
</div>
</div>
<div class="alert alert-outline-success alert-dismissible fade show flex" role="alert"
id="dismiss-alert14">
<div class="sm:flex-shrink-0">
A simple outline success alert—check it out!
</div>
<div class="ms-auto">
<div class="mx-1 my-1">
<button type="button"
class="inline-flex rounded-sm focus:outline-none focus:ring-0 focus:ring-offset-0 "
data-hs-remove-element="#dismiss-alert14">
<span class="sr-only">Dismiss</span>
<svg class="h-3 w-3" width="16" height="16" viewBox="0 0 16 16"
fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path
d="M0.92524 0.687069C1.126 0.486219 1.39823 0.373377 1.68209 0.373377C1.96597 0.373377 2.2382 0.486219 2.43894 0.687069L8.10514 6.35813L13.7714 0.687069C13.8701 0.584748 13.9882 0.503105 14.1188 0.446962C14.2494 0.39082 14.3899 0.361248 14.5321 0.360026C14.6742 0.358783 14.8151 0.38589 14.9468 0.439762C15.0782 0.493633 15.1977 0.573197 15.2983 0.673783C15.3987 0.774389 15.4784 0.894026 15.5321 1.02568C15.5859 1.15736 15.6131 1.29845 15.6118 1.44071C15.6105 1.58297 15.5809 1.72357 15.5248 1.85428C15.4688 1.98499 15.3872 2.10324 15.2851 2.20206L9.61883 7.87312L15.2851 13.5441C15.4801 13.7462 15.588 14.0168 15.5854 14.2977C15.5831 14.5787 15.4705 14.8474 15.272 15.046C15.0735 15.2449 14.805 15.3574 14.5244 15.3599C14.2437 15.3623 13.9733 15.2543 13.7714 15.0591L8.10514 9.38812L2.43894 15.0591C2.23704 15.2543 1.96663 15.3623 1.68594 15.3599C1.40526 15.3574 1.13677 15.2449 0.938279 15.046C0.739807 14.8474 0.627232 14.5787 0.624791 14.2977C0.62235 14.0168 0.730236 13.7462 0.92524 13.5441L6.59144 7.87312L0.92524 2.20206C0.724562 2.00115 0.611816 1.72867 0.611816 1.44457C0.611816 1.16047 0.724562 0.887983 0.92524 0.687069Z"
fill="currentColor" />
</svg>
</button>
</div>
</div>
</div>
<div class="alert alert-outline-danger alert-dismissible fade show flex" role="alert"
id="dismiss-alert15">
<div class="sm:flex-shrink-0">
A simple outline danger alert—check it out!
</div>
<div class="ms-auto">
<div class="mx-1 my-1">
<button type="button"
class="inline-flex rounded-sm focus:outline-none focus:ring-0 focus:ring-offset-0 "
data-hs-remove-element="#dismiss-alert15">
<span class="sr-only">Dismiss</span>
<svg class="h-3 w-3" width="16" height="16" viewBox="0 0 16 16"
fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path
d="M0.92524 0.687069C1.126 0.486219 1.39823 0.373377 1.68209 0.373377C1.96597 0.373377 2.2382 0.486219 2.43894 0.687069L8.10514 6.35813L13.7714 0.687069C13.8701 0.584748 13.9882 0.503105 14.1188 0.446962C14.2494 0.39082 14.3899 0.361248 14.5321 0.360026C14.6742 0.358783 14.8151 0.38589 14.9468 0.439762C15.0782 0.493633 15.1977 0.573197 15.2983 0.673783C15.3987 0.774389 15.4784 0.894026 15.5321 1.02568C15.5859 1.15736 15.6131 1.29845 15.6118 1.44071C15.6105 1.58297 15.5809 1.72357 15.5248 1.85428C15.4688 1.98499 15.3872 2.10324 15.2851 2.20206L9.61883 7.87312L15.2851 13.5441C15.4801 13.7462 15.588 14.0168 15.5854 14.2977C15.5831 14.5787 15.4705 14.8474 15.272 15.046C15.0735 15.2449 14.805 15.3574 14.5244 15.3599C14.2437 15.3623 13.9733 15.2543 13.7714 15.0591L8.10514 9.38812L2.43894 15.0591C2.23704 15.2543 1.96663 15.3623 1.68594 15.3599C1.40526 15.3574 1.13677 15.2449 0.938279 15.046C0.739807 14.8474 0.627232 14.5787 0.624791 14.2977C0.62235 14.0168 0.730236 13.7462 0.92524 13.5441L6.59144 7.87312L0.92524 2.20206C0.724562 2.00115 0.611816 1.72867 0.611816 1.44457C0.611816 1.16047 0.724562 0.887983 0.92524 0.687069Z"
fill="currentColor" />
</svg>
</button>
</div>
</div>
</div>
<div class="alert alert-outline-light alert-dismissible fade show flex" role="alert"
id="dismiss-alert16">
<div class="sm:flex-shrink-0">
A simple outline light alert—check it out!
</div>
<div class="ms-auto">
<div class="mx-1 my-1">
<button type="button"
class="inline-flex rounded-sm focus:outline-none focus:ring-0 focus:ring-offset-0 "
data-hs-remove-element="#dismiss-alert16">
<span class="sr-only">Dismiss</span>
<svg class="h-3 w-3" width="16" height="16" viewBox="0 0 16 16"
fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path
d="M0.92524 0.687069C1.126 0.486219 1.39823 0.373377 1.68209 0.373377C1.96597 0.373377 2.2382 0.486219 2.43894 0.687069L8.10514 6.35813L13.7714 0.687069C13.8701 0.584748 13.9882 0.503105 14.1188 0.446962C14.2494 0.39082 14.3899 0.361248 14.5321 0.360026C14.6742 0.358783 14.8151 0.38589 14.9468 0.439762C15.0782 0.493633 15.1977 0.573197 15.2983 0.673783C15.3987 0.774389 15.4784 0.894026 15.5321 1.02568C15.5859 1.15736 15.6131 1.29845 15.6118 1.44071C15.6105 1.58297 15.5809 1.72357 15.5248 1.85428C15.4688 1.98499 15.3872 2.10324 15.2851 2.20206L9.61883 7.87312L15.2851 13.5441C15.4801 13.7462 15.588 14.0168 15.5854 14.2977C15.5831 14.5787 15.4705 14.8474 15.272 15.046C15.0735 15.2449 14.805 15.3574 14.5244 15.3599C14.2437 15.3623 13.9733 15.2543 13.7714 15.0591L8.10514 9.38812L2.43894 15.0591C2.23704 15.2543 1.96663 15.3623 1.68594 15.3599C1.40526 15.3574 1.13677 15.2449 0.938279 15.046C0.739807 14.8474 0.627232 14.5787 0.624791 14.2977C0.62235 14.0168 0.730236 13.7462 0.92524 13.5441L6.59144 7.87312L0.92524 2.20206C0.724562 2.00115 0.611816 1.72867 0.611816 1.44457C0.611816 1.16047 0.724562 0.887983 0.92524 0.687069Z"
fill="currentColor" />
</svg>
</button>
</div>
</div>
</div>
<div class="alert alert-outline-dark alert-dismissible fade show flex" role="alert"
id="dismiss-alert17">
<div class="sm:flex-shrink-0">
A simple outline dark alert—check it out!
</div>
<div class="ms-auto">
<div class="mx-1 my-1">
<button type="button"
class="inline-flex rounded-sm focus:outline-none focus:ring-0 focus:ring-offset-0 "
data-hs-remove-element="#dismiss-alert17">
<span class="sr-only">Dismiss</span>
<svg class="h-3 w-3" width="16" height="16" viewBox="0 0 16 16"
fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path
d="M0.92524 0.687069C1.126 0.486219 1.39823 0.373377 1.68209 0.373377C1.96597 0.373377 2.2382 0.486219 2.43894 0.687069L8.10514 6.35813L13.7714 0.687069C13.8701 0.584748 13.9882 0.503105 14.1188 0.446962C14.2494 0.39082 14.3899 0.361248 14.5321 0.360026C14.6742 0.358783 14.8151 0.38589 14.9468 0.439762C15.0782 0.493633 15.1977 0.573197 15.2983 0.673783C15.3987 0.774389 15.4784 0.894026 15.5321 1.02568C15.5859 1.15736 15.6131 1.29845 15.6118 1.44071C15.6105 1.58297 15.5809 1.72357 15.5248 1.85428C15.4688 1.98499 15.3872 2.10324 15.2851 2.20206L9.61883 7.87312L15.2851 13.5441C15.4801 13.7462 15.588 14.0168 15.5854 14.2977C15.5831 14.5787 15.4705 14.8474 15.272 15.046C15.0735 15.2449 14.805 15.3574 14.5244 15.3599C14.2437 15.3623 13.9733 15.2543 13.7714 15.0591L8.10514 9.38812L2.43894 15.0591C2.23704 15.2543 1.96663 15.3623 1.68594 15.3599C1.40526 15.3574 1.13677 15.2449 0.938279 15.046C0.739807 14.8474 0.627232 14.5787 0.624791 14.2977C0.62235 14.0168 0.730236 13.7462 0.92524 13.5441L6.59144 7.87312L0.92524 2.20206C0.724562 2.00115 0.611816 1.72867 0.611816 1.44457C0.611816 1.16047 0.724562 0.887983 0.92524 0.687069Z"
fill="currentColor" />
</svg>
</button>
</div>
</div>
</div>
Solid Alerts With Different Shadows
A simple solid primary alert with small shadow—check it out!
A simple solid primary alert with normal shadow—check it out!
A simple solid primary alert with large shadow—check it out!
A simple solid secondary alert with small shadow—check it out!
A simple solid secondary alert with normal shadow—check it out!
A simple solid secondary alert with large shadow—check it out!
<div class="alert alert-solid-primary alert-dismissible fade show flex" role="alert"
id="dismiss-alert18">
<div class="sm:flex-shrink-0">
A simple solid primary alert with small shadow—check it out!
</div>
<div class="ms-auto">
<div class="mx-1 my-1">
<button type="button"
class="inline-flex rounded-sm focus:outline-none focus:ring-0 focus:ring-offset-0 "
data-hs-remove-element="#dismiss-alert18">
<span class="sr-only">Dismiss</span>
<svg class="h-3 w-3" width="16" height="16" viewBox="0 0 16 16"
fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path
d="M0.92524 0.687069C1.126 0.486219 1.39823 0.373377 1.68209 0.373377C1.96597 0.373377 2.2382 0.486219 2.43894 0.687069L8.10514 6.35813L13.7714 0.687069C13.8701 0.584748 13.9882 0.503105 14.1188 0.446962C14.2494 0.39082 14.3899 0.361248 14.5321 0.360026C14.6742 0.358783 14.8151 0.38589 14.9468 0.439762C15.0782 0.493633 15.1977 0.573197 15.2983 0.673783C15.3987 0.774389 15.4784 0.894026 15.5321 1.02568C15.5859 1.15736 15.6131 1.29845 15.6118 1.44071C15.6105 1.58297 15.5809 1.72357 15.5248 1.85428C15.4688 1.98499 15.3872 2.10324 15.2851 2.20206L9.61883 7.87312L15.2851 13.5441C15.4801 13.7462 15.588 14.0168 15.5854 14.2977C15.5831 14.5787 15.4705 14.8474 15.272 15.046C15.0735 15.2449 14.805 15.3574 14.5244 15.3599C14.2437 15.3623 13.9733 15.2543 13.7714 15.0591L8.10514 9.38812L2.43894 15.0591C2.23704 15.2543 1.96663 15.3623 1.68594 15.3599C1.40526 15.3574 1.13677 15.2449 0.938279 15.046C0.739807 14.8474 0.627232 14.5787 0.624791 14.2977C0.62235 14.0168 0.730236 13.7462 0.92524 13.5441L6.59144 7.87312L0.92524 2.20206C0.724562 2.00115 0.611816 1.72867 0.611816 1.44457C0.611816 1.16047 0.724562 0.887983 0.92524 0.687069Z"
fill="currentColor" />
</svg>
</button>
</div>
</div>
</div>
<div class="alert alert-solid-primary alert-dismissible fade show flex" role="alert"
id="dismiss-alert19">
<div class="sm:flex-shrink-0">
A simple solid primary alert with normal shadow—check it out!
</div>
<div class="ms-auto">
<div class="mx-1 my-1">
<button type="button"
class="inline-flex rounded-sm focus:outline-none focus:ring-0 focus:ring-offset-0 "
data-hs-remove-element="#dismiss-alert19">
<span class="sr-only">Dismiss</span>
<svg class="h-3 w-3" width="16" height="16" viewBox="0 0 16 16"
fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path
d="M0.92524 0.687069C1.126 0.486219 1.39823 0.373377 1.68209 0.373377C1.96597 0.373377 2.2382 0.486219 2.43894 0.687069L8.10514 6.35813L13.7714 0.687069C13.8701 0.584748 13.9882 0.503105 14.1188 0.446962C14.2494 0.39082 14.3899 0.361248 14.5321 0.360026C14.6742 0.358783 14.8151 0.38589 14.9468 0.439762C15.0782 0.493633 15.1977 0.573197 15.2983 0.673783C15.3987 0.774389 15.4784 0.894026 15.5321 1.02568C15.5859 1.15736 15.6131 1.29845 15.6118 1.44071C15.6105 1.58297 15.5809 1.72357 15.5248 1.85428C15.4688 1.98499 15.3872 2.10324 15.2851 2.20206L9.61883 7.87312L15.2851 13.5441C15.4801 13.7462 15.588 14.0168 15.5854 14.2977C15.5831 14.5787 15.4705 14.8474 15.272 15.046C15.0735 15.2449 14.805 15.3574 14.5244 15.3599C14.2437 15.3623 13.9733 15.2543 13.7714 15.0591L8.10514 9.38812L2.43894 15.0591C2.23704 15.2543 1.96663 15.3623 1.68594 15.3599C1.40526 15.3574 1.13677 15.2449 0.938279 15.046C0.739807 14.8474 0.627232 14.5787 0.624791 14.2977C0.62235 14.0168 0.730236 13.7462 0.92524 13.5441L6.59144 7.87312L0.92524 2.20206C0.724562 2.00115 0.611816 1.72867 0.611816 1.44457C0.611816 1.16047 0.724562 0.887983 0.92524 0.687069Z"
fill="currentColor" />
</svg>
</button>
</div>
</div>
</div>
<div class="alert alert-solid-primary alert-dismissible fade show flex" role="alert"
id="dismiss-alert20">
<div class="sm:flex-shrink-0">
A simple solid primary alert with large shadow—check it out!
</div>
<div class="ms-auto">
<div class="mx-1 my-1">
<button type="button"
class="inline-flex rounded-sm focus:outline-none focus:ring-0 focus:ring-offset-0 "
data-hs-remove-element="#dismiss-alert20">
<span class="sr-only">Dismiss</span>
<svg class="h-3 w-3" width="16" height="16" viewBox="0 0 16 16"
fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path
d="M0.92524 0.687069C1.126 0.486219 1.39823 0.373377 1.68209 0.373377C1.96597 0.373377 2.2382 0.486219 2.43894 0.687069L8.10514 6.35813L13.7714 0.687069C13.8701 0.584748 13.9882 0.503105 14.1188 0.446962C14.2494 0.39082 14.3899 0.361248 14.5321 0.360026C14.6742 0.358783 14.8151 0.38589 14.9468 0.439762C15.0782 0.493633 15.1977 0.573197 15.2983 0.673783C15.3987 0.774389 15.4784 0.894026 15.5321 1.02568C15.5859 1.15736 15.6131 1.29845 15.6118 1.44071C15.6105 1.58297 15.5809 1.72357 15.5248 1.85428C15.4688 1.98499 15.3872 2.10324 15.2851 2.20206L9.61883 7.87312L15.2851 13.5441C15.4801 13.7462 15.588 14.0168 15.5854 14.2977C15.5831 14.5787 15.4705 14.8474 15.272 15.046C15.0735 15.2449 14.805 15.3574 14.5244 15.3599C14.2437 15.3623 13.9733 15.2543 13.7714 15.0591L8.10514 9.38812L2.43894 15.0591C2.23704 15.2543 1.96663 15.3623 1.68594 15.3599C1.40526 15.3574 1.13677 15.2449 0.938279 15.046C0.739807 14.8474 0.627232 14.5787 0.624791 14.2977C0.62235 14.0168 0.730236 13.7462 0.92524 13.5441L6.59144 7.87312L0.92524 2.20206C0.724562 2.00115 0.611816 1.72867 0.611816 1.44457C0.611816 1.16047 0.724562 0.887983 0.92524 0.687069Z"
fill="currentColor" />
</svg>
</button>
</div>
</div>
</div>
<div class="alert alert-solid-secondary alert-dismissible fade show flex" role="alert"
id="dismiss-alert21">
<div class="sm:flex-shrink-0">
A simple solid secondary alert with small shadow—check it out!
</div>
<div class="ms-auto">
<div class="mx-1 my-1">
<button type="button"
class="inline-flex rounded-sm focus:outline-none focus:ring-0 focus:ring-offset-0 "
data-hs-remove-element="#dismiss-alert21">
<span class="sr-only">Dismiss</span>
<svg class="h-3 w-3" width="16" height="16" viewBox="0 0 16 16"
fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path
d="M0.92524 0.687069C1.126 0.486219 1.39823 0.373377 1.68209 0.373377C1.96597 0.373377 2.2382 0.486219 2.43894 0.687069L8.10514 6.35813L13.7714 0.687069C13.8701 0.584748 13.9882 0.503105 14.1188 0.446962C14.2494 0.39082 14.3899 0.361248 14.5321 0.360026C14.6742 0.358783 14.8151 0.38589 14.9468 0.439762C15.0782 0.493633 15.1977 0.573197 15.2983 0.673783C15.3987 0.774389 15.4784 0.894026 15.5321 1.02568C15.5859 1.15736 15.6131 1.29845 15.6118 1.44071C15.6105 1.58297 15.5809 1.72357 15.5248 1.85428C15.4688 1.98499 15.3872 2.10324 15.2851 2.20206L9.61883 7.87312L15.2851 13.5441C15.4801 13.7462 15.588 14.0168 15.5854 14.2977C15.5831 14.5787 15.4705 14.8474 15.272 15.046C15.0735 15.2449 14.805 15.3574 14.5244 15.3599C14.2437 15.3623 13.9733 15.2543 13.7714 15.0591L8.10514 9.38812L2.43894 15.0591C2.23704 15.2543 1.96663 15.3623 1.68594 15.3599C1.40526 15.3574 1.13677 15.2449 0.938279 15.046C0.739807 14.8474 0.627232 14.5787 0.624791 14.2977C0.62235 14.0168 0.730236 13.7462 0.92524 13.5441L6.59144 7.87312L0.92524 2.20206C0.724562 2.00115 0.611816 1.72867 0.611816 1.44457C0.611816 1.16047 0.724562 0.887983 0.92524 0.687069Z"
fill="currentColor" />
</svg>
</button>
</div>
</div>
</div>
<div class="alert alert-solid-secondary alert-dismissible fade show flex" role="alert"
id="dismiss-alert22">
<div class="sm:flex-shrink-0">
A simple solid secondary alert with normal shadow—check it out!
</div>
<div class="ms-auto">
<div class="mx-1 my-1">
<button type="button"
class="inline-flex rounded-sm focus:outline-none focus:ring-0 focus:ring-offset-0 "
data-hs-remove-element="#dismiss-alert22">
<span class="sr-only">Dismiss</span>
<svg class="h-3 w-3" width="16" height="16" viewBox="0 0 16 16"
fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path
d="M0.92524 0.687069C1.126 0.486219 1.39823 0.373377 1.68209 0.373377C1.96597 0.373377 2.2382 0.486219 2.43894 0.687069L8.10514 6.35813L13.7714 0.687069C13.8701 0.584748 13.9882 0.503105 14.1188 0.446962C14.2494 0.39082 14.3899 0.361248 14.5321 0.360026C14.6742 0.358783 14.8151 0.38589 14.9468 0.439762C15.0782 0.493633 15.1977 0.573197 15.2983 0.673783C15.3987 0.774389 15.4784 0.894026 15.5321 1.02568C15.5859 1.15736 15.6131 1.29845 15.6118 1.44071C15.6105 1.58297 15.5809 1.72357 15.5248 1.85428C15.4688 1.98499 15.3872 2.10324 15.2851 2.20206L9.61883 7.87312L15.2851 13.5441C15.4801 13.7462 15.588 14.0168 15.5854 14.2977C15.5831 14.5787 15.4705 14.8474 15.272 15.046C15.0735 15.2449 14.805 15.3574 14.5244 15.3599C14.2437 15.3623 13.9733 15.2543 13.7714 15.0591L8.10514 9.38812L2.43894 15.0591C2.23704 15.2543 1.96663 15.3623 1.68594 15.3599C1.40526 15.3574 1.13677 15.2449 0.938279 15.046C0.739807 14.8474 0.627232 14.5787 0.624791 14.2977C0.62235 14.0168 0.730236 13.7462 0.92524 13.5441L6.59144 7.87312L0.92524 2.20206C0.724562 2.00115 0.611816 1.72867 0.611816 1.44457C0.611816 1.16047 0.724562 0.887983 0.92524 0.687069Z"
fill="currentColor" />
</svg>
</button>
</div>
</div>
</div>
<div class="alert alert-solid-secondary alert-dismissible fade show flex" role="alert"
id="dismiss-alert23">
<div class="sm:flex-shrink-0">
A simple solid secondary alert with large shadow—check it out!
</div>
<div class="ms-auto">
<div class="mx-1 my-1">
<button type="button"
class="inline-flex rounded-sm focus:outline-none focus:ring-0 focus:ring-offset-0 "
data-hs-remove-element="#dismiss-alert23">
<span class="sr-only">Dismiss</span>
<svg class="h-3 w-3" width="16" height="16" viewBox="0 0 16 16"
fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path
d="M0.92524 0.687069C1.126 0.486219 1.39823 0.373377 1.68209 0.373377C1.96597 0.373377 2.2382 0.486219 2.43894 0.687069L8.10514 6.35813L13.7714 0.687069C13.8701 0.584748 13.9882 0.503105 14.1188 0.446962C14.2494 0.39082 14.3899 0.361248 14.5321 0.360026C14.6742 0.358783 14.8151 0.38589 14.9468 0.439762C15.0782 0.493633 15.1977 0.573197 15.2983 0.673783C15.3987 0.774389 15.4784 0.894026 15.5321 1.02568C15.5859 1.15736 15.6131 1.29845 15.6118 1.44071C15.6105 1.58297 15.5809 1.72357 15.5248 1.85428C15.4688 1.98499 15.3872 2.10324 15.2851 2.20206L9.61883 7.87312L15.2851 13.5441C15.4801 13.7462 15.588 14.0168 15.5854 14.2977C15.5831 14.5787 15.4705 14.8474 15.272 15.046C15.0735 15.2449 14.805 15.3574 14.5244 15.3599C14.2437 15.3623 13.9733 15.2543 13.7714 15.0591L8.10514 9.38812L2.43894 15.0591C2.23704 15.2543 1.96663 15.3623 1.68594 15.3599C1.40526 15.3574 1.13677 15.2449 0.938279 15.046C0.739807 14.8474 0.627232 14.5787 0.624791 14.2977C0.62235 14.0168 0.730236 13.7462 0.92524 13.5441L6.59144 7.87312L0.92524 2.20206C0.724562 2.00115 0.611816 1.72867 0.611816 1.44457C0.611816 1.16047 0.724562 0.887983 0.92524 0.687069Z"
fill="currentColor" />
</svg>
</button>
</div>
</div>
</div>
Default Alerts With Different Shadows
A simple primary alert with small
shadow—check it out!
A simple primary alert with normal shadow—check
it out!
A simple primary alert with large
shadow—check it out!
A simple secondary alert with small
shadow—check it out!
A simple secondary alert with normal
shadow—check it out!
A simple secondary alert with large
shadow—check it out!
<div class="alert alert-primary shadow-sm">A simple primary alert with small
shadow—check it out!</div>
<div class="alert alert-primary shadow">A simple primary alert with normal shadow—check
it out!</div>
<div class="alert alert-primary shadow-lg">A simple primary alert with large
shadow—check it out!</div>
<div class="alert alert-secondary shadow-sm">A simple secondary alert with small
shadow—check it out!</div>
<div class="alert alert-secondary shadow">A simple secondary alert with normal
shadow—check it out!</div>
<div class="alert alert-secondary shadow-lg">A simple secondary alert with large
shadow—check it out!</div>
Rounded Solid Alerts
A simple solid rounded primary alert—check it out!
A simple solid rounded secondary alert—check it out!
A simple solid rounded warning alert—check it out!
A simple solid rounded danger alert—check it out!
<div class="alert alert-solid-primary !rounded-full alert-dismissible fade show flex"
role="alert" id="dismiss-alert24">
<div class="sm:flex-shrink-0">
A simple solid rounded primary alert—check it out!
</div>
<div class="ms-auto">
<div class="mx-1 my-1">
<button type="button"
class="inline-flex rounded-sm focus:outline-none focus:ring-0 focus:ring-offset-0 "
data-hs-remove-element="#dismiss-alert24">
<span class="sr-only">Dismiss</span>
<svg class="h-3 w-3" width="16" height="16" viewBox="0 0 16 16"
fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path
d="M0.92524 0.687069C1.126 0.486219 1.39823 0.373377 1.68209 0.373377C1.96597 0.373377 2.2382 0.486219 2.43894 0.687069L8.10514 6.35813L13.7714 0.687069C13.8701 0.584748 13.9882 0.503105 14.1188 0.446962C14.2494 0.39082 14.3899 0.361248 14.5321 0.360026C14.6742 0.358783 14.8151 0.38589 14.9468 0.439762C15.0782 0.493633 15.1977 0.573197 15.2983 0.673783C15.3987 0.774389 15.4784 0.894026 15.5321 1.02568C15.5859 1.15736 15.6131 1.29845 15.6118 1.44071C15.6105 1.58297 15.5809 1.72357 15.5248 1.85428C15.4688 1.98499 15.3872 2.10324 15.2851 2.20206L9.61883 7.87312L15.2851 13.5441C15.4801 13.7462 15.588 14.0168 15.5854 14.2977C15.5831 14.5787 15.4705 14.8474 15.272 15.046C15.0735 15.2449 14.805 15.3574 14.5244 15.3599C14.2437 15.3623 13.9733 15.2543 13.7714 15.0591L8.10514 9.38812L2.43894 15.0591C2.23704 15.2543 1.96663 15.3623 1.68594 15.3599C1.40526 15.3574 1.13677 15.2449 0.938279 15.046C0.739807 14.8474 0.627232 14.5787 0.624791 14.2977C0.62235 14.0168 0.730236 13.7462 0.92524 13.5441L6.59144 7.87312L0.92524 2.20206C0.724562 2.00115 0.611816 1.72867 0.611816 1.44457C0.611816 1.16047 0.724562 0.887983 0.92524 0.687069Z"
fill="currentColor" />
</svg>
</button>
</div>
</div>
</div>
<div class="alert alert-solid-secondary !rounded-full alert-dismissible fade show flex"
role="alert" id="dismiss-alert25">
<div class="sm:flex-shrink-0">
A simple solid rounded secondary alert—check it out!
</div>
<div class="ms-auto">
<div class="mx-1 my-1">
<button type="button"
class="inline-flex rounded-sm focus:outline-none focus:ring-0 focus:ring-offset-0 "
data-hs-remove-element="#dismiss-alert25">
<span class="sr-only">Dismiss</span>
<svg class="h-3 w-3" width="16" height="16" viewBox="0 0 16 16"
fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path
d="M0.92524 0.687069C1.126 0.486219 1.39823 0.373377 1.68209 0.373377C1.96597 0.373377 2.2382 0.486219 2.43894 0.687069L8.10514 6.35813L13.7714 0.687069C13.8701 0.584748 13.9882 0.503105 14.1188 0.446962C14.2494 0.39082 14.3899 0.361248 14.5321 0.360026C14.6742 0.358783 14.8151 0.38589 14.9468 0.439762C15.0782 0.493633 15.1977 0.573197 15.2983 0.673783C15.3987 0.774389 15.4784 0.894026 15.5321 1.02568C15.5859 1.15736 15.6131 1.29845 15.6118 1.44071C15.6105 1.58297 15.5809 1.72357 15.5248 1.85428C15.4688 1.98499 15.3872 2.10324 15.2851 2.20206L9.61883 7.87312L15.2851 13.5441C15.4801 13.7462 15.588 14.0168 15.5854 14.2977C15.5831 14.5787 15.4705 14.8474 15.272 15.046C15.0735 15.2449 14.805 15.3574 14.5244 15.3599C14.2437 15.3623 13.9733 15.2543 13.7714 15.0591L8.10514 9.38812L2.43894 15.0591C2.23704 15.2543 1.96663 15.3623 1.68594 15.3599C1.40526 15.3574 1.13677 15.2449 0.938279 15.046C0.739807 14.8474 0.627232 14.5787 0.624791 14.2977C0.62235 14.0168 0.730236 13.7462 0.92524 13.5441L6.59144 7.87312L0.92524 2.20206C0.724562 2.00115 0.611816 1.72867 0.611816 1.44457C0.611816 1.16047 0.724562 0.887983 0.92524 0.687069Z"
fill="currentColor" />
</svg>
</button>
</div>
</div>
</div>
<div class="alert alert-solid-warning !rounded-full alert-dismissible fade show flex"
role="alert" id="dismiss-alert26">
<div class="sm:flex-shrink-0">
A simple solid rounded warning alert—check it out!
</div>
<div class="ms-auto">
<div class="mx-1 my-1">
<button type="button"
class="inline-flex rounded-sm focus:outline-none focus:ring-0 focus:ring-offset-0 "
data-hs-remove-element="#dismiss-alert26">
<span class="sr-only">Dismiss</span>
<svg class="h-3 w-3" width="16" height="16" viewBox="0 0 16 16"
fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path
d="M0.92524 0.687069C1.126 0.486219 1.39823 0.373377 1.68209 0.373377C1.96597 0.373377 2.2382 0.486219 2.43894 0.687069L8.10514 6.35813L13.7714 0.687069C13.8701 0.584748 13.9882 0.503105 14.1188 0.446962C14.2494 0.39082 14.3899 0.361248 14.5321 0.360026C14.6742 0.358783 14.8151 0.38589 14.9468 0.439762C15.0782 0.493633 15.1977 0.573197 15.2983 0.673783C15.3987 0.774389 15.4784 0.894026 15.5321 1.02568C15.5859 1.15736 15.6131 1.29845 15.6118 1.44071C15.6105 1.58297 15.5809 1.72357 15.5248 1.85428C15.4688 1.98499 15.3872 2.10324 15.2851 2.20206L9.61883 7.87312L15.2851 13.5441C15.4801 13.7462 15.588 14.0168 15.5854 14.2977C15.5831 14.5787 15.4705 14.8474 15.272 15.046C15.0735 15.2449 14.805 15.3574 14.5244 15.3599C14.2437 15.3623 13.9733 15.2543 13.7714 15.0591L8.10514 9.38812L2.43894 15.0591C2.23704 15.2543 1.96663 15.3623 1.68594 15.3599C1.40526 15.3574 1.13677 15.2449 0.938279 15.046C0.739807 14.8474 0.627232 14.5787 0.624791 14.2977C0.62235 14.0168 0.730236 13.7462 0.92524 13.5441L6.59144 7.87312L0.92524 2.20206C0.724562 2.00115 0.611816 1.72867 0.611816 1.44457C0.611816 1.16047 0.724562 0.887983 0.92524 0.687069Z"
fill="currentColor" />
</svg>
</button>
</div>
</div>
</div>
<div class="alert alert-solid-danger !rounded-full alert-dismissible fade show flex"
role="alert" id="dismiss-alert27">
<div class="sm:flex-shrink-0">
A simple solid rounded danger alert—check it out!
</div>
<div class="ms-auto">
<div class="mx-1 my-1">
<button type="button"
class="inline-flex rounded-sm focus:outline-none focus:ring-0 focus:ring-offset-0 "
data-hs-remove-element="#dismiss-alert27">
<span class="sr-only">Dismiss</span>
<svg class="h-3 w-3" width="16" height="16" viewBox="0 0 16 16"
fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path
d="M0.92524 0.687069C1.126 0.486219 1.39823 0.373377 1.68209 0.373377C1.96597 0.373377 2.2382 0.486219 2.43894 0.687069L8.10514 6.35813L13.7714 0.687069C13.8701 0.584748 13.9882 0.503105 14.1188 0.446962C14.2494 0.39082 14.3899 0.361248 14.5321 0.360026C14.6742 0.358783 14.8151 0.38589 14.9468 0.439762C15.0782 0.493633 15.1977 0.573197 15.2983 0.673783C15.3987 0.774389 15.4784 0.894026 15.5321 1.02568C15.5859 1.15736 15.6131 1.29845 15.6118 1.44071C15.6105 1.58297 15.5809 1.72357 15.5248 1.85428C15.4688 1.98499 15.3872 2.10324 15.2851 2.20206L9.61883 7.87312L15.2851 13.5441C15.4801 13.7462 15.588 14.0168 15.5854 14.2977C15.5831 14.5787 15.4705 14.8474 15.272 15.046C15.0735 15.2449 14.805 15.3574 14.5244 15.3599C14.2437 15.3623 13.9733 15.2543 13.7714 15.0591L8.10514 9.38812L2.43894 15.0591C2.23704 15.2543 1.96663 15.3623 1.68594 15.3599C1.40526 15.3574 1.13677 15.2449 0.938279 15.046C0.739807 14.8474 0.627232 14.5787 0.624791 14.2977C0.62235 14.0168 0.730236 13.7462 0.92524 13.5441L6.59144 7.87312L0.92524 2.20206C0.724562 2.00115 0.611816 1.72867 0.611816 1.44457C0.611816 1.16047 0.724562 0.887983 0.92524 0.687069Z"
fill="currentColor" />
</svg>
</button>
</div>
</div>
</div>
Rounded Outline Alerts
A simple outline rounded primary alert—check it out!
A simple outline rounded secondary alert—check it out!
A simple outline rounded warning alert—check it out!
A simple outline rounded danger alert—check it out!
<div class="alert alert-outline-primary !rounded-full alert-dismissible fade show flex"
role="alert" id="dismiss-alert28">
<div class="sm:flex-shrink-0">
A simple outline rounded primary alert—check it out!
</div>
<div class="ms-auto">
<div class="mx-1 my-1">
<button type="button"
class="inline-flex rounded-sm focus:outline-none focus:ring-0 focus:ring-offset-0 "
data-hs-remove-element="#dismiss-alert28">
<span class="sr-only">Dismiss</span>
<svg class="h-3 w-3" width="16" height="16" viewBox="0 0 16 16"
fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path
d="M0.92524 0.687069C1.126 0.486219 1.39823 0.373377 1.68209 0.373377C1.96597 0.373377 2.2382 0.486219 2.43894 0.687069L8.10514 6.35813L13.7714 0.687069C13.8701 0.584748 13.9882 0.503105 14.1188 0.446962C14.2494 0.39082 14.3899 0.361248 14.5321 0.360026C14.6742 0.358783 14.8151 0.38589 14.9468 0.439762C15.0782 0.493633 15.1977 0.573197 15.2983 0.673783C15.3987 0.774389 15.4784 0.894026 15.5321 1.02568C15.5859 1.15736 15.6131 1.29845 15.6118 1.44071C15.6105 1.58297 15.5809 1.72357 15.5248 1.85428C15.4688 1.98499 15.3872 2.10324 15.2851 2.20206L9.61883 7.87312L15.2851 13.5441C15.4801 13.7462 15.588 14.0168 15.5854 14.2977C15.5831 14.5787 15.4705 14.8474 15.272 15.046C15.0735 15.2449 14.805 15.3574 14.5244 15.3599C14.2437 15.3623 13.9733 15.2543 13.7714 15.0591L8.10514 9.38812L2.43894 15.0591C2.23704 15.2543 1.96663 15.3623 1.68594 15.3599C1.40526 15.3574 1.13677 15.2449 0.938279 15.046C0.739807 14.8474 0.627232 14.5787 0.624791 14.2977C0.62235 14.0168 0.730236 13.7462 0.92524 13.5441L6.59144 7.87312L0.92524 2.20206C0.724562 2.00115 0.611816 1.72867 0.611816 1.44457C0.611816 1.16047 0.724562 0.887983 0.92524 0.687069Z"
fill="currentColor" />
</svg>
</button>
</div>
</div>
</div>
<div class="alert alert-outline-secondary !rounded-full alert-dismissible fade show flex"
role="alert" id="dismiss-alert29">
<div class="sm:flex-shrink-0">
A simple outline rounded secondary alert—check it out!
</div>
<div class="ms-auto">
<div class="mx-1 my-1">
<button type="button"
class="inline-flex rounded-sm focus:outline-none focus:ring-0 focus:ring-offset-0 "
data-hs-remove-element="#dismiss-alert29">
<span class="sr-only">Dismiss</span>
<svg class="h-3 w-3" width="16" height="16" viewBox="0 0 16 16"
fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path
d="M0.92524 0.687069C1.126 0.486219 1.39823 0.373377 1.68209 0.373377C1.96597 0.373377 2.2382 0.486219 2.43894 0.687069L8.10514 6.35813L13.7714 0.687069C13.8701 0.584748 13.9882 0.503105 14.1188 0.446962C14.2494 0.39082 14.3899 0.361248 14.5321 0.360026C14.6742 0.358783 14.8151 0.38589 14.9468 0.439762C15.0782 0.493633 15.1977 0.573197 15.2983 0.673783C15.3987 0.774389 15.4784 0.894026 15.5321 1.02568C15.5859 1.15736 15.6131 1.29845 15.6118 1.44071C15.6105 1.58297 15.5809 1.72357 15.5248 1.85428C15.4688 1.98499 15.3872 2.10324 15.2851 2.20206L9.61883 7.87312L15.2851 13.5441C15.4801 13.7462 15.588 14.0168 15.5854 14.2977C15.5831 14.5787 15.4705 14.8474 15.272 15.046C15.0735 15.2449 14.805 15.3574 14.5244 15.3599C14.2437 15.3623 13.9733 15.2543 13.7714 15.0591L8.10514 9.38812L2.43894 15.0591C2.23704 15.2543 1.96663 15.3623 1.68594 15.3599C1.40526 15.3574 1.13677 15.2449 0.938279 15.046C0.739807 14.8474 0.627232 14.5787 0.624791 14.2977C0.62235 14.0168 0.730236 13.7462 0.92524 13.5441L6.59144 7.87312L0.92524 2.20206C0.724562 2.00115 0.611816 1.72867 0.611816 1.44457C0.611816 1.16047 0.724562 0.887983 0.92524 0.687069Z"
fill="currentColor" />
</svg>
</button>
</div>
</div>
</div>
<div class="alert alert-outline-warning !rounded-full alert-dismissible fade show flex"
role="alert" id="dismiss-alert30">
<div class="sm:flex-shrink-0">
A simple outline rounded warning alert—check it out!
</div>
<div class="ms-auto">
<div class="mx-1 my-1">
<button type="button"
class="inline-flex rounded-sm focus:outline-none focus:ring-0 focus:ring-offset-0 "
data-hs-remove-element="#dismiss-alert30">
<span class="sr-only">Dismiss</span>
<svg class="h-3 w-3" width="16" height="16" viewBox="0 0 16 16"
fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path
d="M0.92524 0.687069C1.126 0.486219 1.39823 0.373377 1.68209 0.373377C1.96597 0.373377 2.2382 0.486219 2.43894 0.687069L8.10514 6.35813L13.7714 0.687069C13.8701 0.584748 13.9882 0.503105 14.1188 0.446962C14.2494 0.39082 14.3899 0.361248 14.5321 0.360026C14.6742 0.358783 14.8151 0.38589 14.9468 0.439762C15.0782 0.493633 15.1977 0.573197 15.2983 0.673783C15.3987 0.774389 15.4784 0.894026 15.5321 1.02568C15.5859 1.15736 15.6131 1.29845 15.6118 1.44071C15.6105 1.58297 15.5809 1.72357 15.5248 1.85428C15.4688 1.98499 15.3872 2.10324 15.2851 2.20206L9.61883 7.87312L15.2851 13.5441C15.4801 13.7462 15.588 14.0168 15.5854 14.2977C15.5831 14.5787 15.4705 14.8474 15.272 15.046C15.0735 15.2449 14.805 15.3574 14.5244 15.3599C14.2437 15.3623 13.9733 15.2543 13.7714 15.0591L8.10514 9.38812L2.43894 15.0591C2.23704 15.2543 1.96663 15.3623 1.68594 15.3599C1.40526 15.3574 1.13677 15.2449 0.938279 15.046C0.739807 14.8474 0.627232 14.5787 0.624791 14.2977C0.62235 14.0168 0.730236 13.7462 0.92524 13.5441L6.59144 7.87312L0.92524 2.20206C0.724562 2.00115 0.611816 1.72867 0.611816 1.44457C0.611816 1.16047 0.724562 0.887983 0.92524 0.687069Z"
fill="currentColor" />
</svg>
</button>
</div>
</div>
</div>
<div class="alert alert-outline-danger !rounded-full alert-dismissible fade show flex"
role="alert" id="dismiss-alert31">
<div class="sm:flex-shrink-0">
A simple outline rounded danger alert—check it out!
</div>
<div class="ms-auto">
<div class="mx-1 my-1">
<button type="button"
class="inline-flex rounded-sm focus:outline-none focus:ring-0 focus:ring-offset-0 "
data-hs-remove-element="#dismiss-alert31">
<span class="sr-only">Dismiss</span>
<svg class="h-3 w-3" width="16" height="16" viewBox="0 0 16 16"
fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path
d="M0.92524 0.687069C1.126 0.486219 1.39823 0.373377 1.68209 0.373377C1.96597 0.373377 2.2382 0.486219 2.43894 0.687069L8.10514 6.35813L13.7714 0.687069C13.8701 0.584748 13.9882 0.503105 14.1188 0.446962C14.2494 0.39082 14.3899 0.361248 14.5321 0.360026C14.6742 0.358783 14.8151 0.38589 14.9468 0.439762C15.0782 0.493633 15.1977 0.573197 15.2983 0.673783C15.3987 0.774389 15.4784 0.894026 15.5321 1.02568C15.5859 1.15736 15.6131 1.29845 15.6118 1.44071C15.6105 1.58297 15.5809 1.72357 15.5248 1.85428C15.4688 1.98499 15.3872 2.10324 15.2851 2.20206L9.61883 7.87312L15.2851 13.5441C15.4801 13.7462 15.588 14.0168 15.5854 14.2977C15.5831 14.5787 15.4705 14.8474 15.272 15.046C15.0735 15.2449 14.805 15.3574 14.5244 15.3599C14.2437 15.3623 13.9733 15.2543 13.7714 15.0591L8.10514 9.38812L2.43894 15.0591C2.23704 15.2543 1.96663 15.3623 1.68594 15.3599C1.40526 15.3574 1.13677 15.2449 0.938279 15.046C0.739807 14.8474 0.627232 14.5787 0.624791 14.2977C0.62235 14.0168 0.730236 13.7462 0.92524 13.5441L6.59144 7.87312L0.92524 2.20206C0.724562 2.00115 0.611816 1.72867 0.611816 1.44457C0.611816 1.16047 0.724562 0.887983 0.92524 0.687069Z"
fill="currentColor" />
</svg>
</button>
</div>
</div>
</div>
Rounded Default Alerts
A simple solid rounded primary alert—check it out!
A simple rounded secondary alert—check it out!
A simple rounded warning alert—check it out!
A simple rounded danger alert—check it out!
<div class="alert alert-primary !rounded-full alert-dismissible fade show flex"
role="alert" id="dismiss-alert32">
<div class="sm:flex-shrink-0">
A simple solid rounded primary alert—check it out!
</div>
<div class="ms-auto">
<div class="mx-1 my-1">
<button type="button"
class="inline-flex rounded-sm focus:outline-none focus:ring-0 focus:ring-offset-0 "
data-hs-remove-element="#dismiss-alert32">
<span class="sr-only">Dismiss</span>
<svg class="h-3 w-3" width="16" height="16" viewBox="0 0 16 16"
fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path
d="M0.92524 0.687069C1.126 0.486219 1.39823 0.373377 1.68209 0.373377C1.96597 0.373377 2.2382 0.486219 2.43894 0.687069L8.10514 6.35813L13.7714 0.687069C13.8701 0.584748 13.9882 0.503105 14.1188 0.446962C14.2494 0.39082 14.3899 0.361248 14.5321 0.360026C14.6742 0.358783 14.8151 0.38589 14.9468 0.439762C15.0782 0.493633 15.1977 0.573197 15.2983 0.673783C15.3987 0.774389 15.4784 0.894026 15.5321 1.02568C15.5859 1.15736 15.6131 1.29845 15.6118 1.44071C15.6105 1.58297 15.5809 1.72357 15.5248 1.85428C15.4688 1.98499 15.3872 2.10324 15.2851 2.20206L9.61883 7.87312L15.2851 13.5441C15.4801 13.7462 15.588 14.0168 15.5854 14.2977C15.5831 14.5787 15.4705 14.8474 15.272 15.046C15.0735 15.2449 14.805 15.3574 14.5244 15.3599C14.2437 15.3623 13.9733 15.2543 13.7714 15.0591L8.10514 9.38812L2.43894 15.0591C2.23704 15.2543 1.96663 15.3623 1.68594 15.3599C1.40526 15.3574 1.13677 15.2449 0.938279 15.046C0.739807 14.8474 0.627232 14.5787 0.624791 14.2977C0.62235 14.0168 0.730236 13.7462 0.92524 13.5441L6.59144 7.87312L0.92524 2.20206C0.724562 2.00115 0.611816 1.72867 0.611816 1.44457C0.611816 1.16047 0.724562 0.887983 0.92524 0.687069Z"
fill="currentColor" />
</svg>
</button>
</div>
</div>
</div>
<div class="alert alert-secondary !rounded-full alert-dismissible fade show flex"
role="alert" id="dismiss-alert33">
<div class="sm:flex-shrink-0">
A simple rounded secondary alert—check it out!
</div>
<div class="ms-auto">
<div class="mx-1 my-1">
<button type="button"
class="inline-flex rounded-sm focus:outline-none focus:ring-0 focus:ring-offset-0 "
data-hs-remove-element="#dismiss-alert33">
<span class="sr-only">Dismiss</span>
<svg class="h-3 w-3" width="16" height="16" viewBox="0 0 16 16"
fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path
d="M0.92524 0.687069C1.126 0.486219 1.39823 0.373377 1.68209 0.373377C1.96597 0.373377 2.2382 0.486219 2.43894 0.687069L8.10514 6.35813L13.7714 0.687069C13.8701 0.584748 13.9882 0.503105 14.1188 0.446962C14.2494 0.39082 14.3899 0.361248 14.5321 0.360026C14.6742 0.358783 14.8151 0.38589 14.9468 0.439762C15.0782 0.493633 15.1977 0.573197 15.2983 0.673783C15.3987 0.774389 15.4784 0.894026 15.5321 1.02568C15.5859 1.15736 15.6131 1.29845 15.6118 1.44071C15.6105 1.58297 15.5809 1.72357 15.5248 1.85428C15.4688 1.98499 15.3872 2.10324 15.2851 2.20206L9.61883 7.87312L15.2851 13.5441C15.4801 13.7462 15.588 14.0168 15.5854 14.2977C15.5831 14.5787 15.4705 14.8474 15.272 15.046C15.0735 15.2449 14.805 15.3574 14.5244 15.3599C14.2437 15.3623 13.9733 15.2543 13.7714 15.0591L8.10514 9.38812L2.43894 15.0591C2.23704 15.2543 1.96663 15.3623 1.68594 15.3599C1.40526 15.3574 1.13677 15.2449 0.938279 15.046C0.739807 14.8474 0.627232 14.5787 0.624791 14.2977C0.62235 14.0168 0.730236 13.7462 0.92524 13.5441L6.59144 7.87312L0.92524 2.20206C0.724562 2.00115 0.611816 1.72867 0.611816 1.44457C0.611816 1.16047 0.724562 0.887983 0.92524 0.687069Z"
fill="currentColor" />
</svg>
</button>
</div>
</div>
</div>
<div class="alert alert-warning !rounded-full alert-dismissible fade show flex"
role="alert" id="dismiss-alert34">
<div class="sm:flex-shrink-0">
A simple rounded warning alert—check it out!
</div>
<div class="ms-auto">
<div class="mx-1 my-1">
<button type="button"
class="inline-flex rounded-sm focus:outline-none focus:ring-0 focus:ring-offset-0 "
data-hs-remove-element="#dismiss-alert34">
<span class="sr-only">Dismiss</span>
<svg class="h-3 w-3" width="16" height="16" viewBox="0 0 16 16"
fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path
d="M0.92524 0.687069C1.126 0.486219 1.39823 0.373377 1.68209 0.373377C1.96597 0.373377 2.2382 0.486219 2.43894 0.687069L8.10514 6.35813L13.7714 0.687069C13.8701 0.584748 13.9882 0.503105 14.1188 0.446962C14.2494 0.39082 14.3899 0.361248 14.5321 0.360026C14.6742 0.358783 14.8151 0.38589 14.9468 0.439762C15.0782 0.493633 15.1977 0.573197 15.2983 0.673783C15.3987 0.774389 15.4784 0.894026 15.5321 1.02568C15.5859 1.15736 15.6131 1.29845 15.6118 1.44071C15.6105 1.58297 15.5809 1.72357 15.5248 1.85428C15.4688 1.98499 15.3872 2.10324 15.2851 2.20206L9.61883 7.87312L15.2851 13.5441C15.4801 13.7462 15.588 14.0168 15.5854 14.2977C15.5831 14.5787 15.4705 14.8474 15.272 15.046C15.0735 15.2449 14.805 15.3574 14.5244 15.3599C14.2437 15.3623 13.9733 15.2543 13.7714 15.0591L8.10514 9.38812L2.43894 15.0591C2.23704 15.2543 1.96663 15.3623 1.68594 15.3599C1.40526 15.3574 1.13677 15.2449 0.938279 15.046C0.739807 14.8474 0.627232 14.5787 0.624791 14.2977C0.62235 14.0168 0.730236 13.7462 0.92524 13.5441L6.59144 7.87312L0.92524 2.20206C0.724562 2.00115 0.611816 1.72867 0.611816 1.44457C0.611816 1.16047 0.724562 0.887983 0.92524 0.687069Z"
fill="currentColor" />
</svg>
</button>
</div>
</div>
</div>
<div class="alert alert-danger !rounded-full alert-dismissible fade show flex"
role="alert" id="dismiss-alert35">
<div class="sm:flex-shrink-0">
A simple rounded danger alert—check it out!
</div>
<div class="ms-auto">
<div class="mx-1 my-1">
<button type="button"
class="inline-flex rounded-sm focus:outline-none focus:ring-0 focus:ring-offset-0 "
data-hs-remove-element="#dismiss-alert35">
<span class="sr-only">Dismiss</span>
<svg class="h-3 w-3" width="16" height="16" viewBox="0 0 16 16"
fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path
d="M0.92524 0.687069C1.126 0.486219 1.39823 0.373377 1.68209 0.373377C1.96597 0.373377 2.2382 0.486219 2.43894 0.687069L8.10514 6.35813L13.7714 0.687069C13.8701 0.584748 13.9882 0.503105 14.1188 0.446962C14.2494 0.39082 14.3899 0.361248 14.5321 0.360026C14.6742 0.358783 14.8151 0.38589 14.9468 0.439762C15.0782 0.493633 15.1977 0.573197 15.2983 0.673783C15.3987 0.774389 15.4784 0.894026 15.5321 1.02568C15.5859 1.15736 15.6131 1.29845 15.6118 1.44071C15.6105 1.58297 15.5809 1.72357 15.5248 1.85428C15.4688 1.98499 15.3872 2.10324 15.2851 2.20206L9.61883 7.87312L15.2851 13.5441C15.4801 13.7462 15.588 14.0168 15.5854 14.2977C15.5831 14.5787 15.4705 14.8474 15.272 15.046C15.0735 15.2449 14.805 15.3574 14.5244 15.3599C14.2437 15.3623 13.9733 15.2543 13.7714 15.0591L8.10514 9.38812L2.43894 15.0591C2.23704 15.2543 1.96663 15.3623 1.68594 15.3599C1.40526 15.3574 1.13677 15.2449 0.938279 15.046C0.739807 14.8474 0.627232 14.5787 0.624791 14.2977C0.62235 14.0168 0.730236 13.7462 0.92524 13.5441L6.59144 7.87312L0.92524 2.20206C0.724562 2.00115 0.611816 1.72867 0.611816 1.44457C0.611816 1.16047 0.724562 0.887983 0.92524 0.687069Z"
fill="currentColor" />
</svg>
</button>
</div>
</div>
</div>
Rounded Alerts With Custom Close Button
A simple rounded primary alert—check it out!
A simple rounded secondary alert—check it out!
A simple rounded warning alert—check it out!
A simple rounded danger alert—check it out!
<div class="alert alert-primary !rounded-full alert-dismissible fade show"
id="dismiss-alert36">
A simple rounded primary alert—check it out!
<button type="button"
class="inline-flex ltr:float-right rtl:float-left focus:outline-none focus:ring-0 focus:ring-offset-0 "
data-hs-remove-element="#dismiss-alert36">
<span class="sr-only">Dismiss</span>
<svg class="h-3 w-3" width="16" height="16" viewBox="0 0 16 16" fill="none"
xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path
d="M0.92524 0.687069C1.126 0.486219 1.39823 0.373377 1.68209 0.373377C1.96597 0.373377 2.2382 0.486219 2.43894 0.687069L8.10514 6.35813L13.7714 0.687069C13.8701 0.584748 13.9882 0.503105 14.1188 0.446962C14.2494 0.39082 14.3899 0.361248 14.5321 0.360026C14.6742 0.358783 14.8151 0.38589 14.9468 0.439762C15.0782 0.493633 15.1977 0.573197 15.2983 0.673783C15.3987 0.774389 15.4784 0.894026 15.5321 1.02568C15.5859 1.15736 15.6131 1.29845 15.6118 1.44071C15.6105 1.58297 15.5809 1.72357 15.5248 1.85428C15.4688 1.98499 15.3872 2.10324 15.2851 2.20206L9.61883 7.87312L15.2851 13.5441C15.4801 13.7462 15.588 14.0168 15.5854 14.2977C15.5831 14.5787 15.4705 14.8474 15.272 15.046C15.0735 15.2449 14.805 15.3574 14.5244 15.3599C14.2437 15.3623 13.9733 15.2543 13.7714 15.0591L8.10514 9.38812L2.43894 15.0591C2.23704 15.2543 1.96663 15.3623 1.68594 15.3599C1.40526 15.3574 1.13677 15.2449 0.938279 15.046C0.739807 14.8474 0.627232 14.5787 0.624791 14.2977C0.62235 14.0168 0.730236 13.7462 0.92524 13.5441L6.59144 7.87312L0.92524 2.20206C0.724562 2.00115 0.611816 1.72867 0.611816 1.44457C0.611816 1.16047 0.724562 0.887983 0.92524 0.687069Z"
fill="currentColor" />
</svg>
</button>
</div>
<div class="alert alert-secondary !rounded-full alert-dismissible fade show"
id="dismiss-alert37">
A simple rounded secondary alert—check it out!
<button type="button"
class="inline-flex rounded-sm ltr:float-right rtl:float-left focus:outline-none focus:ring-0 focus:ring-offset-0 "
data-hs-remove-element="#dismiss-alert37">
<span class="sr-only">Dismiss</span>
<svg class="h-3 w-3" width="16" height="16" viewBox="0 0 16 16" fill="none"
xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path
d="M0.92524 0.687069C1.126 0.486219 1.39823 0.373377 1.68209 0.373377C1.96597 0.373377 2.2382 0.486219 2.43894 0.687069L8.10514 6.35813L13.7714 0.687069C13.8701 0.584748 13.9882 0.503105 14.1188 0.446962C14.2494 0.39082 14.3899 0.361248 14.5321 0.360026C14.6742 0.358783 14.8151 0.38589 14.9468 0.439762C15.0782 0.493633 15.1977 0.573197 15.2983 0.673783C15.3987 0.774389 15.4784 0.894026 15.5321 1.02568C15.5859 1.15736 15.6131 1.29845 15.6118 1.44071C15.6105 1.58297 15.5809 1.72357 15.5248 1.85428C15.4688 1.98499 15.3872 2.10324 15.2851 2.20206L9.61883 7.87312L15.2851 13.5441C15.4801 13.7462 15.588 14.0168 15.5854 14.2977C15.5831 14.5787 15.4705 14.8474 15.272 15.046C15.0735 15.2449 14.805 15.3574 14.5244 15.3599C14.2437 15.3623 13.9733 15.2543 13.7714 15.0591L8.10514 9.38812L2.43894 15.0591C2.23704 15.2543 1.96663 15.3623 1.68594 15.3599C1.40526 15.3574 1.13677 15.2449 0.938279 15.046C0.739807 14.8474 0.627232 14.5787 0.624791 14.2977C0.62235 14.0168 0.730236 13.7462 0.92524 13.5441L6.59144 7.87312L0.92524 2.20206C0.724562 2.00115 0.611816 1.72867 0.611816 1.44457C0.611816 1.16047 0.724562 0.887983 0.92524 0.687069Z"
fill="currentColor" />
</svg>
</button>
</div>
<div class="alert alert-warning !rounded-full alert-dismissible fade show"
id="dismiss-alert38">
A simple rounded warning alert—check it out!
<button type="button"
class="inline-flex rounded-sm ltr:float-right rtl:float-left focus:outline-none focus:ring-0 focus:ring-offset-0 "
data-hs-remove-element="#dismiss-alert38">
<span class="sr-only">Dismiss</span>
<svg class="h-3 w-3" width="16" height="16" viewBox="0 0 16 16" fill="none"
xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path
d="M0.92524 0.687069C1.126 0.486219 1.39823 0.373377 1.68209 0.373377C1.96597 0.373377 2.2382 0.486219 2.43894 0.687069L8.10514 6.35813L13.7714 0.687069C13.8701 0.584748 13.9882 0.503105 14.1188 0.446962C14.2494 0.39082 14.3899 0.361248 14.5321 0.360026C14.6742 0.358783 14.8151 0.38589 14.9468 0.439762C15.0782 0.493633 15.1977 0.573197 15.2983 0.673783C15.3987 0.774389 15.4784 0.894026 15.5321 1.02568C15.5859 1.15736 15.6131 1.29845 15.6118 1.44071C15.6105 1.58297 15.5809 1.72357 15.5248 1.85428C15.4688 1.98499 15.3872 2.10324 15.2851 2.20206L9.61883 7.87312L15.2851 13.5441C15.4801 13.7462 15.588 14.0168 15.5854 14.2977C15.5831 14.5787 15.4705 14.8474 15.272 15.046C15.0735 15.2449 14.805 15.3574 14.5244 15.3599C14.2437 15.3623 13.9733 15.2543 13.7714 15.0591L8.10514 9.38812L2.43894 15.0591C2.23704 15.2543 1.96663 15.3623 1.68594 15.3599C1.40526 15.3574 1.13677 15.2449 0.938279 15.046C0.739807 14.8474 0.627232 14.5787 0.624791 14.2977C0.62235 14.0168 0.730236 13.7462 0.92524 13.5441L6.59144 7.87312L0.92524 2.20206C0.724562 2.00115 0.611816 1.72867 0.611816 1.44457C0.611816 1.16047 0.724562 0.887983 0.92524 0.687069Z"
fill="currentColor" />
</svg>
</button>
</div>
<div class="alert alert-danger !rounded-full alert-dismissible fade show"
id="dismiss-alert39">
A simple rounded danger alert—check it out!
<button type="button"
class="inline-flex ltr:float-right rtl:float-left rounded-sm focus:outline-none focus:ring-0 focus:ring-offset-0 "
data-hs-remove-element="#dismiss-alert39">
<span class="sr-only">Dismiss</span>
<svg class="h-3 w-3" width="16" height="16" viewBox="0 0 16 16" fill="none"
xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path
d="M0.92524 0.687069C1.126 0.486219 1.39823 0.373377 1.68209 0.373377C1.96597 0.373377 2.2382 0.486219 2.43894 0.687069L8.10514 6.35813L13.7714 0.687069C13.8701 0.584748 13.9882 0.503105 14.1188 0.446962C14.2494 0.39082 14.3899 0.361248 14.5321 0.360026C14.6742 0.358783 14.8151 0.38589 14.9468 0.439762C15.0782 0.493633 15.1977 0.573197 15.2983 0.673783C15.3987 0.774389 15.4784 0.894026 15.5321 1.02568C15.5859 1.15736 15.6131 1.29845 15.6118 1.44071C15.6105 1.58297 15.5809 1.72357 15.5248 1.85428C15.4688 1.98499 15.3872 2.10324 15.2851 2.20206L9.61883 7.87312L15.2851 13.5441C15.4801 13.7462 15.588 14.0168 15.5854 14.2977C15.5831 14.5787 15.4705 14.8474 15.272 15.046C15.0735 15.2449 14.805 15.3574 14.5244 15.3599C14.2437 15.3623 13.9733 15.2543 13.7714 15.0591L8.10514 9.38812L2.43894 15.0591C2.23704 15.2543 1.96663 15.3623 1.68594 15.3599C1.40526 15.3574 1.13677 15.2449 0.938279 15.046C0.739807 14.8474 0.627232 14.5787 0.624791 14.2977C0.62235 14.0168 0.730236 13.7462 0.92524 13.5441L6.59144 7.87312L0.92524 2.20206C0.724562 2.00115 0.611816 1.72867 0.611816 1.44457C0.611816 1.16047 0.724562 0.887983 0.92524 0.687069Z"
fill="currentColor" />
</svg>
</button>
</div>
Alerts with icons
An example alert with an icon
An example success alert with an icon
An example warning alert with an icon
An example danger alert with an icon
<div class="alert alert-primary flex items-center" role="alert">
<svg class="sm:flex-shrink-0 me-2 svg-primary" xmlns="http://www.w3.org/2000/svg"
height="1.5rem" viewBox="0 0 24 24" width="1.5rem" fill="#000000">
<path d="M0 0h24v24H0V0z" fill="none" />
<path
d="M11 7h2v2h-2zm0 4h2v6h-2zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z" />
</svg>
<div>
An example alert with an icon
</div>
</div>
<div class="alert alert-success !border-success/10 flex items-center" role="alert">
<svg class="sm:flex-shrink-0 me-2 fill-success" xmlns="http://www.w3.org/2000/svg"
height="1.5rem" viewBox="0 0 24 24" width="1.5rem" fill="#000000">
<path d="M0 0h24v24H0V0zm0 0h24v24H0V0z" fill="none" />
<path
d="M16.59 7.58L10 14.17l-3.59-3.58L5 12l5 5 8-8zM12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z" />
</svg>
<div>
An example success alert with an icon
</div>
</div>
<div class="alert alert-warning flex items-center" role="alert">
<svg class="sm:flex-shrink-0 me-2 fill-warning" xmlns="http://www.w3.org/2000/svg"
enable-background="new 0 0 24 24" height="1.5rem" viewBox="0 0 24 24"
width="1.5rem" fill="#000000">
<g>
<rect fill="none" height="24" width="24" />
</g>
<g>
<g>
<g>
<path d="M12,5.99L19.53,19H4.47L12,5.99 M12,2L1,21h22L12,2L12,2z" />
<polygon points="13,16 11,16 11,18 13,18" />
<polygon points="13,10 11,10 11,15 13,15" />
</g>
</g>
</g>
</svg>
<div>
An example warning alert with an icon
</div>
</div>
<div class="alert alert-danger flex items-center" role="alert">
<svg class="sm:flex-shrink-0 me-2 fill-danger" xmlns="http://www.w3.org/2000/svg"
enable-background="new 0 0 24 24" height="1.5rem" viewBox="0 0 24 24"
width="1.5rem" fill="#000000">
<g>
<rect fill="none" height="24" width="24" />
</g>
<g>
<g>
<g>
<path
d="M15.73,3H8.27L3,8.27v7.46L8.27,21h7.46L21,15.73V8.27L15.73,3z M19,14.9L14.9,19H9.1L5,14.9V9.1L9.1,5h5.8L19,9.1V14.9z" />
<rect height="6" width="2" x="11" y="7" />
<rect height="2" width="2" x="11" y="15" />
</g>
</g>
</g>
</svg>
<div>
An example danger alert with an icon
</div>
</div>
Customized Alerts With SVG's
A customized primary alert with an icon
A customized primary alert with an icon
A customized primary alert with an icon
A customized primary alert with an icon
<div class="alert alert-primary alert-dismissible dark:!bg-bodybg fade show custom-alert-icon shadow-sm flex items-center"
role="alert" id="dismiss-alert40">
<div>
<svg class="svg-primary me-1" xmlns="http://www.w3.org/2000/svg" height="1.5rem"
viewBox="0 0 24 24" width="1.5rem" fill="#000000">
<path d="M0 0h24v24H0z" fill="none" />
<path
d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z" />
</svg>
</div>
<div>A customized primary alert with an icon</div>
<div class="ms-auto">
<div class="mx-1 my-1">
<button type="button"
class="inline-flex rounded-sm focus:outline-none focus:ring-0 focus:ring-offset-0 "
data-hs-remove-element="#dismiss-alert40">
<span class="sr-only">Dismiss</span>
<svg class="h-3 w-3" width="16" height="16" viewBox="0 0 16 16"
fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path
d="M0.92524 0.687069C1.126 0.486219 1.39823 0.373377 1.68209 0.373377C1.96597 0.373377 2.2382 0.486219 2.43894 0.687069L8.10514 6.35813L13.7714 0.687069C13.8701 0.584748 13.9882 0.503105 14.1188 0.446962C14.2494 0.39082 14.3899 0.361248 14.5321 0.360026C14.6742 0.358783 14.8151 0.38589 14.9468 0.439762C15.0782 0.493633 15.1977 0.573197 15.2983 0.673783C15.3987 0.774389 15.4784 0.894026 15.5321 1.02568C15.5859 1.15736 15.6131 1.29845 15.6118 1.44071C15.6105 1.58297 15.5809 1.72357 15.5248 1.85428C15.4688 1.98499 15.3872 2.10324 15.2851 2.20206L9.61883 7.87312L15.2851 13.5441C15.4801 13.7462 15.588 14.0168 15.5854 14.2977C15.5831 14.5787 15.4705 14.8474 15.272 15.046C15.0735 15.2449 14.805 15.3574 14.5244 15.3599C14.2437 15.3623 13.9733 15.2543 13.7714 15.0591L8.10514 9.38812L2.43894 15.0591C2.23704 15.2543 1.96663 15.3623 1.68594 15.3599C1.40526 15.3574 1.13677 15.2449 0.938279 15.046C0.739807 14.8474 0.627232 14.5787 0.624791 14.2977C0.62235 14.0168 0.730236 13.7462 0.92524 13.5441L6.59144 7.87312L0.92524 2.20206C0.724562 2.00115 0.611816 1.72867 0.611816 1.44457C0.611816 1.16047 0.724562 0.887983 0.92524 0.687069Z"
fill="currentColor" />
</svg>
</button>
</div>
</div>
</div>
<div class="alert alert-secondary alert-dismissible fade show custom-alert-icon shadow-sm flex items-center"
role="alert" id="dismiss-alert41">
<div>
<svg class="fill-secondary me-1" xmlns="http://www.w3.org/2000/svg"
height="1.5rem" viewBox="0 0 24 24" width="1.5rem" fill="#000000">
<path d="M0 0h24v24H0z" fill="none" />
<path
d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" />
</svg>
</div>
<div>A customized primary alert with an icon</div>
<div class="ms-auto">
<div class="mx-1 my-1">
<button type="button"
class="inline-flex rounded-sm focus:outline-none focus:ring-0 focus:ring-offset-0 "
data-hs-remove-element="#dismiss-alert41">
<span class="sr-only">Dismiss</span>
<svg class="h-3 w-3" width="16" height="16" viewBox="0 0 16 16"
fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path
d="M0.92524 0.687069C1.126 0.486219 1.39823 0.373377 1.68209 0.373377C1.96597 0.373377 2.2382 0.486219 2.43894 0.687069L8.10514 6.35813L13.7714 0.687069C13.8701 0.584748 13.9882 0.503105 14.1188 0.446962C14.2494 0.39082 14.3899 0.361248 14.5321 0.360026C14.6742 0.358783 14.8151 0.38589 14.9468 0.439762C15.0782 0.493633 15.1977 0.573197 15.2983 0.673783C15.3987 0.774389 15.4784 0.894026 15.5321 1.02568C15.5859 1.15736 15.6131 1.29845 15.6118 1.44071C15.6105 1.58297 15.5809 1.72357 15.5248 1.85428C15.4688 1.98499 15.3872 2.10324 15.2851 2.20206L9.61883 7.87312L15.2851 13.5441C15.4801 13.7462 15.588 14.0168 15.5854 14.2977C15.5831 14.5787 15.4705 14.8474 15.272 15.046C15.0735 15.2449 14.805 15.3574 14.5244 15.3599C14.2437 15.3623 13.9733 15.2543 13.7714 15.0591L8.10514 9.38812L2.43894 15.0591C2.23704 15.2543 1.96663 15.3623 1.68594 15.3599C1.40526 15.3574 1.13677 15.2449 0.938279 15.046C0.739807 14.8474 0.627232 14.5787 0.624791 14.2977C0.62235 14.0168 0.730236 13.7462 0.92524 13.5441L6.59144 7.87312L0.92524 2.20206C0.724562 2.00115 0.611816 1.72867 0.611816 1.44457C0.611816 1.16047 0.724562 0.887983 0.92524 0.687069Z"
fill="currentColor" />
</svg>
</button>
</div>
</div>
</div>
<div class="alert alert-warning alert-dismissible fade show custom-alert-icon shadow-sm flex items-center"
role="alert" id="dismiss-alert42">
<div>
<svg class="fill-warning me-1" xmlns="http://www.w3.org/2000/svg"
height="1.5rem" viewBox="0 0 24 24" width="1.5rem" fill="#000000">
<path d="M0 0h24v24H0z" fill="none" />
<path d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z" />
</svg>
</div>
<div>A customized primary alert with an icon</div>
<div class="ms-auto">
<div class="mx-1 my-1">
<button type="button"
class="inline-flex rounded-sm focus:outline-none focus:ring-0 focus:ring-offset-0 "
data-hs-remove-element="#dismiss-alert42">
<span class="sr-only">Dismiss</span>
<svg class="h-3 w-3" width="16" height="16" viewBox="0 0 16 16"
fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path
d="M0.92524 0.687069C1.126 0.486219 1.39823 0.373377 1.68209 0.373377C1.96597 0.373377 2.2382 0.486219 2.43894 0.687069L8.10514 6.35813L13.7714 0.687069C13.8701 0.584748 13.9882 0.503105 14.1188 0.446962C14.2494 0.39082 14.3899 0.361248 14.5321 0.360026C14.6742 0.358783 14.8151 0.38589 14.9468 0.439762C15.0782 0.493633 15.1977 0.573197 15.2983 0.673783C15.3987 0.774389 15.4784 0.894026 15.5321 1.02568C15.5859 1.15736 15.6131 1.29845 15.6118 1.44071C15.6105 1.58297 15.5809 1.72357 15.5248 1.85428C15.4688 1.98499 15.3872 2.10324 15.2851 2.20206L9.61883 7.87312L15.2851 13.5441C15.4801 13.7462 15.588 14.0168 15.5854 14.2977C15.5831 14.5787 15.4705 14.8474 15.272 15.046C15.0735 15.2449 14.805 15.3574 14.5244 15.3599C14.2437 15.3623 13.9733 15.2543 13.7714 15.0591L8.10514 9.38812L2.43894 15.0591C2.23704 15.2543 1.96663 15.3623 1.68594 15.3599C1.40526 15.3574 1.13677 15.2449 0.938279 15.046C0.739807 14.8474 0.627232 14.5787 0.624791 14.2977C0.62235 14.0168 0.730236 13.7462 0.92524 13.5441L6.59144 7.87312L0.92524 2.20206C0.724562 2.00115 0.611816 1.72867 0.611816 1.44457C0.611816 1.16047 0.724562 0.887983 0.92524 0.687069Z"
fill="currentColor" />
</svg>
</button>
</div>
</div>
</div>
<div class="alert alert-danger alert-dismissible fade show custom-alert-icon shadow-sm flex items-center"
role="alert" id="dismiss-alert43">
<div>
<svg class="fill-danger me-1" xmlns="http://www.w3.org/2000/svg" height="1.5rem"
viewBox="0 0 24 24" width="1.5rem" fill="#000000">
<path d="M0 0h24v24H0z" fill="none" />
<path
d="M15.73 3H8.27L3 8.27v7.46L8.27 21h7.46L21 15.73V8.27L15.73 3zM12 17.3c-.72 0-1.3-.58-1.3-1.3 0-.72.58-1.3 1.3-1.3.72 0 1.3.58 1.3 1.3 0 .72-.58 1.3-1.3 1.3zm1-4.3h-2V7h2v6z" />
</svg>
</div>
<div>A customized primary alert with an icon</div>
<div class="ms-auto">
<div class="mx-1 my-1">
<button type="button"
class="inline-flex rounded-sm focus:outline-none focus:ring-0 focus:ring-offset-0 "
data-hs-remove-element="#dismiss-alert43">
<span class="sr-only">Dismiss</span>
<svg class="h-3 w-3" width="16" height="16" viewBox="0 0 16 16"
fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path
d="M0.92524 0.687069C1.126 0.486219 1.39823 0.373377 1.68209 0.373377C1.96597 0.373377 2.2382 0.486219 2.43894 0.687069L8.10514 6.35813L13.7714 0.687069C13.8701 0.584748 13.9882 0.503105 14.1188 0.446962C14.2494 0.39082 14.3899 0.361248 14.5321 0.360026C14.6742 0.358783 14.8151 0.38589 14.9468 0.439762C15.0782 0.493633 15.1977 0.573197 15.2983 0.673783C15.3987 0.774389 15.4784 0.894026 15.5321 1.02568C15.5859 1.15736 15.6131 1.29845 15.6118 1.44071C15.6105 1.58297 15.5809 1.72357 15.5248 1.85428C15.4688 1.98499 15.3872 2.10324 15.2851 2.20206L9.61883 7.87312L15.2851 13.5441C15.4801 13.7462 15.588 14.0168 15.5854 14.2977C15.5831 14.5787 15.4705 14.8474 15.272 15.046C15.0735 15.2449 14.805 15.3574 14.5244 15.3599C14.2437 15.3623 13.9733 15.2543 13.7714 15.0591L8.10514 9.38812L2.43894 15.0591C2.23704 15.2543 1.96663 15.3623 1.68594 15.3599C1.40526 15.3574 1.13677 15.2449 0.938279 15.046C0.739807 14.8474 0.627232 14.5787 0.624791 14.2977C0.62235 14.0168 0.730236 13.7462 0.92524 13.5441L6.59144 7.87312L0.92524 2.20206C0.724562 2.00115 0.611816 1.72867 0.611816 1.44457C0.611816 1.16047 0.724562 0.887983 0.92524 0.687069Z"
fill="currentColor" />
</svg>
</button>
</div>
</div>
</div>
Alerts With Images
A simple primary alert with image—check it out!
A simple secondary alert with image—check it out!
A simple warning alert with image—check it out!
A simple danger alert with image—check it out!
A simple info alert with image—check it out!
A simple light alert with image—check it out!
A simple dark alert with image—check it out!
<div class="alert alert-img alert-primary alert-dismissible fase show !rounded-full flex-wrap relative"
role="alert" id="dismiss-alert44">
<div class="avatar avatar-sm me-3 avatar-rounded">
<img src="../assets/images/faces/3.jpg" alt="img">
</div>
<div>A simple primary alert with image—check it out!</div>
<button type="button"
class="m-2 p-3 absolute end-0 top-0 inline-flex rounded-sm focus:outline-none focus:ring-0 focus:ring-offset-0 "
data-hs-remove-element="#dismiss-alert44">
<span class="sr-only">Dismiss</span>
<svg class="h-3 w-3" width="16" height="16" viewBox="0 0 16 16"
fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path
d="M0.92524 0.687069C1.126 0.486219 1.39823 0.373377 1.68209 0.373377C1.96597 0.373377 2.2382 0.486219 2.43894 0.687069L8.10514 6.35813L13.7714 0.687069C13.8701 0.584748 13.9882 0.503105 14.1188 0.446962C14.2494 0.39082 14.3899 0.361248 14.5321 0.360026C14.6742 0.358783 14.8151 0.38589 14.9468 0.439762C15.0782 0.493633 15.1977 0.573197 15.2983 0.673783C15.3987 0.774389 15.4784 0.894026 15.5321 1.02568C15.5859 1.15736 15.6131 1.29845 15.6118 1.44071C15.6105 1.58297 15.5809 1.72357 15.5248 1.85428C15.4688 1.98499 15.3872 2.10324 15.2851 2.20206L9.61883 7.87312L15.2851 13.5441C15.4801 13.7462 15.588 14.0168 15.5854 14.2977C15.5831 14.5787 15.4705 14.8474 15.272 15.046C15.0735 15.2449 14.805 15.3574 14.5244 15.3599C14.2437 15.3623 13.9733 15.2543 13.7714 15.0591L8.10514 9.38812L2.43894 15.0591C2.23704 15.2543 1.96663 15.3623 1.68594 15.3599C1.40526 15.3574 1.13677 15.2449 0.938279 15.046C0.739807 14.8474 0.627232 14.5787 0.624791 14.2977C0.62235 14.0168 0.730236 13.7462 0.92524 13.5441L6.59144 7.87312L0.92524 2.20206C0.724562 2.00115 0.611816 1.72867 0.611816 1.44457C0.611816 1.16047 0.724562 0.887983 0.92524 0.687069Z"
fill="currentColor" />
</svg>
</button>
</div>
<div class="alert alert-img alert-secondary alert-dismissible fase show !rounded-full flex-wrap relative"
role="alert" id="dismiss-alert45">
<div class="avatar avatar-sm me-3 avatar-rounded">
<img src="../assets/images/faces/5.jpg" alt="img">
</div>
<div>A simple secondary alert with image—check it out!</div>
<button type="button"
class="m-2 p-3 absolute end-0 top-0 inline-flex rounded-sm focus:outline-none focus:ring-0 focus:ring-offset-0 "
data-hs-remove-element="#dismiss-alert45">
<span class="sr-only">Dismiss</span>
<svg class="h-3 w-3" width="16" height="16" viewBox="0 0 16 16"
fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path
d="M0.92524 0.687069C1.126 0.486219 1.39823 0.373377 1.68209 0.373377C1.96597 0.373377 2.2382 0.486219 2.43894 0.687069L8.10514 6.35813L13.7714 0.687069C13.8701 0.584748 13.9882 0.503105 14.1188 0.446962C14.2494 0.39082 14.3899 0.361248 14.5321 0.360026C14.6742 0.358783 14.8151 0.38589 14.9468 0.439762C15.0782 0.493633 15.1977 0.573197 15.2983 0.673783C15.3987 0.774389 15.4784 0.894026 15.5321 1.02568C15.5859 1.15736 15.6131 1.29845 15.6118 1.44071C15.6105 1.58297 15.5809 1.72357 15.5248 1.85428C15.4688 1.98499 15.3872 2.10324 15.2851 2.20206L9.61883 7.87312L15.2851 13.5441C15.4801 13.7462 15.588 14.0168 15.5854 14.2977C15.5831 14.5787 15.4705 14.8474 15.272 15.046C15.0735 15.2449 14.805 15.3574 14.5244 15.3599C14.2437 15.3623 13.9733 15.2543 13.7714 15.0591L8.10514 9.38812L2.43894 15.0591C2.23704 15.2543 1.96663 15.3623 1.68594 15.3599C1.40526 15.3574 1.13677 15.2449 0.938279 15.046C0.739807 14.8474 0.627232 14.5787 0.624791 14.2977C0.62235 14.0168 0.730236 13.7462 0.92524 13.5441L6.59144 7.87312L0.92524 2.20206C0.724562 2.00115 0.611816 1.72867 0.611816 1.44457C0.611816 1.16047 0.724562 0.887983 0.92524 0.687069Z"
fill="currentColor" />
</svg>
</button>
</div>
<div class="alert alert-img alert-warning alert-dismissible fase show !rounded-full flex-wrap relative"
role="alert" id="dismiss-alert46">
<div class="avatar avatar-sm me-3 avatar-rounded">
<img src="../assets/images/faces/8.jpg" alt="img">
</div>
<div>A simple warning alert with image—check it out!</div>
<button type="button"
class="m-2 p-3 absolute end-0 top-0 inline-flex rounded-sm focus:outline-none focus:ring-0 focus:ring-offset-0 "
data-hs-remove-element="#dismiss-alert46">
<span class="sr-only">Dismiss</span>
<svg class="h-3 w-3" width="16" height="16" viewBox="0 0 16 16"
fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path
d="M0.92524 0.687069C1.126 0.486219 1.39823 0.373377 1.68209 0.373377C1.96597 0.373377 2.2382 0.486219 2.43894 0.687069L8.10514 6.35813L13.7714 0.687069C13.8701 0.584748 13.9882 0.503105 14.1188 0.446962C14.2494 0.39082 14.3899 0.361248 14.5321 0.360026C14.6742 0.358783 14.8151 0.38589 14.9468 0.439762C15.0782 0.493633 15.1977 0.573197 15.2983 0.673783C15.3987 0.774389 15.4784 0.894026 15.5321 1.02568C15.5859 1.15736 15.6131 1.29845 15.6118 1.44071C15.6105 1.58297 15.5809 1.72357 15.5248 1.85428C15.4688 1.98499 15.3872 2.10324 15.2851 2.20206L9.61883 7.87312L15.2851 13.5441C15.4801 13.7462 15.588 14.0168 15.5854 14.2977C15.5831 14.5787 15.4705 14.8474 15.272 15.046C15.0735 15.2449 14.805 15.3574 14.5244 15.3599C14.2437 15.3623 13.9733 15.2543 13.7714 15.0591L8.10514 9.38812L2.43894 15.0591C2.23704 15.2543 1.96663 15.3623 1.68594 15.3599C1.40526 15.3574 1.13677 15.2449 0.938279 15.046C0.739807 14.8474 0.627232 14.5787 0.624791 14.2977C0.62235 14.0168 0.730236 13.7462 0.92524 13.5441L6.59144 7.87312L0.92524 2.20206C0.724562 2.00115 0.611816 1.72867 0.611816 1.44457C0.611816 1.16047 0.724562 0.887983 0.92524 0.687069Z"
fill="currentColor" />
</svg>
</button>
</div>
<div class="alert alert-img alert-danger alert-dismissible fase show !rounded-full flex-wrap relative"
role="alert" id="dismiss-alert47">
<div class="avatar avatar-sm me-3 avatar-rounded">
<img src="../assets/images/faces/11.jpg" alt="img">
</div>
<div>A simple danger alert with image—check it out!</div>
<button type="button"
class="m-2 p-3 absolute end-0 top-0 inline-flex rounded-sm focus:outline-none focus:ring-0 focus:ring-offset-0 "
data-hs-remove-element="#dismiss-alert47">
<span class="sr-only">Dismiss</span>
<svg class="h-3 w-3" width="16" height="16" viewBox="0 0 16 16"
fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path
d="M0.92524 0.687069C1.126 0.486219 1.39823 0.373377 1.68209 0.373377C1.96597 0.373377 2.2382 0.486219 2.43894 0.687069L8.10514 6.35813L13.7714 0.687069C13.8701 0.584748 13.9882 0.503105 14.1188 0.446962C14.2494 0.39082 14.3899 0.361248 14.5321 0.360026C14.6742 0.358783 14.8151 0.38589 14.9468 0.439762C15.0782 0.493633 15.1977 0.573197 15.2983 0.673783C15.3987 0.774389 15.4784 0.894026 15.5321 1.02568C15.5859 1.15736 15.6131 1.29845 15.6118 1.44071C15.6105 1.58297 15.5809 1.72357 15.5248 1.85428C15.4688 1.98499 15.3872 2.10324 15.2851 2.20206L9.61883 7.87312L15.2851 13.5441C15.4801 13.7462 15.588 14.0168 15.5854 14.2977C15.5831 14.5787 15.4705 14.8474 15.272 15.046C15.0735 15.2449 14.805 15.3574 14.5244 15.3599C14.2437 15.3623 13.9733 15.2543 13.7714 15.0591L8.10514 9.38812L2.43894 15.0591C2.23704 15.2543 1.96663 15.3623 1.68594 15.3599C1.40526 15.3574 1.13677 15.2449 0.938279 15.046C0.739807 14.8474 0.627232 14.5787 0.624791 14.2977C0.62235 14.0168 0.730236 13.7462 0.92524 13.5441L6.59144 7.87312L0.92524 2.20206C0.724562 2.00115 0.611816 1.72867 0.611816 1.44457C0.611816 1.16047 0.724562 0.887983 0.92524 0.687069Z"
fill="currentColor" />
</svg>
</button>
</div>
<div class="alert alert-img alert-info alert-dismissible fase show !rounded-full flex-wrap relative"
role="alert" id="dismiss-alert48">
<div class="avatar avatar-sm me-3 avatar-rounded">
<img src="../assets/images/faces/13.jpg" alt="img">
</div>
<div>A simple info alert with image—check it out!</div>
<button type="button"
class="m-2 p-3 absolute end-0 top-0 inline-flex rounded-sm focus:outline-none focus:ring-0 focus:ring-offset-0 "
data-hs-remove-element="#dismiss-alert48">
<span class="sr-only">Dismiss</span>
<svg class="h-3 w-3" width="16" height="16" viewBox="0 0 16 16"
fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path
d="M0.92524 0.687069C1.126 0.486219 1.39823 0.373377 1.68209 0.373377C1.96597 0.373377 2.2382 0.486219 2.43894 0.687069L8.10514 6.35813L13.7714 0.687069C13.8701 0.584748 13.9882 0.503105 14.1188 0.446962C14.2494 0.39082 14.3899 0.361248 14.5321 0.360026C14.6742 0.358783 14.8151 0.38589 14.9468 0.439762C15.0782 0.493633 15.1977 0.573197 15.2983 0.673783C15.3987 0.774389 15.4784 0.894026 15.5321 1.02568C15.5859 1.15736 15.6131 1.29845 15.6118 1.44071C15.6105 1.58297 15.5809 1.72357 15.5248 1.85428C15.4688 1.98499 15.3872 2.10324 15.2851 2.20206L9.61883 7.87312L15.2851 13.5441C15.4801 13.7462 15.588 14.0168 15.5854 14.2977C15.5831 14.5787 15.4705 14.8474 15.272 15.046C15.0735 15.2449 14.805 15.3574 14.5244 15.3599C14.2437 15.3623 13.9733 15.2543 13.7714 15.0591L8.10514 9.38812L2.43894 15.0591C2.23704 15.2543 1.96663 15.3623 1.68594 15.3599C1.40526 15.3574 1.13677 15.2449 0.938279 15.046C0.739807 14.8474 0.627232 14.5787 0.624791 14.2977C0.62235 14.0168 0.730236 13.7462 0.92524 13.5441L6.59144 7.87312L0.92524 2.20206C0.724562 2.00115 0.611816 1.72867 0.611816 1.44457C0.611816 1.16047 0.724562 0.887983 0.92524 0.687069Z"
fill="currentColor" />
</svg>
</button>
</div>
<div class="alert alert-img alert-light alert-dismissible fase show !rounded-full flex-wrap relative"
role="alert" id="dismiss-alert49">
<div class="avatar avatar-sm me-3 avatar-rounded">
<img src="../assets/images/faces/10.jpg" alt="img">
</div>
<div>A simple light alert with image—check it out!</div>
<button type="button"
class="m-2 p-3 absolute end-0 top-0 inline-flex rounded-sm focus:outline-none focus:ring-0 focus:ring-offset-0 "
data-hs-remove-element="#dismiss-alert49">
<span class="sr-only">Dismiss</span>
<svg class="h-3 w-3" width="16" height="16" viewBox="0 0 16 16"
fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path
d="M0.92524 0.687069C1.126 0.486219 1.39823 0.373377 1.68209 0.373377C1.96597 0.373377 2.2382 0.486219 2.43894 0.687069L8.10514 6.35813L13.7714 0.687069C13.8701 0.584748 13.9882 0.503105 14.1188 0.446962C14.2494 0.39082 14.3899 0.361248 14.5321 0.360026C14.6742 0.358783 14.8151 0.38589 14.9468 0.439762C15.0782 0.493633 15.1977 0.573197 15.2983 0.673783C15.3987 0.774389 15.4784 0.894026 15.5321 1.02568C15.5859 1.15736 15.6131 1.29845 15.6118 1.44071C15.6105 1.58297 15.5809 1.72357 15.5248 1.85428C15.4688 1.98499 15.3872 2.10324 15.2851 2.20206L9.61883 7.87312L15.2851 13.5441C15.4801 13.7462 15.588 14.0168 15.5854 14.2977C15.5831 14.5787 15.4705 14.8474 15.272 15.046C15.0735 15.2449 14.805 15.3574 14.5244 15.3599C14.2437 15.3623 13.9733 15.2543 13.7714 15.0591L8.10514 9.38812L2.43894 15.0591C2.23704 15.2543 1.96663 15.3623 1.68594 15.3599C1.40526 15.3574 1.13677 15.2449 0.938279 15.046C0.739807 14.8474 0.627232 14.5787 0.624791 14.2977C0.62235 14.0168 0.730236 13.7462 0.92524 13.5441L6.59144 7.87312L0.92524 2.20206C0.724562 2.00115 0.611816 1.72867 0.611816 1.44457C0.611816 1.16047 0.724562 0.887983 0.92524 0.687069Z"
fill="currentColor" />
</svg>
</button>
</div>
<div class="alert alert-img alert-dark alert-dismissible fase show !rounded-full flex-wrap relative"
role="alert" id="dismiss-alert50">
<div class="avatar avatar-sm me-3 avatar-rounded">
<img src="../assets/images/faces/15.jpg" alt="img">
</div>
<div>A simple dark alert with image—check it out!</div>
<button type="button"
class="m-2 p-3 absolute end-0 top-0 inline-flex rounded-sm focus:outline-none focus:ring-0 focus:ring-offset-0 "
data-hs-remove-element="#dismiss-alert50">
<span class="sr-only">Dismiss</span>
<svg class="h-3 w-3" width="16" height="16" viewBox="0 0 16 16"
fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path
d="M0.92524 0.687069C1.126 0.486219 1.39823 0.373377 1.68209 0.373377C1.96597 0.373377 2.2382 0.486219 2.43894 0.687069L8.10514 6.35813L13.7714 0.687069C13.8701 0.584748 13.9882 0.503105 14.1188 0.446962C14.2494 0.39082 14.3899 0.361248 14.5321 0.360026C14.6742 0.358783 14.8151 0.38589 14.9468 0.439762C15.0782 0.493633 15.1977 0.573197 15.2983 0.673783C15.3987 0.774389 15.4784 0.894026 15.5321 1.02568C15.5859 1.15736 15.6131 1.29845 15.6118 1.44071C15.6105 1.58297 15.5809 1.72357 15.5248 1.85428C15.4688 1.98499 15.3872 2.10324 15.2851 2.20206L9.61883 7.87312L15.2851 13.5441C15.4801 13.7462 15.588 14.0168 15.5854 14.2977C15.5831 14.5787 15.4705 14.8474 15.272 15.046C15.0735 15.2449 14.805 15.3574 14.5244 15.3599C14.2437 15.3623 13.9733 15.2543 13.7714 15.0591L8.10514 9.38812L2.43894 15.0591C2.23704 15.2543 1.96663 15.3623 1.68594 15.3599C1.40526 15.3574 1.13677 15.2449 0.938279 15.046C0.739807 14.8474 0.627232 14.5787 0.624791 14.2977C0.62235 14.0168 0.730236 13.7462 0.92524 13.5441L6.59144 7.87312L0.92524 2.20206C0.724562 2.00115 0.611816 1.72867 0.611816 1.44457C0.611816 1.16047 0.724562 0.887983 0.92524 0.687069Z"
fill="currentColor" />
</svg>
</button>
</div>
Alerts With Different size Images
A simple primary alert with image—check it out!
A simple secondary alert with image—check it out!
A simple warning alert with image—check it out!
A simple danger alert with image—check it out!
A simple info alert with image—check it out!
A simple info alert with image—check it out!
<div class="alert alert-img alert-primary alert-dismissible fase show flex-wrap relative"
role="alert" id="dismiss-alert51">
<div class="avatar avatar-xs me-3">
<img src="../assets/images/faces/3.jpg" alt="img">
</div>
<div>A simple primary alert with image—check it out!</div>
<button type="button"
class="m-2 p-3 absolute end-0 top-0 inline-flex rounded-sm focus:outline-none focus:ring-0 focus:ring-offset-0 "
data-hs-remove-element="#dismiss-alert51">
<span class="sr-only">Dismiss</span>
<svg class="h-3 w-3" width="16" height="16" viewBox="0 0 16 16"
fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path
d="M0.92524 0.687069C1.126 0.486219 1.39823 0.373377 1.68209 0.373377C1.96597 0.373377 2.2382 0.486219 2.43894 0.687069L8.10514 6.35813L13.7714 0.687069C13.8701 0.584748 13.9882 0.503105 14.1188 0.446962C14.2494 0.39082 14.3899 0.361248 14.5321 0.360026C14.6742 0.358783 14.8151 0.38589 14.9468 0.439762C15.0782 0.493633 15.1977 0.573197 15.2983 0.673783C15.3987 0.774389 15.4784 0.894026 15.5321 1.02568C15.5859 1.15736 15.6131 1.29845 15.6118 1.44071C15.6105 1.58297 15.5809 1.72357 15.5248 1.85428C15.4688 1.98499 15.3872 2.10324 15.2851 2.20206L9.61883 7.87312L15.2851 13.5441C15.4801 13.7462 15.588 14.0168 15.5854 14.2977C15.5831 14.5787 15.4705 14.8474 15.272 15.046C15.0735 15.2449 14.805 15.3574 14.5244 15.3599C14.2437 15.3623 13.9733 15.2543 13.7714 15.0591L8.10514 9.38812L2.43894 15.0591C2.23704 15.2543 1.96663 15.3623 1.68594 15.3599C1.40526 15.3574 1.13677 15.2449 0.938279 15.046C0.739807 14.8474 0.627232 14.5787 0.624791 14.2977C0.62235 14.0168 0.730236 13.7462 0.92524 13.5441L6.59144 7.87312L0.92524 2.20206C0.724562 2.00115 0.611816 1.72867 0.611816 1.44457C0.611816 1.16047 0.724562 0.887983 0.92524 0.687069Z"
fill="currentColor" />
</svg>
</button>
</div>
<div class="alert alert-img alert-secondary alert-dismissible fase show flex-wrap relative"
role="alert" id="dismiss-alert52">
<div class="avatar avatar-sm me-3">
<img src="../assets/images/faces/5.jpg" alt="img">
</div>
<div>A simple secondary alert with image—check it out!</div>
<button type="button"
class="m-2 p-3 absolute end-0 top-0 inline-flex rounded-sm focus:outline-none focus:ring-0 focus:ring-offset-0 "
data-hs-remove-element="#dismiss-alert52">
<span class="sr-only">Dismiss</span>
<svg class="h-3 w-3" width="16" height="16" viewBox="0 0 16 16"
fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path
d="M0.92524 0.687069C1.126 0.486219 1.39823 0.373377 1.68209 0.373377C1.96597 0.373377 2.2382 0.486219 2.43894 0.687069L8.10514 6.35813L13.7714 0.687069C13.8701 0.584748 13.9882 0.503105 14.1188 0.446962C14.2494 0.39082 14.3899 0.361248 14.5321 0.360026C14.6742 0.358783 14.8151 0.38589 14.9468 0.439762C15.0782 0.493633 15.1977 0.573197 15.2983 0.673783C15.3987 0.774389 15.4784 0.894026 15.5321 1.02568C15.5859 1.15736 15.6131 1.29845 15.6118 1.44071C15.6105 1.58297 15.5809 1.72357 15.5248 1.85428C15.4688 1.98499 15.3872 2.10324 15.2851 2.20206L9.61883 7.87312L15.2851 13.5441C15.4801 13.7462 15.588 14.0168 15.5854 14.2977C15.5831 14.5787 15.4705 14.8474 15.272 15.046C15.0735 15.2449 14.805 15.3574 14.5244 15.3599C14.2437 15.3623 13.9733 15.2543 13.7714 15.0591L8.10514 9.38812L2.43894 15.0591C2.23704 15.2543 1.96663 15.3623 1.68594 15.3599C1.40526 15.3574 1.13677 15.2449 0.938279 15.046C0.739807 14.8474 0.627232 14.5787 0.624791 14.2977C0.62235 14.0168 0.730236 13.7462 0.92524 13.5441L6.59144 7.87312L0.92524 2.20206C0.724562 2.00115 0.611816 1.72867 0.611816 1.44457C0.611816 1.16047 0.724562 0.887983 0.92524 0.687069Z"
fill="currentColor" />
</svg>
</button>
</div>
<div class="alert alert-img alert-warning alert-dismissible fase show flex-wrap relative"
role="alert" id="dismiss-alert53">
<div class="avatar me-3">
<img src="../assets/images/faces/8.jpg" alt="img">
</div>
<div>A simple warning alert with image—check it out!</div>
<button type="button"
class="m-2 p-3 absolute end-0 top-0 inline-flex rounded-sm focus:outline-none focus:ring-0 focus:ring-offset-0 "
data-hs-remove-element="#dismiss-alert53">
<span class="sr-only">Dismiss</span>
<svg class="h-3 w-3" width="16" height="16" viewBox="0 0 16 16"
fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path
d="M0.92524 0.687069C1.126 0.486219 1.39823 0.373377 1.68209 0.373377C1.96597 0.373377 2.2382 0.486219 2.43894 0.687069L8.10514 6.35813L13.7714 0.687069C13.8701 0.584748 13.9882 0.503105 14.1188 0.446962C14.2494 0.39082 14.3899 0.361248 14.5321 0.360026C14.6742 0.358783 14.8151 0.38589 14.9468 0.439762C15.0782 0.493633 15.1977 0.573197 15.2983 0.673783C15.3987 0.774389 15.4784 0.894026 15.5321 1.02568C15.5859 1.15736 15.6131 1.29845 15.6118 1.44071C15.6105 1.58297 15.5809 1.72357 15.5248 1.85428C15.4688 1.98499 15.3872 2.10324 15.2851 2.20206L9.61883 7.87312L15.2851 13.5441C15.4801 13.7462 15.588 14.0168 15.5854 14.2977C15.5831 14.5787 15.4705 14.8474 15.272 15.046C15.0735 15.2449 14.805 15.3574 14.5244 15.3599C14.2437 15.3623 13.9733 15.2543 13.7714 15.0591L8.10514 9.38812L2.43894 15.0591C2.23704 15.2543 1.96663 15.3623 1.68594 15.3599C1.40526 15.3574 1.13677 15.2449 0.938279 15.046C0.739807 14.8474 0.627232 14.5787 0.624791 14.2977C0.62235 14.0168 0.730236 13.7462 0.92524 13.5441L6.59144 7.87312L0.92524 2.20206C0.724562 2.00115 0.611816 1.72867 0.611816 1.44457C0.611816 1.16047 0.724562 0.887983 0.92524 0.687069Z"
fill="currentColor" />
</svg>
</button>
</div>
<div class="alert alert-img alert-danger alert-dismissible fase show flex-wrap relative"
role="alert" id="dismiss-alert54">
<div class="avatar avatar-md me-3">
<img src="../assets/images/faces/11.jpg" alt="img">
</div>
<div>A simple danger alert with image—check it out!</div>
<button type="button"
class="m-2 p-3 absolute end-0 top-0 inline-flex rounded-sm focus:outline-none focus:ring-0 focus:ring-offset-0 "
data-hs-remove-element="#dismiss-alert54">
<span class="sr-only">Dismiss</span>
<svg class="h-3 w-3" width="16" height="16" viewBox="0 0 16 16"
fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path
d="M0.92524 0.687069C1.126 0.486219 1.39823 0.373377 1.68209 0.373377C1.96597 0.373377 2.2382 0.486219 2.43894 0.687069L8.10514 6.35813L13.7714 0.687069C13.8701 0.584748 13.9882 0.503105 14.1188 0.446962C14.2494 0.39082 14.3899 0.361248 14.5321 0.360026C14.6742 0.358783 14.8151 0.38589 14.9468 0.439762C15.0782 0.493633 15.1977 0.573197 15.2983 0.673783C15.3987 0.774389 15.4784 0.894026 15.5321 1.02568C15.5859 1.15736 15.6131 1.29845 15.6118 1.44071C15.6105 1.58297 15.5809 1.72357 15.5248 1.85428C15.4688 1.98499 15.3872 2.10324 15.2851 2.20206L9.61883 7.87312L15.2851 13.5441C15.4801 13.7462 15.588 14.0168 15.5854 14.2977C15.5831 14.5787 15.4705 14.8474 15.272 15.046C15.0735 15.2449 14.805 15.3574 14.5244 15.3599C14.2437 15.3623 13.9733 15.2543 13.7714 15.0591L8.10514 9.38812L2.43894 15.0591C2.23704 15.2543 1.96663 15.3623 1.68594 15.3599C1.40526 15.3574 1.13677 15.2449 0.938279 15.046C0.739807 14.8474 0.627232 14.5787 0.624791 14.2977C0.62235 14.0168 0.730236 13.7462 0.92524 13.5441L6.59144 7.87312L0.92524 2.20206C0.724562 2.00115 0.611816 1.72867 0.611816 1.44457C0.611816 1.16047 0.724562 0.887983 0.92524 0.687069Z"
fill="currentColor" />
</svg>
</button>
</div>
<div class="alert alert-img alert-info alert-dismissible fase show flex-wrap relative"
role="alert" id="dismiss-alert55">
<div class="avatar avatar-lg me-3">
<img src="../assets/images/faces/13.jpg" alt="img">
</div>
<div>A simple info alert with image—check it out!</div>
<button type="button"
class="m-2 p-3 absolute end-0 top-0 inline-flex rounded-sm focus:outline-none focus:ring-0 focus:ring-offset-0 "
data-hs-remove-element="#dismiss-alert55">
<span class="sr-only">Dismiss</span>
<svg class="h-3 w-3" width="16" height="16" viewBox="0 0 16 16"
fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path
d="M0.92524 0.687069C1.126 0.486219 1.39823 0.373377 1.68209 0.373377C1.96597 0.373377 2.2382 0.486219 2.43894 0.687069L8.10514 6.35813L13.7714 0.687069C13.8701 0.584748 13.9882 0.503105 14.1188 0.446962C14.2494 0.39082 14.3899 0.361248 14.5321 0.360026C14.6742 0.358783 14.8151 0.38589 14.9468 0.439762C15.0782 0.493633 15.1977 0.573197 15.2983 0.673783C15.3987 0.774389 15.4784 0.894026 15.5321 1.02568C15.5859 1.15736 15.6131 1.29845 15.6118 1.44071C15.6105 1.58297 15.5809 1.72357 15.5248 1.85428C15.4688 1.98499 15.3872 2.10324 15.2851 2.20206L9.61883 7.87312L15.2851 13.5441C15.4801 13.7462 15.588 14.0168 15.5854 14.2977C15.5831 14.5787 15.4705 14.8474 15.272 15.046C15.0735 15.2449 14.805 15.3574 14.5244 15.3599C14.2437 15.3623 13.9733 15.2543 13.7714 15.0591L8.10514 9.38812L2.43894 15.0591C2.23704 15.2543 1.96663 15.3623 1.68594 15.3599C1.40526 15.3574 1.13677 15.2449 0.938279 15.046C0.739807 14.8474 0.627232 14.5787 0.624791 14.2977C0.62235 14.0168 0.730236 13.7462 0.92524 13.5441L6.59144 7.87312L0.92524 2.20206C0.724562 2.00115 0.611816 1.72867 0.611816 1.44457C0.611816 1.16047 0.724562 0.887983 0.92524 0.687069Z"
fill="currentColor" />
</svg>
</button>
</div>
<div class="alert alert-img alert-dark alert-dismissible fase show flex-wrap relative"
role="alert" id="dismiss-alert56">
<div class="avatar avatar-xl me-3">
<img src="../assets/images/faces/14.jpg" alt="img">
</div>
<div>A simple info alert with image—check it out!</div>
<button type="button"
class="m-2 p-3 absolute end-0 top-0 inline-flex rounded-sm focus:outline-none focus:ring-0 focus:ring-offset-0 "
data-hs-remove-element="#dismiss-alert56">
<span class="sr-only">Dismiss</span>
<svg class="h-3 w-3" width="16" height="16" viewBox="0 0 16 16"
fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path
d="M0.92524 0.687069C1.126 0.486219 1.39823 0.373377 1.68209 0.373377C1.96597 0.373377 2.2382 0.486219 2.43894 0.687069L8.10514 6.35813L13.7714 0.687069C13.8701 0.584748 13.9882 0.503105 14.1188 0.446962C14.2494 0.39082 14.3899 0.361248 14.5321 0.360026C14.6742 0.358783 14.8151 0.38589 14.9468 0.439762C15.0782 0.493633 15.1977 0.573197 15.2983 0.673783C15.3987 0.774389 15.4784 0.894026 15.5321 1.02568C15.5859 1.15736 15.6131 1.29845 15.6118 1.44071C15.6105 1.58297 15.5809 1.72357 15.5248 1.85428C15.4688 1.98499 15.3872 2.10324 15.2851 2.20206L9.61883 7.87312L15.2851 13.5441C15.4801 13.7462 15.588 14.0168 15.5854 14.2977C15.5831 14.5787 15.4705 14.8474 15.272 15.046C15.0735 15.2449 14.805 15.3574 14.5244 15.3599C14.2437 15.3623 13.9733 15.2543 13.7714 15.0591L8.10514 9.38812L2.43894 15.0591C2.23704 15.2543 1.96663 15.3623 1.68594 15.3599C1.40526 15.3574 1.13677 15.2449 0.938279 15.046C0.739807 14.8474 0.627232 14.5787 0.624791 14.2977C0.62235 14.0168 0.730236 13.7462 0.92524 13.5441L6.59144 7.87312L0.92524 2.20206C0.724562 2.00115 0.611816 1.72867 0.611816 1.44457C0.611816 1.16047 0.724562 0.887983 0.92524 0.687069Z"
fill="currentColor" />
</svg>
</button>
</div>Information?
This alert is created to just show the related information.
Confirmed
This alert is created to just show the confirmation message.
Warning
This alert is created to just show the warning message.
danger
This alert is created to just show the danger message.
Additional content
Thank you for reporting this.
We appreciate you to let us know the bug in the template and for warning us about future consequences Visit for support for queries ?
Thank you for reporting this.
We appreciate you to let us know the bug in the template and for warning us about future consequences Visit for support for queries ?
Thank you for reporting this.
We appreciate you to let us know the bug in the template and for warning us about future consequences Visit for support for queries ?
Thank you for reporting this.
We appreciate you to let us know the bug in the template and for warning us about future consequences Visit for support for queries ?
<div class="grid grid-cols-12 gap-4">
<div class="xxl:col-span-6 col-span-12">
<div class="alert alert-primary overflow-hidden !p-0" role="alert"
id="dismiss-alert65">
<div class="p-4 bg-primary text-white flex justify-between">
<h6 class="aletr-heading mb-0 text-[1rem]">Thank you for reporting this.
</h6>
<button type="button"
class="inline-flex rounded-sm focus:outline-none focus:ring-0 focus:ring-offset-0 "
data-hs-remove-element="#dismiss-alert65">
<span class="sr-only">Dismiss</span>
<svg class="h-3 w-3" width="16" height="16" viewBox="0 0 16 16"
fill="none" xmlns="http://www.w3.org/2000/svg"
aria-hidden="true">
<path
d="M0.92524 0.687069C1.126 0.486219 1.39823 0.373377 1.68209 0.373377C1.96597 0.373377 2.2382 0.486219 2.43894 0.687069L8.10514 6.35813L13.7714 0.687069C13.8701 0.584748 13.9882 0.503105 14.1188 0.446962C14.2494 0.39082 14.3899 0.361248 14.5321 0.360026C14.6742 0.358783 14.8151 0.38589 14.9468 0.439762C15.0782 0.493633 15.1977 0.573197 15.2983 0.673783C15.3987 0.774389 15.4784 0.894026 15.5321 1.02568C15.5859 1.15736 15.6131 1.29845 15.6118 1.44071C15.6105 1.58297 15.5809 1.72357 15.5248 1.85428C15.4688 1.98499 15.3872 2.10324 15.2851 2.20206L9.61883 7.87312L15.2851 13.5441C15.4801 13.7462 15.588 14.0168 15.5854 14.2977C15.5831 14.5787 15.4705 14.8474 15.272 15.046C15.0735 15.2449 14.805 15.3574 14.5244 15.3599C14.2437 15.3623 13.9733 15.2543 13.7714 15.0591L8.10514 9.38812L2.43894 15.0591C2.23704 15.2543 1.96663 15.3623 1.68594 15.3599C1.40526 15.3574 1.13677 15.2449 0.938279 15.046C0.739807 14.8474 0.627232 14.5787 0.624791 14.2977C0.62235 14.0168 0.730236 13.7462 0.92524 13.5441L6.59144 7.87312L0.92524 2.20206C0.724562 2.00115 0.611816 1.72867 0.611816 1.44457C0.611816 1.16047 0.724562 0.887983 0.92524 0.687069Z"
fill="currentColor" />
</svg>
</button>
</div>
<div class="p-3">
<p class="mb-0">We appreciate you to let us know the bug in the template
and for warning us about future consequences <a
href="javascript:void(0);"
class="font-semibold underline text-defaulttextcolor">Visit for
support
for queries ?</a></p>
</div>
</div>
</div>
<div class="xxl:col-span-6 col-span-12">
<div class="alert alert-secondary overflow-hidden !p-0" role="alert"
id="dismiss-alert66">
<div class="p-4 bg-secondary text-white flex justify-between">
<h6 class="aletr-heading mb-0 text-[1rem]">Thank you for reporting this.
</h6>
<button type="button"
class="inline-flex rounded-sm focus:outline-none focus:ring-0 focus:ring-offset-0 "
data-hs-remove-element="#dismiss-alert66">
<span class="sr-only">Dismiss</span>
<svg class="h-3 w-3" width="16" height="16" viewBox="0 0 16 16"
fill="none" xmlns="http://www.w3.org/2000/svg"
aria-hidden="true">
<path
d="M0.92524 0.687069C1.126 0.486219 1.39823 0.373377 1.68209 0.373377C1.96597 0.373377 2.2382 0.486219 2.43894 0.687069L8.10514 6.35813L13.7714 0.687069C13.8701 0.584748 13.9882 0.503105 14.1188 0.446962C14.2494 0.39082 14.3899 0.361248 14.5321 0.360026C14.6742 0.358783 14.8151 0.38589 14.9468 0.439762C15.0782 0.493633 15.1977 0.573197 15.2983 0.673783C15.3987 0.774389 15.4784 0.894026 15.5321 1.02568C15.5859 1.15736 15.6131 1.29845 15.6118 1.44071C15.6105 1.58297 15.5809 1.72357 15.5248 1.85428C15.4688 1.98499 15.3872 2.10324 15.2851 2.20206L9.61883 7.87312L15.2851 13.5441C15.4801 13.7462 15.588 14.0168 15.5854 14.2977C15.5831 14.5787 15.4705 14.8474 15.272 15.046C15.0735 15.2449 14.805 15.3574 14.5244 15.3599C14.2437 15.3623 13.9733 15.2543 13.7714 15.0591L8.10514 9.38812L2.43894 15.0591C2.23704 15.2543 1.96663 15.3623 1.68594 15.3599C1.40526 15.3574 1.13677 15.2449 0.938279 15.046C0.739807 14.8474 0.627232 14.5787 0.624791 14.2977C0.62235 14.0168 0.730236 13.7462 0.92524 13.5441L6.59144 7.87312L0.92524 2.20206C0.724562 2.00115 0.611816 1.72867 0.611816 1.44457C0.611816 1.16047 0.724562 0.887983 0.92524 0.687069Z"
fill="currentColor" />
</svg>
</button>
</div>
<div class="p-3">
<p class="mb-0">We appreciate you to let us know the bug in the template
and for warning us about future consequences <a
href="javascript:void(0);"
class="font-semibold underline text-defaulttextcolor">Visit for
support
for queries ?</a></p>
</div>
</div>
</div>
<div class="xxl:col-span-6 col-span-12">
<div class="alert alert-success !border-success/10 overflow-hidden !p-0"
role="alert" id="dismiss-alert67">
<div class="p-4 bg-success text-white flex justify-between">
<h6 class="aletr-heading mb-0 text-[1rem]">Thank you for reporting this.
</h6>
<button type="button"
class="inline-flex rounded-sm focus:outline-none focus:ring-0 focus:ring-offset-0 "
data-hs-remove-element="#dismiss-alert67">
<span class="sr-only">Dismiss</span>
<svg class="h-3 w-3" width="16" height="16" viewBox="0 0 16 16"
fill="none" xmlns="http://www.w3.org/2000/svg"
aria-hidden="true">
<path
d="M0.92524 0.687069C1.126 0.486219 1.39823 0.373377 1.68209 0.373377C1.96597 0.373377 2.2382 0.486219 2.43894 0.687069L8.10514 6.35813L13.7714 0.687069C13.8701 0.584748 13.9882 0.503105 14.1188 0.446962C14.2494 0.39082 14.3899 0.361248 14.5321 0.360026C14.6742 0.358783 14.8151 0.38589 14.9468 0.439762C15.0782 0.493633 15.1977 0.573197 15.2983 0.673783C15.3987 0.774389 15.4784 0.894026 15.5321 1.02568C15.5859 1.15736 15.6131 1.29845 15.6118 1.44071C15.6105 1.58297 15.5809 1.72357 15.5248 1.85428C15.4688 1.98499 15.3872 2.10324 15.2851 2.20206L9.61883 7.87312L15.2851 13.5441C15.4801 13.7462 15.588 14.0168 15.5854 14.2977C15.5831 14.5787 15.4705 14.8474 15.272 15.046C15.0735 15.2449 14.805 15.3574 14.5244 15.3599C14.2437 15.3623 13.9733 15.2543 13.7714 15.0591L8.10514 9.38812L2.43894 15.0591C2.23704 15.2543 1.96663 15.3623 1.68594 15.3599C1.40526 15.3574 1.13677 15.2449 0.938279 15.046C0.739807 14.8474 0.627232 14.5787 0.624791 14.2977C0.62235 14.0168 0.730236 13.7462 0.92524 13.5441L6.59144 7.87312L0.92524 2.20206C0.724562 2.00115 0.611816 1.72867 0.611816 1.44457C0.611816 1.16047 0.724562 0.887983 0.92524 0.687069Z"
fill="currentColor" />
</svg>
</button>
</div>
<div class="p-3">
<p class="mb-0">We appreciate you to let us know the bug in the template
and for warning us about future consequences <a
href="javascript:void(0);"
class="font-semibold underline text-defaulttextcolor">Visit for
support
for queries ?</a></p>
</div>
</div>
</div>
<div class="xxl:col-span-6 col-span-12">
<div class="alert alert-warning overflow-hidden !p-0" role="alert"
id="dismiss-alert68">
<div class="p-4 bg-warning text-white flex justify-between">
<h6 class="aletr-heading mb-0 text-[1rem]">Thank you for reporting this.
</h6>
<button type="button"
class="inline-flex rounded-sm focus:outline-none focus:ring-0 focus:ring-offset-0 "
data-hs-remove-element="#dismiss-alert68">
<span class="sr-only">Dismiss</span>
<svg class="h-3 w-3" width="16" height="16" viewBox="0 0 16 16"
fill="none" xmlns="http://www.w3.org/2000/svg"
aria-hidden="true">
<path
d="M0.92524 0.687069C1.126 0.486219 1.39823 0.373377 1.68209 0.373377C1.96597 0.373377 2.2382 0.486219 2.43894 0.687069L8.10514 6.35813L13.7714 0.687069C13.8701 0.584748 13.9882 0.503105 14.1188 0.446962C14.2494 0.39082 14.3899 0.361248 14.5321 0.360026C14.6742 0.358783 14.8151 0.38589 14.9468 0.439762C15.0782 0.493633 15.1977 0.573197 15.2983 0.673783C15.3987 0.774389 15.4784 0.894026 15.5321 1.02568C15.5859 1.15736 15.6131 1.29845 15.6118 1.44071C15.6105 1.58297 15.5809 1.72357 15.5248 1.85428C15.4688 1.98499 15.3872 2.10324 15.2851 2.20206L9.61883 7.87312L15.2851 13.5441C15.4801 13.7462 15.588 14.0168 15.5854 14.2977C15.5831 14.5787 15.4705 14.8474 15.272 15.046C15.0735 15.2449 14.805 15.3574 14.5244 15.3599C14.2437 15.3623 13.9733 15.2543 13.7714 15.0591L8.10514 9.38812L2.43894 15.0591C2.23704 15.2543 1.96663 15.3623 1.68594 15.3599C1.40526 15.3574 1.13677 15.2449 0.938279 15.046C0.739807 14.8474 0.627232 14.5787 0.624791 14.2977C0.62235 14.0168 0.730236 13.7462 0.92524 13.5441L6.59144 7.87312L0.92524 2.20206C0.724562 2.00115 0.611816 1.72867 0.611816 1.44457C0.611816 1.16047 0.724562 0.887983 0.92524 0.687069Z"
fill="currentColor" />
</svg>
</button>
</div>
<div class="p-3">
<p class="mb-0">We appreciate you to let us know the bug in the template
and for warning us about future consequences <a
href="javascript:void(0);"
class="font-semibold underline text-defaulttextcolor">Visit for
support
for queries ?</a></p>
</div>
</div>
</div>
</div>