Alerts
Ready to use Tailwind CSS alert components with production-ready, copy-paste HTML code. Use them as they are, or as a starting point to build beautiful websites.
Alerts are for telling someone something important, a success confirmation, a warning before they do something risky, an error that needs attention, or just a bit of info. We have a few layouts: simple colored banner, icon on the left, dismissible with an X, and an outlined version. They come in the usual four flavors, success, warning, error, info. Clean, readable, and easy to drop anywhere in a layout.
Tailwind
<!-- Success alert -->
<div class="mx-auto w-full max-w-4xl">
<div class="rounded-lg bg-green-50 p-4 ring-1 ring-inset ring-green-200">
<div class="flex items-start gap-x-4">
<div class="shrink-0">
<svg aria-hidden="true" class="size-5 text-green-500" viewBox="0 0 55 56" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M43.8919 18.4573C45.1123 19.6777 45.1123 21.6563 43.8919 22.8767L25.9716 40.797C24.7513 42.0173 22.7727 42.0173 21.5523 40.797L13.5257 32.771C12.3053 31.5507 12.3052 29.572 13.5256 28.3516C14.7459 27.1312 16.7245 27.1311 17.945 28.3515L23.7618 34.1679L39.4725 18.4573C40.6929 17.2369 42.6715 17.2369 43.8919 18.4573Z" fill="currentColor" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M27.5 5.66699C15.0736 5.66699 5 15.7406 5 28.167C5 40.5934 15.0736 50.667 27.5 50.667C39.9264 50.667 50 40.5934 50 28.167C50 15.7406 39.9264 5.66699 27.5 5.66699ZM0 28.167C0 12.9792 12.3122 0.666992 27.5 0.666992C42.6878 0.666992 55 12.9792 55 28.167C55 43.3548 42.6878 55.667 27.5 55.667C12.3122 55.667 0 43.3548 0 28.167Z" fill="currentColor" />
</svg>
</div>
<div class="flex-1">
<h3 class="text-sm font-semibold text-green-700">Successfully saved!</h3>
<div class="mt-1">
<p class="text-sm text-green-600">Your changes have been saved successfully. You can view the updated information on the dashboard.</p>
</div>
</div>
</div>
</div>
</div>
<!-- Warning alert -->
<div class="mx-auto w-full max-w-4xl">
<div class="rounded-lg bg-yellow-50 p-4 ring-1 ring-inset ring-yellow-300">
<div class="flex items-start gap-x-4">
<div class="shrink-0">
<svg aria-hidden="true" class="size-5 text-yellow-500" viewBox="0 0 55 54" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M19.9663 4.54867C23.1584 -1.51623 31.8415 -1.51622 35.0335 4.5487L35.0336 4.54875L54.0083 40.6026C54.0084 40.6029 54.0085 40.6031 54.0087 40.6034C56.993 46.2711 52.8794 53.0796 46.475 53.0796H8.52485C2.11871 53.0796 -1.9923 46.2696 0.991191 40.6006L0.991245 40.6005L19.9663 4.5487C19.9663 4.54869 19.9663 4.54868 19.9663 4.54867ZM30.0114 7.19191C28.9471 5.16965 26.0528 5.16965 24.9884 7.19191L24.9884 7.19193L6.01337 43.2436C6.01336 43.2437 6.01334 43.2437 6.01332 43.2437C5.01859 45.134 6.38982 47.4044 8.52485 47.4044H46.475C48.6115 47.4044 49.9801 45.1331 48.9869 43.2473L48.9865 43.2465L30.0114 7.19191ZM27.4999 16.1907C29.0671 16.1907 30.3375 17.4611 30.3375 19.0283V30.3787C30.3375 31.9459 29.0671 33.2163 27.4999 33.2163C25.9328 33.2163 24.6623 31.9459 24.6623 30.3787V19.0283C24.6623 17.4611 25.9328 16.1907 27.4999 16.1907ZM27.4999 36.0539C29.0671 36.0539 30.3375 37.3244 30.3375 38.8915V38.9199C30.3375 40.4871 29.0671 41.7575 27.4999 41.7575C25.9328 41.7575 24.6623 40.4871 24.6623 38.9199V38.8915C24.6623 37.3244 25.9328 36.0539 27.4999 36.0539Z" fill="currentColor" />
</svg>
</div>
<div class="flex-1">
<h3 class="text-sm font-semibold text-yellow-700">Something went wrong</h3>
<div class="mt-1">
<p class="text-sm text-yellow-600">There was a problem with your request. Please try again later. If the problem persists, please contact support.</p>
</div>
</div>
</div>
</div>
</div>
<!-- Error alert -->
<div class="mx-auto w-full max-w-4xl">
<div class="rounded-lg bg-red-50 p-4 ring-1 ring-inset ring-red-200">
<div class="flex items-start gap-x-4">
<div class="shrink-0">
<svg aria-hidden="true" class="size-5 text-red-500" viewBox="0 0 55 55" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M27.5 5C15.0736 5 5 15.0736 5 27.5C5 39.9265 15.0736 50 27.5 50C39.9265 50 50 39.9265 50 27.5C50 15.0736 39.9265 5 27.5 5ZM0 27.5C0 12.3122 12.3122 0 27.5 0C42.6879 0 55 12.3122 55 27.5C55 42.6879 42.6879 55 27.5 55C12.3122 55 0 42.6879 0 27.5ZM14.6211 14.6211C15.5975 13.6448 17.1804 13.6448 18.1567 14.6211L27.5 23.9645L36.8433 14.6211C37.8197 13.6448 39.4026 13.6448 40.3789 14.6211C41.3552 15.5974 41.3552 17.1803 40.3789 18.1567L31.0355 27.5L40.3789 36.8433C41.3552 37.8197 41.3552 39.4026 40.3789 40.3789C39.4026 41.3552 37.8197 41.3552 36.8433 40.3789L27.5 31.0355L18.1567 40.3789C17.1803 41.3552 15.5974 41.3552 14.6211 40.3789C13.6448 39.4026 13.6448 37.8197 14.6211 36.8433L23.9645 27.5L14.6211 18.1567C13.6448 17.1803 13.6448 15.5974 14.6211 14.6211Z" fill="currentColor" />
</svg>
</div>
<div class="flex-1">
<h3 class="text-sm font-semibold text-red-700">An error occurred</h3>
<div class="mt-1">
<p class="text-sm text-red-600">An unexpected error occurred. Please try again later. If the problem persists, please contact support.</p>
</div>
</div>
</div>
</div>
</div>
<!-- Info alert -->
<div class="mx-auto w-full max-w-4xl">
<div class="rounded-lg bg-blue-50 p-4 ring-1 ring-inset ring-blue-200">
<div class="flex items-start gap-x-4">
<div class="shrink-0">
<svg aria-hidden="true" class="size-5 text-blue-500" viewBox="0 0 55 55" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M27.5 5.5C15.3497 5.5 5.5 15.3497 5.5 27.5C5.5 39.6504 15.3497 49.5 27.5 49.5C39.6504 49.5 49.5 39.6504 49.5 27.5C49.5 15.3497 39.6504 5.5 27.5 5.5ZM0 27.5C0 12.3122 12.3122 0 27.5 0C42.6879 0 55 12.3122 55 27.5C55 42.6879 42.6879 55 27.5 55C12.3122 55 0 42.6879 0 27.5ZM24.6131 16.5C24.6131 14.9812 25.8443 13.75 27.3631 13.75H27.6369C29.1557 13.75 30.387 14.9812 30.387 16.5V16.775C30.387 18.2916 29.1591 19.522 27.6425 19.525L27.3686 19.5255C26.6383 19.527 25.9374 19.2379 25.4205 18.722C24.9035 18.2062 24.6131 17.5058 24.6131 16.7755V16.5ZM27.5 22C29.0188 22 30.25 23.2312 30.25 24.75V38.5C30.25 40.0188 29.0188 41.25 27.5 41.25C25.9812 41.25 24.75 40.0188 24.75 38.5V24.75C24.75 23.2312 25.9812 22 27.5 22Z" fill="currentColor" />
</svg>
</div>
<div class="flex-1">
<h3 class="text-sm font-semibold text-blue-700">We've released a new feature!</h3>
<div class="mt-1">
<p class="text-sm text-blue-600">New feature released that allows you to customize your profile. You can now add a profile picture and a bio to your profile.</p>
</div>
</div>
</div>
</div>
</div>
<!-- Neutral alert -->
<div class="mx-auto w-full max-w-4xl">
<div class="rounded-lg bg-gray-50 p-4 ring-1 ring-inset ring-gray-200">
<div class="flex items-start gap-x-4">
<div class="shrink-0">
<svg aria-hidden="true" class="size-5 text-gray-500" viewBox="0 0 55 55" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M27.5 5.5C15.3497 5.5 5.5 15.3497 5.5 27.5C5.5 39.6504 15.3497 49.5 27.5 49.5C39.6504 49.5 49.5 39.6504 49.5 27.5C49.5 15.3497 39.6504 5.5 27.5 5.5ZM0 27.5C0 12.3122 12.3122 0 27.5 0C42.6879 0 55 12.3122 55 27.5C55 42.6879 42.6879 55 27.5 55C12.3122 55 0 42.6879 0 27.5ZM24.6131 16.5C24.6131 14.9812 25.8443 13.75 27.3631 13.75H27.6369C29.1557 13.75 30.387 14.9812 30.387 16.5V16.775C30.387 18.2916 29.1591 19.522 27.6425 19.525L27.3686 19.5255C26.6383 19.527 25.9374 19.2379 25.4205 18.722C24.9035 18.2062 24.6131 17.5058 24.6131 16.7755V16.5ZM27.5 22C29.0188 22 30.25 23.2312 30.25 24.75V38.5C30.25 40.0188 29.0188 41.25 27.5 41.25C25.9812 41.25 24.75 40.0188 24.75 38.5V24.75C24.75 23.2312 25.9812 22 27.5 22Z" fill="currentColor" />
</svg>
</div>
<div class="flex-1">
<h3 class="text-sm font-semibold text-gray-700">New update available</h3>
<div class="mt-1">
<p class="text-sm text-gray-600">A new update is available for the application. You can now update the application to the latest version.</p>
</div>
</div>
</div>
</div>
</div><!-- Success alert -->
<div class="mx-auto w-full max-w-4xl">
<div class="rounded-lg bg-green-50 p-4 ring-1 ring-inset ring-green-200">
<div class="flex items-start gap-x-4">
<div class="shrink-0">
<svg aria-hidden="true" class="size-5 text-green-500" viewBox="0 0 55 56" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M43.8919 18.4573C45.1123 19.6777 45.1123 21.6563 43.8919 22.8767L25.9716 40.797C24.7513 42.0173 22.7727 42.0173 21.5523 40.797L13.5257 32.771C12.3053 31.5507 12.3052 29.572 13.5256 28.3516C14.7459 27.1312 16.7245 27.1311 17.945 28.3515L23.7618 34.1679L39.4725 18.4573C40.6929 17.2369 42.6715 17.2369 43.8919 18.4573Z" fill="currentColor" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M27.5 5.66699C15.0736 5.66699 5 15.7406 5 28.167C5 40.5934 15.0736 50.667 27.5 50.667C39.9264 50.667 50 40.5934 50 28.167C50 15.7406 39.9264 5.66699 27.5 5.66699ZM0 28.167C0 12.9792 12.3122 0.666992 27.5 0.666992C42.6878 0.666992 55 12.9792 55 28.167C55 43.3548 42.6878 55.667 27.5 55.667C12.3122 55.667 0 43.3548 0 28.167Z" fill="currentColor" />
</svg>
</div>
<div class="flex-1">
<h3 class="text-sm font-semibold text-green-700">Successfully saved!</h3>
<div class="mt-1">
<p class="text-sm text-green-600">Your changes have been saved successfully. You can view the updated information on the dashboard.</p>
</div>
<div class="mt-3 flex gap-x-3">
<button type="button" class="relative text-sm font-semibold text-green-700 hover:text-green-600">
Learn more
<span class="absolute -inset-1"></span>
</button>
<button type="button" class="relative text-sm font-semibold text-green-700 hover:text-green-600">
Dismiss
<span class="absolute -inset-1"></span>
</button>
</div>
</div>
</div>
</div>
</div>
<!-- Warning alert -->
<div class="mx-auto w-full max-w-4xl">
<div class="rounded-lg bg-yellow-50 p-4 ring-1 ring-inset ring-yellow-300">
<div class="flex items-start gap-x-4">
<div class="shrink-0">
<svg aria-hidden="true" class="size-5 text-yellow-500" viewBox="0 0 55 54" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M19.9663 4.54867C23.1584 -1.51623 31.8415 -1.51622 35.0335 4.5487L35.0336 4.54875L54.0083 40.6026C54.0084 40.6029 54.0085 40.6031 54.0087 40.6034C56.993 46.2711 52.8794 53.0796 46.475 53.0796H8.52485C2.11871 53.0796 -1.9923 46.2696 0.991191 40.6006L0.991245 40.6005L19.9663 4.5487C19.9663 4.54869 19.9663 4.54868 19.9663 4.54867ZM30.0114 7.19191C28.9471 5.16965 26.0528 5.16965 24.9884 7.19191L24.9884 7.19193L6.01337 43.2436C6.01336 43.2437 6.01334 43.2437 6.01332 43.2437C5.01859 45.134 6.38982 47.4044 8.52485 47.4044H46.475C48.6115 47.4044 49.9801 45.1331 48.9869 43.2473L48.9865 43.2465L30.0114 7.19191ZM27.4999 16.1907C29.0671 16.1907 30.3375 17.4611 30.3375 19.0283V30.3787C30.3375 31.9459 29.0671 33.2163 27.4999 33.2163C25.9328 33.2163 24.6623 31.9459 24.6623 30.3787V19.0283C24.6623 17.4611 25.9328 16.1907 27.4999 16.1907ZM27.4999 36.0539C29.0671 36.0539 30.3375 37.3244 30.3375 38.8915V38.9199C30.3375 40.4871 29.0671 41.7575 27.4999 41.7575C25.9328 41.7575 24.6623 40.4871 24.6623 38.9199V38.8915C24.6623 37.3244 25.9328 36.0539 27.4999 36.0539Z" fill="currentColor" />
</svg>
</div>
<div class="flex-1">
<h3 class="text-sm font-semibold text-yellow-700">Something went wrong</h3>
<div class="mt-1">
<p class="text-sm text-yellow-600">There was a problem with your request. Please try again later. If the problem persists, please contact support.</p>
</div>
<div class="mt-3 flex gap-x-3">
<button type="button" class="relative text-sm font-semibold text-yellow-700 hover:text-yellow-600">
Learn more
<span class="absolute -inset-1"></span>
</button>
<button type="button" class="relative text-sm font-semibold text-yellow-700 hover:text-yellow-600">
Dismiss
<span class="absolute -inset-1"></span>
</button>
</div>
</div>
</div>
</div>
</div>
<!-- Error alert -->
<div class="mx-auto w-full max-w-4xl">
<div class="rounded-lg bg-red-50 p-4 ring-1 ring-inset ring-red-200">
<div class="flex items-start gap-x-4">
<div class="shrink-0">
<svg aria-hidden="true" class="size-5 text-red-500" viewBox="0 0 55 55" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M27.5 5C15.0736 5 5 15.0736 5 27.5C5 39.9265 15.0736 50 27.5 50C39.9265 50 50 39.9265 50 27.5C50 15.0736 39.9265 5 27.5 5ZM0 27.5C0 12.3122 12.3122 0 27.5 0C42.6879 0 55 12.3122 55 27.5C55 42.6879 42.6879 55 27.5 55C12.3122 55 0 42.6879 0 27.5ZM14.6211 14.6211C15.5975 13.6448 17.1804 13.6448 18.1567 14.6211L27.5 23.9645L36.8433 14.6211C37.8197 13.6448 39.4026 13.6448 40.3789 14.6211C41.3552 15.5974 41.3552 17.1803 40.3789 18.1567L31.0355 27.5L40.3789 36.8433C41.3552 37.8197 41.3552 39.4026 40.3789 40.3789C39.4026 41.3552 37.8197 41.3552 36.8433 40.3789L27.5 31.0355L18.1567 40.3789C17.1803 41.3552 15.5974 41.3552 14.6211 40.3789C13.6448 39.4026 13.6448 37.8197 14.6211 36.8433L23.9645 27.5L14.6211 18.1567C13.6448 17.1803 13.6448 15.5974 14.6211 14.6211Z" fill="currentColor" />
</svg>
</div>
<div class="flex-1">
<h3 class="text-sm font-semibold text-red-700">An error occurred</h3>
<div class="mt-1">
<p class="text-sm text-red-600">An unexpected error occurred. Please try again later. If the problem persists, please contact support.</p>
</div>
<div class="mt-3 flex gap-x-3">
<button type="button" class="relative text-sm font-semibold text-red-700 hover:text-red-600">
Learn more
<span class="absolute -inset-1"></span>
</button>
<button type="button" class="relative text-sm font-semibold text-red-700 hover:text-red-600">
Dismiss
<span class="absolute -inset-1"></span>
</button>
</div>
</div>
</div>
</div>
</div>
<!-- Info alert -->
<div class="mx-auto w-full max-w-4xl">
<div class="rounded-lg bg-blue-50 p-4 ring-1 ring-inset ring-blue-200">
<div class="flex items-start gap-x-4">
<div class="shrink-0">
<svg aria-hidden="true" class="size-5 text-blue-500" viewBox="0 0 55 55" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M27.5 5.5C15.3497 5.5 5.5 15.3497 5.5 27.5C5.5 39.6504 15.3497 49.5 27.5 49.5C39.6504 49.5 49.5 39.6504 49.5 27.5C49.5 15.3497 39.6504 5.5 27.5 5.5ZM0 27.5C0 12.3122 12.3122 0 27.5 0C42.6879 0 55 12.3122 55 27.5C55 42.6879 42.6879 55 27.5 55C12.3122 55 0 42.6879 0 27.5ZM24.6131 16.5C24.6131 14.9812 25.8443 13.75 27.3631 13.75H27.6369C29.1557 13.75 30.387 14.9812 30.387 16.5V16.775C30.387 18.2916 29.1591 19.522 27.6425 19.525L27.3686 19.5255C26.6383 19.527 25.9374 19.2379 25.4205 18.722C24.9035 18.2062 24.6131 17.5058 24.6131 16.7755V16.5ZM27.5 22C29.0188 22 30.25 23.2312 30.25 24.75V38.5C30.25 40.0188 29.0188 41.25 27.5 41.25C25.9812 41.25 24.75 40.0188 24.75 38.5V24.75C24.75 23.2312 25.9812 22 27.5 22Z" fill="currentColor" />
</svg>
</div>
<div class="flex-1">
<h3 class="text-sm font-semibold text-blue-700">We've released a new feature!</h3>
<div class="mt-1">
<p class="text-sm text-blue-600">New feature released that allows you to customize your profile. You can now add a profile picture and a bio to your profile.</p>
</div>
<div class="mt-3 flex gap-x-3">
<button type="button" class="relative text-sm font-semibold text-blue-700 hover:text-blue-500">
Learn more
<span class="absolute -inset-1"></span>
</button>
<button type="button" class="relative text-sm font-semibold text-blue-700 hover:text-blue-500">
Dismiss
<span class="absolute -inset-1"></span>
</button>
</div>
</div>
</div>
</div>
</div>
<!-- Neutral alert -->
<div class="mx-auto w-full max-w-4xl">
<div class="rounded-lg bg-gray-50 p-4 ring-1 ring-inset ring-gray-200">
<div class="flex items-start gap-x-4">
<div class="shrink-0">
<svg aria-hidden="true" class="size-5 text-gray-500" viewBox="0 0 55 55" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M27.5 5.5C15.3497 5.5 5.5 15.3497 5.5 27.5C5.5 39.6504 15.3497 49.5 27.5 49.5C39.6504 49.5 49.5 39.6504 49.5 27.5C49.5 15.3497 39.6504 5.5 27.5 5.5ZM0 27.5C0 12.3122 12.3122 0 27.5 0C42.6879 0 55 12.3122 55 27.5C55 42.6879 42.6879 55 27.5 55C12.3122 55 0 42.6879 0 27.5ZM24.6131 16.5C24.6131 14.9812 25.8443 13.75 27.3631 13.75H27.6369C29.1557 13.75 30.387 14.9812 30.387 16.5V16.775C30.387 18.2916 29.1591 19.522 27.6425 19.525L27.3686 19.5255C26.6383 19.527 25.9374 19.2379 25.4205 18.722C24.9035 18.2062 24.6131 17.5058 24.6131 16.7755V16.5ZM27.5 22C29.0188 22 30.25 23.2312 30.25 24.75V38.5C30.25 40.0188 29.0188 41.25 27.5 41.25C25.9812 41.25 24.75 40.0188 24.75 38.5V24.75C24.75 23.2312 25.9812 22 27.5 22Z" fill="currentColor" />
</svg>
</div>
<div class="flex-1">
<h3 class="text-sm font-semibold text-gray-700">New update available</h3>
<div class="mt-1">
<p class="text-sm text-gray-600">A new update is available for the application. You can now update the application to the latest version.</p>
</div>
<div class="mt-3 flex gap-x-3">
<button type="button" class="relative text-sm font-semibold text-gray-700 hover:text-gray-500">
Learn more
<span class="absolute -inset-1"></span>
</button>
<button type="button" class="relative text-sm font-semibold text-gray-700 hover:text-gray-500">
Dismiss
<span class="absolute -inset-1"></span>
</button>
</div>
</div>
</div>
</div>
</div><!-- Success alert -->
<div class="mx-auto w-full max-w-4xl">
<div class="relative rounded-lg bg-green-50 p-4 ring-1 ring-inset ring-green-200">
<div class="flex flex-col items-start gap-4 sm:flex-row">
<div class="shrink-0">
<svg aria-hidden="true" class="size-5 text-green-500" viewBox="0 0 55 56" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M43.8919 18.4573C45.1123 19.6777 45.1123 21.6563 43.8919 22.8767L25.9716 40.797C24.7513 42.0173 22.7727 42.0173 21.5523 40.797L13.5257 32.771C12.3053 31.5507 12.3052 29.572 13.5256 28.3516C14.7459 27.1312 16.7245 27.1311 17.945 28.3515L23.7618 34.1679L39.4725 18.4573C40.6929 17.2369 42.6715 17.2369 43.8919 18.4573Z" fill="currentColor" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M27.5 5.66699C15.0736 5.66699 5 15.7406 5 28.167C5 40.5934 15.0736 50.667 27.5 50.667C39.9264 50.667 50 40.5934 50 28.167C50 15.7406 39.9264 5.66699 27.5 5.66699ZM0 28.167C0 12.9792 12.3122 0.666992 27.5 0.666992C42.6878 0.666992 55 12.9792 55 28.167C55 43.3548 42.6878 55.667 27.5 55.667C12.3122 55.667 0 43.3548 0 28.167Z" fill="currentColor" />
</svg>
</div>
<div class="flex-1">
<h3 class="text-sm font-semibold text-green-700">Successfully saved!</h3>
<div class="mt-1">
<p class="text-sm text-green-600">Your changes have been saved successfully. You can view the updated information on the dashboard.</p>
</div>
</div>
<div class="absolute right-4 top-4 shrink-0 sm:static sm:right-auto sm:top-auto">
<button type="button" class="group relative isolate text-green-500">
<span class="sr-only">Dismiss</span>
<svg aria-hidden="true" class="size-5" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M15.573 41.6601C14.809 42.4242 14.809 43.6628 15.573 44.4269C16.3371 45.191 17.5759 45.191 18.34 44.4269L15.573 41.6601ZM31.3834 31.3834C32.1475 30.6193 32.1475 29.3807 31.3834 28.6166C30.6193 27.8525 29.3807 27.8525 28.6166 28.6166L31.3834 31.3834ZM28.6166 28.6166C27.8525 29.3807 27.8525 30.6193 28.6166 31.3834C29.3807 32.1475 30.6193 32.1475 31.3834 31.3834L28.6166 28.6166ZM44.4269 18.34C45.191 17.5759 45.191 16.3371 44.4269 15.573C43.6628 14.809 42.4242 14.809 41.6601 15.573L44.4269 18.34ZM31.3834 28.6166C30.6193 27.8525 29.3807 27.8525 28.6166 28.6166C27.8525 29.3807 27.8525 30.6193 28.6166 31.3834L31.3834 28.6166ZM41.6601 44.4269C42.4242 45.191 43.6628 45.191 44.4269 44.4269C45.191 43.6628 45.191 42.4242 44.4269 41.6601L41.6601 44.4269ZM28.6166 31.3834C29.3807 32.1475 30.6193 32.1475 31.3834 31.3834C32.1475 30.6193 32.1475 29.3807 31.3834 28.6166L28.6166 31.3834ZM18.34 15.573C17.5759 14.809 16.3371 14.809 15.573 15.573C14.809 16.3371 14.809 17.5759 15.573 18.34L18.34 15.573ZM18.34 44.4269L31.3834 31.3834L28.6166 28.6166L15.573 41.6601L18.34 44.4269ZM31.3834 31.3834L44.4269 18.34L41.6601 15.573L28.6166 28.6166L31.3834 31.3834ZM28.6166 31.3834L41.6601 44.4269L44.4269 41.6601L31.3834 28.6166L28.6166 31.3834ZM31.3834 28.6166L18.34 15.573L15.573 18.34L28.6166 31.3834L31.3834 28.6166Z" fill="currentColor" />
</svg>
<span class="absolute -inset-1.5 -z-10 rounded-lg group-hover:bg-green-100"></span>
</button>
</div>
</div>
</div>
</div>
<!-- Warning alert -->
<div class="mx-auto w-full max-w-4xl">
<div class="relative rounded-lg bg-yellow-50 p-4 ring-1 ring-inset ring-yellow-300">
<div class="flex flex-col items-start gap-4 sm:flex-row">
<div class="shrink-0">
<svg aria-hidden="true" class="size-5 text-yellow-500" viewBox="0 0 55 54" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M19.9663 4.54867C23.1584 -1.51623 31.8415 -1.51622 35.0335 4.5487L35.0336 4.54875L54.0083 40.6026C54.0084 40.6029 54.0085 40.6031 54.0087 40.6034C56.993 46.2711 52.8794 53.0796 46.475 53.0796H8.52485C2.11871 53.0796 -1.9923 46.2696 0.991191 40.6006L0.991245 40.6005L19.9663 4.5487C19.9663 4.54869 19.9663 4.54868 19.9663 4.54867ZM30.0114 7.19191C28.9471 5.16965 26.0528 5.16965 24.9884 7.19191L24.9884 7.19193L6.01337 43.2436C6.01336 43.2437 6.01334 43.2437 6.01332 43.2437C5.01859 45.134 6.38982 47.4044 8.52485 47.4044H46.475C48.6115 47.4044 49.9801 45.1331 48.9869 43.2473L48.9865 43.2465L30.0114 7.19191ZM27.4999 16.1907C29.0671 16.1907 30.3375 17.4611 30.3375 19.0283V30.3787C30.3375 31.9459 29.0671 33.2163 27.4999 33.2163C25.9328 33.2163 24.6623 31.9459 24.6623 30.3787V19.0283C24.6623 17.4611 25.9328 16.1907 27.4999 16.1907ZM27.4999 36.0539C29.0671 36.0539 30.3375 37.3244 30.3375 38.8915V38.9199C30.3375 40.4871 29.0671 41.7575 27.4999 41.7575C25.9328 41.7575 24.6623 40.4871 24.6623 38.9199V38.8915C24.6623 37.3244 25.9328 36.0539 27.4999 36.0539Z" fill="currentColor" />
</svg>
</div>
<div class="flex-1">
<h3 class="text-sm font-semibold text-yellow-700">Something went wrong</h3>
<div class="mt-1">
<p class="text-sm text-yellow-600">There was a problem with your request. Please try again later. If the problem persists, please contact support.</p>
</div>
</div>
<div class="absolute right-4 top-4 shrink-0 sm:static sm:right-auto sm:top-auto">
<button type="button" class="group relative isolate text-yellow-500">
<span class="sr-only">Dismiss</span>
<svg aria-hidden="true" class="size-5" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M15.573 41.6601C14.809 42.4242 14.809 43.6628 15.573 44.4269C16.3371 45.191 17.5759 45.191 18.34 44.4269L15.573 41.6601ZM31.3834 31.3834C32.1475 30.6193 32.1475 29.3807 31.3834 28.6166C30.6193 27.8525 29.3807 27.8525 28.6166 28.6166L31.3834 31.3834ZM28.6166 28.6166C27.8525 29.3807 27.8525 30.6193 28.6166 31.3834C29.3807 32.1475 30.6193 32.1475 31.3834 31.3834L28.6166 28.6166ZM44.4269 18.34C45.191 17.5759 45.191 16.3371 44.4269 15.573C43.6628 14.809 42.4242 14.809 41.6601 15.573L44.4269 18.34ZM31.3834 28.6166C30.6193 27.8525 29.3807 27.8525 28.6166 28.6166C27.8525 29.3807 27.8525 30.6193 28.6166 31.3834L31.3834 28.6166ZM41.6601 44.4269C42.4242 45.191 43.6628 45.191 44.4269 44.4269C45.191 43.6628 45.191 42.4242 44.4269 41.6601L41.6601 44.4269ZM28.6166 31.3834C29.3807 32.1475 30.6193 32.1475 31.3834 31.3834C32.1475 30.6193 32.1475 29.3807 31.3834 28.6166L28.6166 31.3834ZM18.34 15.573C17.5759 14.809 16.3371 14.809 15.573 15.573C14.809 16.3371 14.809 17.5759 15.573 18.34L18.34 15.573ZM18.34 44.4269L31.3834 31.3834L28.6166 28.6166L15.573 41.6601L18.34 44.4269ZM31.3834 31.3834L44.4269 18.34L41.6601 15.573L28.6166 28.6166L31.3834 31.3834ZM28.6166 31.3834L41.6601 44.4269L44.4269 41.6601L31.3834 28.6166L28.6166 31.3834ZM31.3834 28.6166L18.34 15.573L15.573 18.34L28.6166 31.3834L31.3834 28.6166Z" fill="currentColor" />
</svg>
<span class="absolute -inset-1.5 -z-10 rounded-lg group-hover:bg-yellow-100"></span>
</button>
</div>
</div>
</div>
</div>
<!-- Error alert -->
<div class="mx-auto w-full max-w-4xl">
<div class="relative rounded-lg bg-red-50 p-4 ring-1 ring-inset ring-red-200">
<div class="flex flex-col items-start gap-4 sm:flex-row">
<div class="shrink-0">
<svg aria-hidden="true" class="size-5 text-red-500" viewBox="0 0 55 55" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M27.5 5C15.0736 5 5 15.0736 5 27.5C5 39.9265 15.0736 50 27.5 50C39.9265 50 50 39.9265 50 27.5C50 15.0736 39.9265 5 27.5 5ZM0 27.5C0 12.3122 12.3122 0 27.5 0C42.6879 0 55 12.3122 55 27.5C55 42.6879 42.6879 55 27.5 55C12.3122 55 0 42.6879 0 27.5ZM14.6211 14.6211C15.5975 13.6448 17.1804 13.6448 18.1567 14.6211L27.5 23.9645L36.8433 14.6211C37.8197 13.6448 39.4026 13.6448 40.3789 14.6211C41.3552 15.5974 41.3552 17.1803 40.3789 18.1567L31.0355 27.5L40.3789 36.8433C41.3552 37.8197 41.3552 39.4026 40.3789 40.3789C39.4026 41.3552 37.8197 41.3552 36.8433 40.3789L27.5 31.0355L18.1567 40.3789C17.1803 41.3552 15.5974 41.3552 14.6211 40.3789C13.6448 39.4026 13.6448 37.8197 14.6211 36.8433L23.9645 27.5L14.6211 18.1567C13.6448 17.1803 13.6448 15.5974 14.6211 14.6211Z" fill="currentColor" />
</svg>
</div>
<div class="flex-1">
<h3 class="text-sm font-semibold text-red-700">An error occurred</h3>
<div class="mt-1">
<p class="text-sm text-red-600">An unexpected error occurred. Please try again later. If the problem persists, please contact support.</p>
</div>
</div>
<div class="absolute right-4 top-4 shrink-0 sm:static sm:right-auto sm:top-auto">
<button type="button" class="group relative isolate text-red-500">
<span class="sr-only">Dismiss</span>
<svg aria-hidden="true" class="size-5" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M15.573 41.6601C14.809 42.4242 14.809 43.6628 15.573 44.4269C16.3371 45.191 17.5759 45.191 18.34 44.4269L15.573 41.6601ZM31.3834 31.3834C32.1475 30.6193 32.1475 29.3807 31.3834 28.6166C30.6193 27.8525 29.3807 27.8525 28.6166 28.6166L31.3834 31.3834ZM28.6166 28.6166C27.8525 29.3807 27.8525 30.6193 28.6166 31.3834C29.3807 32.1475 30.6193 32.1475 31.3834 31.3834L28.6166 28.6166ZM44.4269 18.34C45.191 17.5759 45.191 16.3371 44.4269 15.573C43.6628 14.809 42.4242 14.809 41.6601 15.573L44.4269 18.34ZM31.3834 28.6166C30.6193 27.8525 29.3807 27.8525 28.6166 28.6166C27.8525 29.3807 27.8525 30.6193 28.6166 31.3834L31.3834 28.6166ZM41.6601 44.4269C42.4242 45.191 43.6628 45.191 44.4269 44.4269C45.191 43.6628 45.191 42.4242 44.4269 41.6601L41.6601 44.4269ZM28.6166 31.3834C29.3807 32.1475 30.6193 32.1475 31.3834 31.3834C32.1475 30.6193 32.1475 29.3807 31.3834 28.6166L28.6166 31.3834ZM18.34 15.573C17.5759 14.809 16.3371 14.809 15.573 15.573C14.809 16.3371 14.809 17.5759 15.573 18.34L18.34 15.573ZM18.34 44.4269L31.3834 31.3834L28.6166 28.6166L15.573 41.6601L18.34 44.4269ZM31.3834 31.3834L44.4269 18.34L41.6601 15.573L28.6166 28.6166L31.3834 31.3834ZM28.6166 31.3834L41.6601 44.4269L44.4269 41.6601L31.3834 28.6166L28.6166 31.3834ZM31.3834 28.6166L18.34 15.573L15.573 18.34L28.6166 31.3834L31.3834 28.6166Z" fill="currentColor" />
</svg>
<span class="absolute -inset-1.5 -z-10 rounded-lg group-hover:bg-red-100"></span>
</button>
</div>
</div>
</div>
</div>
<!-- Info alert -->
<div class="mx-auto w-full max-w-4xl">
<div class="relative rounded-lg bg-blue-50 p-4 ring-1 ring-inset ring-blue-200">
<div class="flex flex-col items-start gap-4 sm:flex-row">
<div class="shrink-0">
<svg aria-hidden="true" class="size-5 text-blue-500" viewBox="0 0 55 55" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M27.5 5.5C15.3497 5.5 5.5 15.3497 5.5 27.5C5.5 39.6504 15.3497 49.5 27.5 49.5C39.6504 49.5 49.5 39.6504 49.5 27.5C49.5 15.3497 39.6504 5.5 27.5 5.5ZM0 27.5C0 12.3122 12.3122 0 27.5 0C42.6879 0 55 12.3122 55 27.5C55 42.6879 42.6879 55 27.5 55C12.3122 55 0 42.6879 0 27.5ZM24.6131 16.5C24.6131 14.9812 25.8443 13.75 27.3631 13.75H27.6369C29.1557 13.75 30.387 14.9812 30.387 16.5V16.775C30.387 18.2916 29.1591 19.522 27.6425 19.525L27.3686 19.5255C26.6383 19.527 25.9374 19.2379 25.4205 18.722C24.9035 18.2062 24.6131 17.5058 24.6131 16.7755V16.5ZM27.5 22C29.0188 22 30.25 23.2312 30.25 24.75V38.5C30.25 40.0188 29.0188 41.25 27.5 41.25C25.9812 41.25 24.75 40.0188 24.75 38.5V24.75C24.75 23.2312 25.9812 22 27.5 22Z" fill="currentColor" />
</svg>
</div>
<div class="flex-1">
<h3 class="text-sm font-semibold text-blue-700">We've released a new feature!</h3>
<div class="mt-1">
<p class="text-sm text-blue-600">New feature released that allows you to customize your profile. You can now add a profile picture and a bio to your profile.</p>
</div>
</div>
<div class="absolute right-4 top-4 shrink-0 sm:static sm:right-auto sm:top-auto">
<button type="button" class="group relative isolate text-blue-500">
<span class="sr-only">Dismiss</span>
<svg aria-hidden="true" class="size-5" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M15.573 41.6601C14.809 42.4242 14.809 43.6628 15.573 44.4269C16.3371 45.191 17.5759 45.191 18.34 44.4269L15.573 41.6601ZM31.3834 31.3834C32.1475 30.6193 32.1475 29.3807 31.3834 28.6166C30.6193 27.8525 29.3807 27.8525 28.6166 28.6166L31.3834 31.3834ZM28.6166 28.6166C27.8525 29.3807 27.8525 30.6193 28.6166 31.3834C29.3807 32.1475 30.6193 32.1475 31.3834 31.3834L28.6166 28.6166ZM44.4269 18.34C45.191 17.5759 45.191 16.3371 44.4269 15.573C43.6628 14.809 42.4242 14.809 41.6601 15.573L44.4269 18.34ZM31.3834 28.6166C30.6193 27.8525 29.3807 27.8525 28.6166 28.6166C27.8525 29.3807 27.8525 30.6193 28.6166 31.3834L31.3834 28.6166ZM41.6601 44.4269C42.4242 45.191 43.6628 45.191 44.4269 44.4269C45.191 43.6628 45.191 42.4242 44.4269 41.6601L41.6601 44.4269ZM28.6166 31.3834C29.3807 32.1475 30.6193 32.1475 31.3834 31.3834C32.1475 30.6193 32.1475 29.3807 31.3834 28.6166L28.6166 31.3834ZM18.34 15.573C17.5759 14.809 16.3371 14.809 15.573 15.573C14.809 16.3371 14.809 17.5759 15.573 18.34L18.34 15.573ZM18.34 44.4269L31.3834 31.3834L28.6166 28.6166L15.573 41.6601L18.34 44.4269ZM31.3834 31.3834L44.4269 18.34L41.6601 15.573L28.6166 28.6166L31.3834 31.3834ZM28.6166 31.3834L41.6601 44.4269L44.4269 41.6601L31.3834 28.6166L28.6166 31.3834ZM31.3834 28.6166L18.34 15.573L15.573 18.34L28.6166 31.3834L31.3834 28.6166Z" fill="currentColor" />
</svg>
<span class="absolute -inset-1.5 -z-10 rounded-lg group-hover:bg-blue-100"></span>
</button>
</div>
</div>
</div>
</div>
<!-- Neutral alert -->
<div class="mx-auto w-full max-w-4xl">
<div class="relative rounded-lg bg-gray-50 p-4 ring-1 ring-inset ring-gray-200">
<div class="flex flex-col items-start gap-4 sm:flex-row">
<div class="shrink-0">
<svg aria-hidden="true" class="size-5 text-gray-500" viewBox="0 0 55 55" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M27.5 5.5C15.3497 5.5 5.5 15.3497 5.5 27.5C5.5 39.6504 15.3497 49.5 27.5 49.5C39.6504 49.5 49.5 39.6504 49.5 27.5C49.5 15.3497 39.6504 5.5 27.5 5.5ZM0 27.5C0 12.3122 12.3122 0 27.5 0C42.6879 0 55 12.3122 55 27.5C55 42.6879 42.6879 55 27.5 55C12.3122 55 0 42.6879 0 27.5ZM24.6131 16.5C24.6131 14.9812 25.8443 13.75 27.3631 13.75H27.6369C29.1557 13.75 30.387 14.9812 30.387 16.5V16.775C30.387 18.2916 29.1591 19.522 27.6425 19.525L27.3686 19.5255C26.6383 19.527 25.9374 19.2379 25.4205 18.722C24.9035 18.2062 24.6131 17.5058 24.6131 16.7755V16.5ZM27.5 22C29.0188 22 30.25 23.2312 30.25 24.75V38.5C30.25 40.0188 29.0188 41.25 27.5 41.25C25.9812 41.25 24.75 40.0188 24.75 38.5V24.75C24.75 23.2312 25.9812 22 27.5 22Z" fill="currentColor" />
</svg>
</div>
<div class="flex-1">
<h3 class="text-sm font-semibold text-gray-700">New update available</h3>
<div class="mt-1">
<p class="text-sm text-gray-600">A new update is available for the application. You can now update the application to the latest version.</p>
</div>
</div>
<div class="absolute right-4 top-4 shrink-0 sm:static sm:right-auto sm:top-auto">
<button type="button" class="group relative isolate text-gray-500">
<span class="sr-only">Dismiss</span>
<svg aria-hidden="true" class="size-5" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M15.573 41.6601C14.809 42.4242 14.809 43.6628 15.573 44.4269C16.3371 45.191 17.5759 45.191 18.34 44.4269L15.573 41.6601ZM31.3834 31.3834C32.1475 30.6193 32.1475 29.3807 31.3834 28.6166C30.6193 27.8525 29.3807 27.8525 28.6166 28.6166L31.3834 31.3834ZM28.6166 28.6166C27.8525 29.3807 27.8525 30.6193 28.6166 31.3834C29.3807 32.1475 30.6193 32.1475 31.3834 31.3834L28.6166 28.6166ZM44.4269 18.34C45.191 17.5759 45.191 16.3371 44.4269 15.573C43.6628 14.809 42.4242 14.809 41.6601 15.573L44.4269 18.34ZM31.3834 28.6166C30.6193 27.8525 29.3807 27.8525 28.6166 28.6166C27.8525 29.3807 27.8525 30.6193 28.6166 31.3834L31.3834 28.6166ZM41.6601 44.4269C42.4242 45.191 43.6628 45.191 44.4269 44.4269C45.191 43.6628 45.191 42.4242 44.4269 41.6601L41.6601 44.4269ZM28.6166 31.3834C29.3807 32.1475 30.6193 32.1475 31.3834 31.3834C32.1475 30.6193 32.1475 29.3807 31.3834 28.6166L28.6166 31.3834ZM18.34 15.573C17.5759 14.809 16.3371 14.809 15.573 15.573C14.809 16.3371 14.809 17.5759 15.573 18.34L18.34 15.573ZM18.34 44.4269L31.3834 31.3834L28.6166 28.6166L15.573 41.6601L18.34 44.4269ZM31.3834 31.3834L44.4269 18.34L41.6601 15.573L28.6166 28.6166L31.3834 31.3834ZM28.6166 31.3834L41.6601 44.4269L44.4269 41.6601L31.3834 28.6166L28.6166 31.3834ZM31.3834 28.6166L18.34 15.573L15.573 18.34L28.6166 31.3834L31.3834 28.6166Z" fill="currentColor" />
</svg>
<span class="absolute -inset-1.5 -z-10 rounded-lg group-hover:bg-gray-100"></span>
</button>
</div>
</div>
</div>
</div><!-- Success alert -->
<div class="mx-auto w-full max-w-4xl overflow-hidden rounded-lg">
<div class="border-l-4 border-green-500 bg-green-50 p-4">
<div class="flex items-start gap-x-4">
<div class="shrink-0">
<svg aria-hidden="true" class="size-5 text-green-500" viewBox="0 0 55 56" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M43.8919 18.4573C45.1123 19.6777 45.1123 21.6563 43.8919 22.8767L25.9716 40.797C24.7513 42.0173 22.7727 42.0173 21.5523 40.797L13.5257 32.771C12.3053 31.5507 12.3052 29.572 13.5256 28.3516C14.7459 27.1312 16.7245 27.1311 17.945 28.3515L23.7618 34.1679L39.4725 18.4573C40.6929 17.2369 42.6715 17.2369 43.8919 18.4573Z" fill="currentColor" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M27.5 5.66699C15.0736 5.66699 5 15.7406 5 28.167C5 40.5934 15.0736 50.667 27.5 50.667C39.9264 50.667 50 40.5934 50 28.167C50 15.7406 39.9264 5.66699 27.5 5.66699ZM0 28.167C0 12.9792 12.3122 0.666992 27.5 0.666992C42.6878 0.666992 55 12.9792 55 28.167C55 43.3548 42.6878 55.667 27.5 55.667C12.3122 55.667 0 43.3548 0 28.167Z" fill="currentColor" />
</svg>
</div>
<div class="flex-1">
<p class="text-sm text-green-700">
Thanks!
<span class="font-semibold">1000 credits</span>
have been added to your account.
</p>
</div>
</div>
</div>
</div>
<!-- Warning alert -->
<div class="mx-auto w-full max-w-4xl overflow-hidden rounded-lg">
<div class="border-l-4 border-yellow-500 bg-yellow-50 p-4">
<div class="flex items-start gap-x-4">
<div class="shrink-0">
<svg aria-hidden="true" class="size-5 text-yellow-500" viewBox="0 0 55 54" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M19.9663 4.54867C23.1584 -1.51623 31.8415 -1.51622 35.0335 4.5487L35.0336 4.54875L54.0083 40.6026C54.0084 40.6029 54.0085 40.6031 54.0087 40.6034C56.993 46.2711 52.8794 53.0796 46.475 53.0796H8.52485C2.11871 53.0796 -1.9923 46.2696 0.991191 40.6006L0.991245 40.6005L19.9663 4.5487C19.9663 4.54869 19.9663 4.54868 19.9663 4.54867ZM30.0114 7.19191C28.9471 5.16965 26.0528 5.16965 24.9884 7.19191L24.9884 7.19193L6.01337 43.2436C6.01336 43.2437 6.01334 43.2437 6.01332 43.2437C5.01859 45.134 6.38982 47.4044 8.52485 47.4044H46.475C48.6115 47.4044 49.9801 45.1331 48.9869 43.2473L48.9865 43.2465L30.0114 7.19191ZM27.4999 16.1907C29.0671 16.1907 30.3375 17.4611 30.3375 19.0283V30.3787C30.3375 31.9459 29.0671 33.2163 27.4999 33.2163C25.9328 33.2163 24.6623 31.9459 24.6623 30.3787V19.0283C24.6623 17.4611 25.9328 16.1907 27.4999 16.1907ZM27.4999 36.0539C29.0671 36.0539 30.3375 37.3244 30.3375 38.8915V38.9199C30.3375 40.4871 29.0671 41.7575 27.4999 41.7575C25.9328 41.7575 24.6623 40.4871 24.6623 38.9199V38.8915C24.6623 37.3244 25.9328 36.0539 27.4999 36.0539Z" fill="currentColor" />
</svg>
</div>
<div class="flex-1">
<p class="text-sm text-yellow-700">
Your remaining credits will expire in
<span class="font-semibold">3 days</span>
. Please use them before they expire.
</p>
</div>
</div>
</div>
</div>
<!-- Error alert -->
<div class="mx-auto w-full max-w-4xl overflow-hidden rounded-lg">
<div class="border-l-4 border-red-500 bg-red-50 p-4">
<div class="flex items-start gap-x-4">
<div class="shrink-0">
<svg aria-hidden="true" class="size-5 text-red-500" viewBox="0 0 55 55" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M27.5 5C15.0736 5 5 15.0736 5 27.5C5 39.9265 15.0736 50 27.5 50C39.9265 50 50 39.9265 50 27.5C50 15.0736 39.9265 5 27.5 5ZM0 27.5C0 12.3122 12.3122 0 27.5 0C42.6879 0 55 12.3122 55 27.5C55 42.6879 42.6879 55 27.5 55C12.3122 55 0 42.6879 0 27.5ZM14.6211 14.6211C15.5975 13.6448 17.1804 13.6448 18.1567 14.6211L27.5 23.9645L36.8433 14.6211C37.8197 13.6448 39.4026 13.6448 40.3789 14.6211C41.3552 15.5974 41.3552 17.1803 40.3789 18.1567L31.0355 27.5L40.3789 36.8433C41.3552 37.8197 41.3552 39.4026 40.3789 40.3789C39.4026 41.3552 37.8197 41.3552 36.8433 40.3789L27.5 31.0355L18.1567 40.3789C17.1803 41.3552 15.5974 41.3552 14.6211 40.3789C13.6448 39.4026 13.6448 37.8197 14.6211 36.8433L23.9645 27.5L14.6211 18.1567C13.6448 17.1803 13.6448 15.5974 14.6211 14.6211Z" fill="currentColor" />
</svg>
</div>
<div class="flex-1">
<p class="text-sm text-red-700">
All credits have been exhausted.
<a href="#" class="font-medium underline hover:text-red-600">Please purchase more credits to continue using our services</a>.
</p>
</div>
</div>
</div>
</div>
<!-- Info alert -->
<div class="mx-auto w-full max-w-4xl overflow-hidden rounded-lg">
<div class="border-l-4 border-blue-500 bg-blue-50 p-4">
<div class="flex items-start gap-x-4">
<div class="shrink-0">
<svg aria-hidden="true" class="size-5 text-blue-500" viewBox="0 0 55 55" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M27.5 5.5C15.3497 5.5 5.5 15.3497 5.5 27.5C5.5 39.6504 15.3497 49.5 27.5 49.5C39.6504 49.5 49.5 39.6504 49.5 27.5C49.5 15.3497 39.6504 5.5 27.5 5.5ZM0 27.5C0 12.3122 12.3122 0 27.5 0C42.6879 0 55 12.3122 55 27.5C55 42.6879 42.6879 55 27.5 55C12.3122 55 0 42.6879 0 27.5ZM24.6131 16.5C24.6131 14.9812 25.8443 13.75 27.3631 13.75H27.6369C29.1557 13.75 30.387 14.9812 30.387 16.5V16.775C30.387 18.2916 29.1591 19.522 27.6425 19.525L27.3686 19.5255C26.6383 19.527 25.9374 19.2379 25.4205 18.722C24.9035 18.2062 24.6131 17.5058 24.6131 16.7755V16.5ZM27.5 22C29.0188 22 30.25 23.2312 30.25 24.75V38.5C30.25 40.0188 29.0188 41.25 27.5 41.25C25.9812 41.25 24.75 40.0188 24.75 38.5V24.75C24.75 23.2312 25.9812 22 27.5 22Z" fill="currentColor" />
</svg>
</div>
<div class="flex-1">
<p class="text-sm text-blue-700">
Price of
<span class="font-semibold">1 credit</span>
has been reduced from $1 to $0.5.
</p>
</div>
</div>
</div>
</div>
<!-- Neutral alert -->
<div class="mx-auto w-full max-w-4xl overflow-hidden rounded-lg">
<div class="border-l-4 border-gray-500 bg-gray-50 p-4">
<div class="flex items-start gap-x-4">
<div class="shrink-0">
<svg aria-hidden="true" class="size-5 text-gray-500" viewBox="0 0 55 55" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M27.5 5.5C15.3497 5.5 5.5 15.3497 5.5 27.5C5.5 39.6504 15.3497 49.5 27.5 49.5C39.6504 49.5 49.5 39.6504 49.5 27.5C49.5 15.3497 39.6504 5.5 27.5 5.5ZM0 27.5C0 12.3122 12.3122 0 27.5 0C42.6879 0 55 12.3122 55 27.5C55 42.6879 42.6879 55 27.5 55C12.3122 55 0 42.6879 0 27.5ZM24.6131 16.5C24.6131 14.9812 25.8443 13.75 27.3631 13.75H27.6369C29.1557 13.75 30.387 14.9812 30.387 16.5V16.775C30.387 18.2916 29.1591 19.522 27.6425 19.525L27.3686 19.5255C26.6383 19.527 25.9374 19.2379 25.4205 18.722C24.9035 18.2062 24.6131 17.5058 24.6131 16.7755V16.5ZM27.5 22C29.0188 22 30.25 23.2312 30.25 24.75V38.5C30.25 40.0188 29.0188 41.25 27.5 41.25C25.9812 41.25 24.75 40.0188 24.75 38.5V24.75C24.75 23.2312 25.9812 22 27.5 22Z" fill="currentColor" />
</svg>
</div>
<div class="flex-1">
<p class="text-sm text-gray-700">
Please verify your email address to continue using our services.
<a href="#" class="font-medium underline hover:text-gray-500">Resend verification email</a>.
</p>
</div>
</div>
</div>
</div><!-- Success alert -->
<div class="mx-auto w-full max-w-4xl">
<div class="rounded-lg p-4 ring-1 ring-inset ring-green-200">
<div class="flex items-start gap-x-4">
<div class="shrink-0">
<svg aria-hidden="true" class="size-5 text-green-500" viewBox="0 0 55 56" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M43.8919 18.4573C45.1123 19.6777 45.1123 21.6563 43.8919 22.8767L25.9716 40.797C24.7513 42.0173 22.7727 42.0173 21.5523 40.797L13.5257 32.771C12.3053 31.5507 12.3052 29.572 13.5256 28.3516C14.7459 27.1312 16.7245 27.1311 17.945 28.3515L23.7618 34.1679L39.4725 18.4573C40.6929 17.2369 42.6715 17.2369 43.8919 18.4573Z" fill="currentColor" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M27.5 5.66699C15.0736 5.66699 5 15.7406 5 28.167C5 40.5934 15.0736 50.667 27.5 50.667C39.9264 50.667 50 40.5934 50 28.167C50 15.7406 39.9264 5.66699 27.5 5.66699ZM0 28.167C0 12.9792 12.3122 0.666992 27.5 0.666992C42.6878 0.666992 55 12.9792 55 28.167C55 43.3548 42.6878 55.667 27.5 55.667C12.3122 55.667 0 43.3548 0 28.167Z" fill="currentColor" />
</svg>
</div>
<div class="flex-1">
<h3 class="text-sm font-semibold text-green-700">Successfully saved!</h3>
<div class="mt-1">
<p class="text-sm text-green-600">Your changes have been saved successfully. You can view the updated information on the dashboard.</p>
</div>
</div>
</div>
</div>
</div>
<!-- Warning alert -->
<div class="mx-auto w-full max-w-4xl">
<div class="rounded-lg p-4 ring-1 ring-inset ring-yellow-300">
<div class="flex items-start gap-x-4">
<div class="shrink-0">
<svg aria-hidden="true" class="size-5 text-yellow-500" viewBox="0 0 55 54" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M19.9663 4.54867C23.1584 -1.51623 31.8415 -1.51622 35.0335 4.5487L35.0336 4.54875L54.0083 40.6026C54.0084 40.6029 54.0085 40.6031 54.0087 40.6034C56.993 46.2711 52.8794 53.0796 46.475 53.0796H8.52485C2.11871 53.0796 -1.9923 46.2696 0.991191 40.6006L0.991245 40.6005L19.9663 4.5487C19.9663 4.54869 19.9663 4.54868 19.9663 4.54867ZM30.0114 7.19191C28.9471 5.16965 26.0528 5.16965 24.9884 7.19191L24.9884 7.19193L6.01337 43.2436C6.01336 43.2437 6.01334 43.2437 6.01332 43.2437C5.01859 45.134 6.38982 47.4044 8.52485 47.4044H46.475C48.6115 47.4044 49.9801 45.1331 48.9869 43.2473L48.9865 43.2465L30.0114 7.19191ZM27.4999 16.1907C29.0671 16.1907 30.3375 17.4611 30.3375 19.0283V30.3787C30.3375 31.9459 29.0671 33.2163 27.4999 33.2163C25.9328 33.2163 24.6623 31.9459 24.6623 30.3787V19.0283C24.6623 17.4611 25.9328 16.1907 27.4999 16.1907ZM27.4999 36.0539C29.0671 36.0539 30.3375 37.3244 30.3375 38.8915V38.9199C30.3375 40.4871 29.0671 41.7575 27.4999 41.7575C25.9328 41.7575 24.6623 40.4871 24.6623 38.9199V38.8915C24.6623 37.3244 25.9328 36.0539 27.4999 36.0539Z" fill="currentColor" />
</svg>
</div>
<div class="flex-1">
<h3 class="text-sm font-semibold text-yellow-700">Something went wrong</h3>
<div class="mt-1">
<p class="text-sm text-yellow-600">There was a problem with your request. Please try again later. If the problem persists, please contact support.</p>
</div>
</div>
</div>
</div>
</div>
<!-- Error alert -->
<div class="mx-auto w-full max-w-4xl">
<div class="rounded-lg p-4 ring-1 ring-inset ring-red-200">
<div class="flex items-start gap-x-4">
<div class="shrink-0">
<svg aria-hidden="true" class="size-5 text-red-500" viewBox="0 0 55 55" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M27.5 5C15.0736 5 5 15.0736 5 27.5C5 39.9265 15.0736 50 27.5 50C39.9265 50 50 39.9265 50 27.5C50 15.0736 39.9265 5 27.5 5ZM0 27.5C0 12.3122 12.3122 0 27.5 0C42.6879 0 55 12.3122 55 27.5C55 42.6879 42.6879 55 27.5 55C12.3122 55 0 42.6879 0 27.5ZM14.6211 14.6211C15.5975 13.6448 17.1804 13.6448 18.1567 14.6211L27.5 23.9645L36.8433 14.6211C37.8197 13.6448 39.4026 13.6448 40.3789 14.6211C41.3552 15.5974 41.3552 17.1803 40.3789 18.1567L31.0355 27.5L40.3789 36.8433C41.3552 37.8197 41.3552 39.4026 40.3789 40.3789C39.4026 41.3552 37.8197 41.3552 36.8433 40.3789L27.5 31.0355L18.1567 40.3789C17.1803 41.3552 15.5974 41.3552 14.6211 40.3789C13.6448 39.4026 13.6448 37.8197 14.6211 36.8433L23.9645 27.5L14.6211 18.1567C13.6448 17.1803 13.6448 15.5974 14.6211 14.6211Z" fill="currentColor" />
</svg>
</div>
<div class="flex-1">
<h3 class="text-sm font-semibold text-red-700">An error occurred</h3>
<div class="mt-1">
<p class="text-sm text-red-600">An unexpected error occurred. Please try again later. If the problem persists, please contact support.</p>
</div>
</div>
</div>
</div>
</div>
<!-- Info alert -->
<div class="mx-auto w-full max-w-4xl">
<div class="rounded-lg p-4 ring-1 ring-inset ring-blue-200">
<div class="flex items-start gap-x-4">
<div class="shrink-0">
<svg aria-hidden="true" class="size-5 text-blue-500" viewBox="0 0 55 55" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M27.5 5.5C15.3497 5.5 5.5 15.3497 5.5 27.5C5.5 39.6504 15.3497 49.5 27.5 49.5C39.6504 49.5 49.5 39.6504 49.5 27.5C49.5 15.3497 39.6504 5.5 27.5 5.5ZM0 27.5C0 12.3122 12.3122 0 27.5 0C42.6879 0 55 12.3122 55 27.5C55 42.6879 42.6879 55 27.5 55C12.3122 55 0 42.6879 0 27.5ZM24.6131 16.5C24.6131 14.9812 25.8443 13.75 27.3631 13.75H27.6369C29.1557 13.75 30.387 14.9812 30.387 16.5V16.775C30.387 18.2916 29.1591 19.522 27.6425 19.525L27.3686 19.5255C26.6383 19.527 25.9374 19.2379 25.4205 18.722C24.9035 18.2062 24.6131 17.5058 24.6131 16.7755V16.5ZM27.5 22C29.0188 22 30.25 23.2312 30.25 24.75V38.5C30.25 40.0188 29.0188 41.25 27.5 41.25C25.9812 41.25 24.75 40.0188 24.75 38.5V24.75C24.75 23.2312 25.9812 22 27.5 22Z" fill="currentColor" />
</svg>
</div>
<div class="flex-1">
<h3 class="text-sm font-semibold text-blue-700">We've released a new feature!</h3>
<div class="mt-1">
<p class="text-sm text-blue-600">New feature released that allows you to customize your profile. You can now add a profile picture and a bio to your profile.</p>
</div>
</div>
</div>
</div>
</div>
<!-- Neutral alert -->
<div class="mx-auto w-full max-w-4xl">
<div class="rounded-lg p-4 ring-1 ring-inset ring-gray-200">
<div class="flex items-start gap-x-4">
<div class="shrink-0">
<svg aria-hidden="true" class="size-5 text-gray-500" viewBox="0 0 55 55" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M27.5 5.5C15.3497 5.5 5.5 15.3497 5.5 27.5C5.5 39.6504 15.3497 49.5 27.5 49.5C39.6504 49.5 49.5 39.6504 49.5 27.5C49.5 15.3497 39.6504 5.5 27.5 5.5ZM0 27.5C0 12.3122 12.3122 0 27.5 0C42.6879 0 55 12.3122 55 27.5C55 42.6879 42.6879 55 27.5 55C12.3122 55 0 42.6879 0 27.5ZM24.6131 16.5C24.6131 14.9812 25.8443 13.75 27.3631 13.75H27.6369C29.1557 13.75 30.387 14.9812 30.387 16.5V16.775C30.387 18.2916 29.1591 19.522 27.6425 19.525L27.3686 19.5255C26.6383 19.527 25.9374 19.2379 25.4205 18.722C24.9035 18.2062 24.6131 17.5058 24.6131 16.7755V16.5ZM27.5 22C29.0188 22 30.25 23.2312 30.25 24.75V38.5C30.25 40.0188 29.0188 41.25 27.5 41.25C25.9812 41.25 24.75 40.0188 24.75 38.5V24.75C24.75 23.2312 25.9812 22 27.5 22Z" fill="currentColor" />
</svg>
</div>
<div class="flex-1">
<h3 class="text-sm font-semibold text-gray-700">New update available</h3>
<div class="mt-1">
<p class="text-sm text-gray-600">A new update is available for the application. You can now update the application to the latest version.</p>
</div>
</div>
</div>
</div>
</div><!-- Success alert -->
<div class="mx-auto w-full max-w-4xl">
<div class="rounded-lg bg-green-50 p-4">
<div class="flex items-start gap-x-4">
<div class="shrink-0">
<svg aria-hidden="true" class="size-5 text-green-500" viewBox="0 0 55 56" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M43.8919 18.4573C45.1123 19.6777 45.1123 21.6563 43.8919 22.8767L25.9716 40.797C24.7513 42.0173 22.7727 42.0173 21.5523 40.797L13.5257 32.771C12.3053 31.5507 12.3052 29.572 13.5256 28.3516C14.7459 27.1312 16.7245 27.1311 17.945 28.3515L23.7618 34.1679L39.4725 18.4573C40.6929 17.2369 42.6715 17.2369 43.8919 18.4573Z" fill="currentColor" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M27.5 5.66699C15.0736 5.66699 5 15.7406 5 28.167C5 40.5934 15.0736 50.667 27.5 50.667C39.9264 50.667 50 40.5934 50 28.167C50 15.7406 39.9264 5.66699 27.5 5.66699ZM0 28.167C0 12.9792 12.3122 0.666992 27.5 0.666992C42.6878 0.666992 55 12.9792 55 28.167C55 43.3548 42.6878 55.667 27.5 55.667C12.3122 55.667 0 43.3548 0 28.167Z" fill="currentColor" />
</svg>
</div>
<div class="flex-1">
<h3 class="text-sm font-semibold text-green-700">Successfully saved!</h3>
<div class="mt-1">
<p class="text-sm text-green-600">Your changes have been saved successfully. You can view the updated information on the dashboard.</p>
</div>
</div>
</div>
</div>
</div>
<!-- Warning alert -->
<div class="mx-auto w-full max-w-4xl">
<div class="rounded-lg bg-yellow-50 p-4">
<div class="flex items-start gap-x-4">
<div class="shrink-0">
<svg aria-hidden="true" class="size-5 text-yellow-500" viewBox="0 0 55 54" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M19.9663 4.54867C23.1584 -1.51623 31.8415 -1.51622 35.0335 4.5487L35.0336 4.54875L54.0083 40.6026C54.0084 40.6029 54.0085 40.6031 54.0087 40.6034C56.993 46.2711 52.8794 53.0796 46.475 53.0796H8.52485C2.11871 53.0796 -1.9923 46.2696 0.991191 40.6006L0.991245 40.6005L19.9663 4.5487C19.9663 4.54869 19.9663 4.54868 19.9663 4.54867ZM30.0114 7.19191C28.9471 5.16965 26.0528 5.16965 24.9884 7.19191L24.9884 7.19193L6.01337 43.2436C6.01336 43.2437 6.01334 43.2437 6.01332 43.2437C5.01859 45.134 6.38982 47.4044 8.52485 47.4044H46.475C48.6115 47.4044 49.9801 45.1331 48.9869 43.2473L48.9865 43.2465L30.0114 7.19191ZM27.4999 16.1907C29.0671 16.1907 30.3375 17.4611 30.3375 19.0283V30.3787C30.3375 31.9459 29.0671 33.2163 27.4999 33.2163C25.9328 33.2163 24.6623 31.9459 24.6623 30.3787V19.0283C24.6623 17.4611 25.9328 16.1907 27.4999 16.1907ZM27.4999 36.0539C29.0671 36.0539 30.3375 37.3244 30.3375 38.8915V38.9199C30.3375 40.4871 29.0671 41.7575 27.4999 41.7575C25.9328 41.7575 24.6623 40.4871 24.6623 38.9199V38.8915C24.6623 37.3244 25.9328 36.0539 27.4999 36.0539Z" fill="currentColor" />
</svg>
</div>
<div class="flex-1">
<h3 class="text-sm font-semibold text-yellow-700">Something went wrong</h3>
<div class="mt-1">
<p class="text-sm text-yellow-600">There was a problem with your request. Please try again later. If the problem persists, please contact support.</p>
</div>
</div>
</div>
</div>
</div>
<!-- Error alert -->
<div class="mx-auto w-full max-w-4xl">
<div class="rounded-lg bg-red-50 p-4">
<div class="flex items-start gap-x-4">
<div class="shrink-0">
<svg aria-hidden="true" class="size-5 text-red-500" viewBox="0 0 55 55" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M27.5 5C15.0736 5 5 15.0736 5 27.5C5 39.9265 15.0736 50 27.5 50C39.9265 50 50 39.9265 50 27.5C50 15.0736 39.9265 5 27.5 5ZM0 27.5C0 12.3122 12.3122 0 27.5 0C42.6879 0 55 12.3122 55 27.5C55 42.6879 42.6879 55 27.5 55C12.3122 55 0 42.6879 0 27.5ZM14.6211 14.6211C15.5975 13.6448 17.1804 13.6448 18.1567 14.6211L27.5 23.9645L36.8433 14.6211C37.8197 13.6448 39.4026 13.6448 40.3789 14.6211C41.3552 15.5974 41.3552 17.1803 40.3789 18.1567L31.0355 27.5L40.3789 36.8433C41.3552 37.8197 41.3552 39.4026 40.3789 40.3789C39.4026 41.3552 37.8197 41.3552 36.8433 40.3789L27.5 31.0355L18.1567 40.3789C17.1803 41.3552 15.5974 41.3552 14.6211 40.3789C13.6448 39.4026 13.6448 37.8197 14.6211 36.8433L23.9645 27.5L14.6211 18.1567C13.6448 17.1803 13.6448 15.5974 14.6211 14.6211Z" fill="currentColor" />
</svg>
</div>
<div class="flex-1">
<h3 class="text-sm font-semibold text-red-700">An error occurred</h3>
<div class="mt-1">
<p class="text-sm text-red-600">An unexpected error occurred. Please try again later. If the problem persists, please contact support.</p>
</div>
</div>
</div>
</div>
</div>
<!-- Info alert -->
<div class="mx-auto w-full max-w-4xl">
<div class="rounded-lg bg-blue-50 p-4">
<div class="flex items-start gap-x-4">
<div class="shrink-0">
<svg aria-hidden="true" class="size-5 text-blue-500" viewBox="0 0 55 55" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M27.5 5.5C15.3497 5.5 5.5 15.3497 5.5 27.5C5.5 39.6504 15.3497 49.5 27.5 49.5C39.6504 49.5 49.5 39.6504 49.5 27.5C49.5 15.3497 39.6504 5.5 27.5 5.5ZM0 27.5C0 12.3122 12.3122 0 27.5 0C42.6879 0 55 12.3122 55 27.5C55 42.6879 42.6879 55 27.5 55C12.3122 55 0 42.6879 0 27.5ZM24.6131 16.5C24.6131 14.9812 25.8443 13.75 27.3631 13.75H27.6369C29.1557 13.75 30.387 14.9812 30.387 16.5V16.775C30.387 18.2916 29.1591 19.522 27.6425 19.525L27.3686 19.5255C26.6383 19.527 25.9374 19.2379 25.4205 18.722C24.9035 18.2062 24.6131 17.5058 24.6131 16.7755V16.5ZM27.5 22C29.0188 22 30.25 23.2312 30.25 24.75V38.5C30.25 40.0188 29.0188 41.25 27.5 41.25C25.9812 41.25 24.75 40.0188 24.75 38.5V24.75C24.75 23.2312 25.9812 22 27.5 22Z" fill="currentColor" />
</svg>
</div>
<div class="flex-1">
<h3 class="text-sm font-semibold text-blue-700">We've released a new feature!</h3>
<div class="mt-1">
<p class="text-sm text-blue-600">New feature released that allows you to customize your profile. You can now add a profile picture and a bio to your profile.</p>
</div>
</div>
</div>
</div>
</div>
<!-- Neutral alert -->
<div class="mx-auto w-full max-w-4xl">
<div class="rounded-lg bg-gray-50 p-4">
<div class="flex items-start gap-x-4">
<div class="shrink-0">
<svg aria-hidden="true" class="size-5 text-gray-500" viewBox="0 0 55 55" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M27.5 5.5C15.3497 5.5 5.5 15.3497 5.5 27.5C5.5 39.6504 15.3497 49.5 27.5 49.5C39.6504 49.5 49.5 39.6504 49.5 27.5C49.5 15.3497 39.6504 5.5 27.5 5.5ZM0 27.5C0 12.3122 12.3122 0 27.5 0C42.6879 0 55 12.3122 55 27.5C55 42.6879 42.6879 55 27.5 55C12.3122 55 0 42.6879 0 27.5ZM24.6131 16.5C24.6131 14.9812 25.8443 13.75 27.3631 13.75H27.6369C29.1557 13.75 30.387 14.9812 30.387 16.5V16.775C30.387 18.2916 29.1591 19.522 27.6425 19.525L27.3686 19.5255C26.6383 19.527 25.9374 19.2379 25.4205 18.722C24.9035 18.2062 24.6131 17.5058 24.6131 16.7755V16.5ZM27.5 22C29.0188 22 30.25 23.2312 30.25 24.75V38.5C30.25 40.0188 29.0188 41.25 27.5 41.25C25.9812 41.25 24.75 40.0188 24.75 38.5V24.75C24.75 23.2312 25.9812 22 27.5 22Z" fill="currentColor" />
</svg>
</div>
<div class="flex-1">
<h3 class="text-sm font-semibold text-gray-700">New update available</h3>
<div class="mt-1">
<p class="text-sm text-gray-600">A new update is available for the application. You can now update the application to the latest version.</p>
</div>
</div>
</div>
</div>
</div>Frequently asked questions
-
Success, warning, error, and info. Each style is available in a solid/filled version, a soft background version, and some with an icon or dismiss button.
-
The dismiss variants have an X button already in the markup. Just add a small click handler in JavaScript to remove the element, something like button.closest('[role="alert"]').remove().
-
Yes. A few of the variants already have a "Learn more" style link. Just drop an anchor tag inside the message text with whatever styling you want.
-
Not exactly, alerts are inline in the page layout, toasts appear floating at the edge of the screen. Check the notifications section for those.
Related Tailwind CSS components
More free, copy-paste Tailwind CSS components to use in your projects.