Components
Tailwind CSS Alert
Tailwind CSS alerts come in handy when you want to display contextual feedback messages which attract user’s attention and inform user to take required action without disturbing his ongoing task.
Few of the alert messages can be warning message, success or failure message, session timeout, etc. Broadly these css alerts are classified into 4 different categories
- Warning (yellow/ orange)
- Danger/ error (red)
- Success (green)
- Information (blue)
These alerts in tailwind css are available in different shapes, size and styles and can be selected based on the nature of the page and type of message. Following are all of the different options available to choose from.
Default Alert
Following examples of alert components can be used to display messages as feedback to your user.
Alert Your subscription payment
is
due
Alert Your subscription payment
is
due
Success Your subscription
payment is
successful
WarningYour subscription payment
is
in pending
DangerYour subscription payment
is
failed
<div class="p-4 mb-4 text-sm text-gray-900 rounded-xl bg-gray-50 font-normal" role="alert">
<span class="font-semibold mr-2">Alert</span> Your subscription payment is due
</div>
<div class="p-4 mb-4 text-sm text-indigo-600 rounded-xl bg-indigo-50 font-normal" role="alert">
<span class="font-semibold mr-2">Alert</span> Your subscription payment is due
</div>
<div class="p-4 mb-4 text-sm text-emerald-500 rounded-xl bg-emerald-50 font-normal" role="alert">
<span class="font-semibold mr-2">Success</span> Your subscription payment is successful
</div>
<div class="p-4 mb-4 text-sm text-amber-500 rounded-xl bg-amber-50 font-normal" role="alert">
<span class="font-semibold mr-2">Warning</span>Your subscription payment is in pending
</div>
<div class="p-4 mb-4 text-sm text-red-500 rounded-xl bg-red-50 font-normal" role="alert">
<span class="font-semibold mr-2">Danger</span>Your subscription payment is failed
</div>Bordered Alert
Tailwind popup alerts with borders which highlight the alert with border outline.
Alert Your subscription payment
is
due
Alert Your subscription payment
is
due
Success Your subscription
payment is
successful
WarningYour subscription payment
is
in pending
DangerYour subscription payment
is
failed
<div class="p-4 mb-4 text-sm text-gray-900 rounded-xl bg-gray-50 border border-gray-400 font-normal" role="alert">
<span class="font-semibold mr-2">Alert</span> Your subscription payment is due
</div>
<div class="p-4 mb-4 text-sm text-indigo-600 rounded-xl bg-indigo-50 border border-indigo-400 font-normal" role="alert">
<span class="font-semibold mr-2">Alert</span> Your subscription payment is due
</div>
<div class="p-4 mb-4 text-sm text-emerald-500 rounded-xl bg-emerald-50 border border-emerald-400 font-normal" role="alert">
<span class="font-semibold mr-2">Success</span> Your subscription payment is successful
</div>
<div class="p-4 mb-4 text-sm text-amber-500 rounded-xl bg-amber-50 border border-amber-400 font-normal" role="alert">
<span class="font-semibold mr-2">Warning</span>Your subscription payment is in pending
</div>
<div class="p-4 mb-4 text-sm text-red-500 rounded-xl bg-red-50 border border-red-400 font-normal" role="alert">
<span class="font-semibold mr-2">Danger</span>Your subscription payment is failed
</div>Solid Background Alert
This alert message style will have solid color as background which will help in highlighting the alert in more attractive way.
Alert Your subscription payment
is
due
Alert Your subscription payment
is
due
Success Your subscription
payment is
successful
WarningYour subscription payment
is
in pending
DangerYour subscription payment
is
failed
<div class="p-4 mb-4 text-sm text-white rounded-xl bg-gray-900 font-normal" role="alert">
<span class="font-semibold mr-2">Alert</span> Your subscription payment is due
</div>
<div class="p-4 mb-4 text-sm text-white rounded-xl bg-indigo-600 font-normal" role="alert">
<span class="font-semibold mr-2">Alert</span> Your subscription payment is due
</div>
<div class="p-4 mb-4 text-sm text-white rounded-xl bg-emerald-500 font-normal" role="alert">
<span class="font-semibold mr-2">Success</span> Your subscription payment is successful
</div>
<div class="p-4 mb-4 text-sm text-white rounded-xl bg-amber-500 font-normal" role="alert">
<span class="font-semibold mr-2">Warning</span>Your subscription payment is in pending
</div>
<div class="p-4 mb-4 text-sm text-white rounded-xl bg-red-500 font-normal" role="alert">
<span class="font-semibold mr-2">Danger</span>Your subscription payment is failed
</div>Alert with Content
This type of tailwind css alerts will come with certain short message also which will make it easier for user to understand the message.
Warning Your subscription payment is due
Kindly renew your subscription of the pagedone by end of this month.
Success Your subscription payment is successful
Kindly renew your subscription of the pagedone by end of this month.
DangerYour subscription payment is failed
Kindly renew your subscription of the pagedone by end of this month.
<div class="p-4 mb-4 rounded-xl text-sm bg-amber-50" role="alert">
<h3 class="text-amber-500 font-normal">
<span class="font-semibold mr-1">Warning</span> Your subscription payment is due
</h3>
<p class="mt-1 text-gray-600">Kindly renew your subscription of the pagedone by end of this month.</p>
</div>
<div class="p-4 mb-4 text-sm rounded-xl bg-emerald-50 border border-emerald-400" role="alert">
<h3 class="text-emerald-500 font-normal">
<span class="font-semibold mr-1">Success</span> Your subscription payment is successful
</h3>
<p class="mt-1 text-gray-600">Kindly renew your subscription of the pagedone by end of this month.</p>
</div>
<div class="p-4 mb-4 text-sm rounded-xl bg-red-500" role="alert">
<h3 class="text-white font-normal">
<span class="font-semibold mr-1">Danger</span>Your subscription payment is failed
</h3>
<p class="mt-1 text-white/80">Kindly renew your subscription of the pagedone by end of this month.</p>
</div>Alert with Content and Buttons
This advanced type will not only show alert with message but will ask user to take action via action buttons too.
Warning Your subscription payment is due
Kindly renew your subscription of the pagedone by end of this month.
Success Your subscription payment is successful
Kindly renew your subscription of the pagedone by end of this month.
DangerYour subscription payment is failed
Kindly renew your subscription of the pagedone by end of this month.
<div class="p-4 mb-4 rounded-xl text-sm bg-amber-50" role="alert">
<h3 class="text-amber-500 font-normal">
<span class="font-semibold mr-1">Warning</span> Your subscription payment is due
</h3>
<p class="mt-1 text-gray-600">Kindly renew your subscription of the pagedone by end of this month.</p>
<div class="flex items-center gap-6 mt-4">
<button class="font-semibold text-gray-900 transition-all duration-500 hover:text-amber-500">Remind later</button>
<button class="font-semibold text-gray-900 transition-all duration-500 hover:text-amber-500">Renew now</button>
</div>
</div>
<div class="p-4 mb-4 text-sm rounded-xl bg-emerald-50 border border-emerald-400" role="alert">
<h3 class="text-emerald-500 font-normal">
<span class="font-semibold mr-1">Success</span> Your subscription payment is successful
</h3>
<p class="mt-1 text-gray-600">Kindly renew your subscription of the pagedone by end of this month.</p>
<div class="flex items-center gap-6 mt-4">
<button class="font-semibold text-gray-900 transition-all duration-500 hover:text-emerald-500">Remind later</button>
<button class="font-semibold text-gray-900 transition-all duration-500 hover:text-emerald-500">Renew now</button>
</div>
</div>
<div class="p-4 mb-4 text-sm rounded-xl bg-red-500" role="alert">
<h3 class="text-white font-normal">
<span class="font-semibold mr-1">Danger</span>Your subscription payment is failed
</h3>
<p class="mt-1 text-white/80">Kindly renew your subscription of the pagedone by end of this month.</p>
<div class="flex items-center gap-6 mt-4">
<button class="font-semibold text-white transition-all duration-500">Remind later</button>
<button class="font-semibold text-white transition-all duration-500">Renew now</button>
</div>
</div>Alert with Icon
Icons help in conveying message without explaning much. this can also be used.
Warning Your subscription
payment is
due
Success Your subscription
payment is
successful
Danger Your subscription payment
is
failed
<div class="flex items-center p-4 mb-4 rounded-xl text-sm bg-amber-50 text-amber-500" role="alert">
<svg class="w-5 h-5 mr-2" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10.0043 13.3333V9.16663M9.99984 6.66663H10.0073M9.99984 18.3333C5.39746 18.3333 1.6665 14.6023 1.6665 9.99996C1.6665 5.39759 5.39746 1.66663 9.99984 1.66663C14.6022 1.66663 18.3332 5.39759 18.3332 9.99996C18.3332 14.6023 14.6022 18.3333 9.99984 18.3333Z" stroke="#F59E0B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
<span class="font-semibold mr-1">Warning</span> Your subscription payment is due
</div>
<div class="flex items-center p-4 mb-4 rounded-xl text-sm border border-emerald-400 bg-emerald-50 text-emerald-500" role="alert">
<svg class="w-5 h-5 mr-2" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10.0043 13.3333V9.16663M9.99984 6.66663H10.0073M9.99984 18.3333C5.39746 18.3333 1.6665 14.6023 1.6665 9.99996C1.6665 5.39759 5.39746 1.66663 9.99984 1.66663C14.6022 1.66663 18.3332 5.39759 18.3332 9.99996C18.3332 14.6023 14.6022 18.3333 9.99984 18.3333Z" stroke="#10B981" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
<span class="font-semibold mr-1">Success</span> Your subscription payment is successful
</div>
<div class="flex items-center p-4 mb-4 rounded-xl text-sm bg-red-500 text-white" role="alert">
<svg class="w-5 h-5 mr-2" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10.0043 13.3333V9.16663M9.99984 6.66663H10.0073M9.99984 18.3333C5.39746 18.3333 1.6665 14.6023 1.6665 9.99996C1.6665 5.39759 5.39746 1.66663 9.99984 1.66663C14.6022 1.66663 18.3332 5.39759 18.3332 9.99996C18.3332 14.6023 14.6022 18.3333 9.99984 18.3333Z" stroke="#fff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
<span class="font-semibold mr-1">Danger</span> Your subscription payment is failed
</div>1000+ Tailwind Blocks
Access over 1,000 ready-made Tailwind blocks with modern designs to accelerate your design process.
Explore More
Alert with Icon and content
This type of tailwind alerts modal come with icon and also with written content
Warning Your subscription payment is due
Kindly renew your subscription of the pagedone by end of this month.
SuccessYour subscription payment is successful
Kindly renew your subscription of the pagedone by end of this month.
DangerYour subscription payment is failed
Kindly renew your subscription of the pagedone by end of this month.
<div class="flex p-4 mb-4 rounded-xl bg-amber-50" role="alert">
<div class="mr-2">
<svg class="flex-shrink-0 w-5 h-5" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10.0043 13.3333V9.16663M9.99984 6.66663H10.0073M9.99984 18.3333C5.39746 18.3333 1.6665 14.6023 1.6665 9.99996C1.6665 5.39759 5.39746 1.66663 9.99984 1.66663C14.6022 1.66663 18.3332 5.39759 18.3332 9.99996C18.3332 14.6023 14.6022 18.3333 9.99984 18.3333Z" stroke="#F59E0B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</div>
<div class="block">
<h3 class="text-amber-500 font-normal text-base">
<span class="font-semibold mr-1">Warning</span> Your subscription payment is due
</h3>
<p class="mt-1 text-gray-600 text-sm">Kindly renew your subscription of the pagedone by end of this month.</p>
</div>
</div>
<div class="flex p-4 mb-4 rounded-xl bg-emerald-50 border border-emerald-400" role="alert">
<div class="mr-2">
<svg class="flex-shrink-0 w-5 h-5" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10.0043 13.3333V9.16663M9.99984 6.66663H10.0073M9.99984 18.3333C5.39746 18.3333 1.6665 14.6023 1.6665 9.99996C1.6665 5.39759 5.39746 1.66663 9.99984 1.66663C14.6022 1.66663 18.3332 5.39759 18.3332 9.99996C18.3332 14.6023 14.6022 18.3333 9.99984 18.3333Z" stroke="#10B981" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</div>
<div class="block">
<h3 class="text-emerald-500 font-normal text-base">
<span class="font-semibold mr-1">Success</span>Your subscription payment is successful
</h3>
<p class="mt-1 text-gray-600 text-sm">Kindly renew your subscription of the pagedone by end of this month.</p>
</div>
</div>
<div class="flex p-4 mb-4 rounded-xl bg-red-500" role="alert">
<div class="mr-2">
<svg class="flex-shrink-0 w-5 h-5" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10.0043 13.3333V9.16663M9.99984 6.66663H10.0073M9.99984 18.3333C5.39746 18.3333 1.6665 14.6023 1.6665 9.99996C1.6665 5.39759 5.39746 1.66663 9.99984 1.66663C14.6022 1.66663 18.3332 5.39759 18.3332 9.99996C18.3332 14.6023 14.6022 18.3333 9.99984 18.3333Z" stroke="#fff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</div>
<div class="block">
<h3 class="text-white font-normal text-base">
<span class="font-semibold mr-1">Danger</span>Your subscription payment is failed
</h3>
<p class="mt-1 text-white/80 text-sm">Kindly renew your subscription of the pagedone by end of this month.</p>
</div>
</div>Alert with Icon, Content & Button
One step ahead, it inclided button also along side icon and content.
Warning Your subscription payment is due
Kindly renew your subscription of the pagedone by end of this month.
Success Your subscription payment is successful
Kindly renew your subscription of the pagedone by end of this month.
Danger Your subscription payment is failed
Kindly renew your subscription of the pagedone by end of this month.
<div class="flex p-4 mb-4 rounded-xl text-sm bg-amber-50" role="alert">
<div class="mr-2">
<svg class="flex-shrink-0 w-5 h-5" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10.0043 13.3333V9.16663M9.99984 6.66663H10.0073M9.99984 18.3333C5.39746 18.3333 1.6665 14.6023 1.6665 9.99996C1.6665 5.39759 5.39746 1.66663 9.99984 1.66663C14.6022 1.66663 18.3332 5.39759 18.3332 9.99996C18.3332 14.6023 14.6022 18.3333 9.99984 18.3333Z" stroke="#F59E0B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</div>
<div class="block">
<h3 class="text-amber-500 font-normal">
<span class="font-semibold mr-1">Warning</span> Your subscription payment is due
</h3>
<p class="mt-1 text-gray-600">Kindly renew your subscription of the pagedone by end of this month.</p>
<div class="flex items-center gap-6 mt-4">
<button class="font-semibold text-gray-900 transition-all duration-500 hover:text-amber-500">Remind later</button>
<button class="font-semibold text-gray-900 transition-all duration-500 hover:text-amber-500">Renew now</button>
</div>
</div>
</div>
<div class="flex p-4 mb-4 rounded-xl text-sm bg-emerald-50 border border-emerald-400" role="alert">
<div class="mr-2">
<svg class="flex-shrink-0 w-5 h-5" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10.0043 13.3333V9.16666M9.99984 6.66666H10.0073M9.99984 18.3333C5.39746 18.3333 1.6665 14.6024 1.6665 9.99999C1.6665 5.39762 5.39746 1.66666 9.99984 1.66666C14.6022 1.66666 18.3332 5.39762 18.3332 9.99999C18.3332 14.6024 14.6022 18.3333 9.99984 18.3333Z" stroke="#10B981" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</div>
<div class="block">
<h3 class="text-emerald-500 font-normal">
<span class="font-semibold mr-1">Success</span> Your subscription payment is successful
</h3>
<p class="mt-1 text-gray-600">Kindly renew your subscription of the pagedone by end of this month.</p>
<div class="flex items-center gap-6 mt-4">
<button class="font-semibold text-gray-900 transition-all duration-500 hover:text-emerald-500">Remind later</button>
<button class="font-semibold text-gray-900 transition-all duration-500 hover:text-emerald-500">Renew now</button>
</div>
</div>
</div>
<div class="flex p-4 mb-4 rounded-xl text-sm bg-red-500 " role="alert">
<div class="mr-2">
<svg class="flex-shrink-0 w-5 h-5" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10.0043 13.3333V9.16663M9.99984 6.66663H10.0073M9.99984 18.3333C5.39746 18.3333 1.6665 14.6023 1.6665 9.99996C1.6665 5.39759 5.39746 1.66663 9.99984 1.66663C14.6022 1.66663 18.3332 5.39759 18.3332 9.99996C18.3332 14.6023 14.6022 18.3333 9.99984 18.3333Z" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</div>
<div class="block">
<h3 class="text-white font-normal">
<span class="font-semibold mr-1">Danger</span> Your subscription payment is failed
</h3>
<p class="mt-1 text-white/80">Kindly renew your subscription of the pagedone by end of this month.</p>
<div class="flex items-center gap-6 mt-4">
<button class="font-semibold text-white transition-all duration-500">Remind later</button>
<button class="font-semibold text-white transition-all duration-500 ">Renew now</button>
</div>
</div>
</div>Alert with icon style
alert type which show different icon style
Warning Your subscription payment is due
Success Your subscription payment is successful
Danger Your subscription payment is failed
<div class="flex items-center p-4 mb-4 rounded-xl text-sm bg-amber-50" role="alert">
<div class="mr-3 w-9 h-9 p-2 bg-amber-200 rounded-full">
<svg class="flex-shrink-0 w-5 h-5" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10.0048 13.3333V9.16663M10.0003 6.66663H10.0078M10.0003 18.3333C5.39795 18.3333 1.66699 14.6023 1.66699 9.99996C1.66699 5.39759 5.39795 1.66663 10.0003 1.66663C14.6027 1.66663 18.3337 5.39759 18.3337 9.99996C18.3337 14.6023 14.6027 18.3333 10.0003 18.3333Z" stroke="#F59E0B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</div>
<h3 class="text-amber-500 font-normal">
<span class="font-semibold mr-1">Warning</span> Your subscription payment is due
</h3>
</div>
<div class="flex items-center p-4 mb-4 rounded-xl text-sm bg-emerald-50 border border-emerald-400" role="alert">
<div class="mr-3 w-9 h-9 p-2 bg-emerald-200 rounded-full">
<svg class="flex-shrink-0 w-5 h-5" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10.0048 13.3334V9.16669M10.0003 6.66669H10.0078M10.0003 18.3334C5.39795 18.3334 1.66699 14.6024 1.66699 10C1.66699 5.39765 5.39795 1.66669 10.0003 1.66669C14.6027 1.66669 18.3337 5.39765 18.3337 10C18.3337 14.6024 14.6027 18.3334 10.0003 18.3334Z" stroke="#10B981" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</div>
<h3 class="text-emerald-500 font-normal">
<span class="font-semibold mr-1">Success</span> Your subscription payment is successful
</h3>
</div>
<div class="flex items-center p-4 mb-4 rounded-xl text-sm bg-red-500" role="alert">
<div class="mr-3 w-9 h-9 p-2 bg-white rounded-full">
<svg class="flex-shrink-0 w-5 h-5" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10.0048 13.3334V9.16669M10.0003 6.66669H10.0078M10.0003 18.3334C5.39795 18.3334 1.66699 14.6024 1.66699 10C1.66699 5.39765 5.39795 1.66669 10.0003 1.66669C14.6027 1.66669 18.3337 5.39765 18.3337 10C18.3337 14.6024 14.6027 18.3334 10.0003 18.3334Z" stroke="#111827" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</div>
<h3 class="text-white font-normal">
<span class="font-semibold mr-1">Danger</span> Your subscription payment is failed
</h3>
</div>Alert with icon style and content
Use this tailwind alert box for bit advanced than the previous one is icon with content text into it.
Warning Your subscription payment is due
Kindly renew your subscription of the pagedone by end of this month.
Success Your subscription payment is successful
Kindly renew your subscription of the pagedone by end of this month.
Danger Your subscription payment is failed
Kindly renew your subscription of the pagedone by end of this month.
<div class="flex items-center p-4 mb-4 rounded-xl text-sm bg-amber-50" role="alert">
<div class="mr-3 w-9 h-9 p-2 bg-amber-200 rounded-full">
<svg class="flex-shrink-0 w-5 h-5" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10.0048 13.3333V9.16663M10.0003 6.66663H10.0078M10.0003 18.3333C5.39795 18.3333 1.66699 14.6023 1.66699 9.99996C1.66699 5.39759 5.39795 1.66663 10.0003 1.66663C14.6027 1.66663 18.3337 5.39759 18.3337 9.99996C18.3337 14.6023 14.6027 18.3333 10.0003 18.3333Z" stroke="#F59E0B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</div>
<div class="block">
<h3 class="text-amber-500 font-normal mb-1">
<span class="font-semibold mr-1">Warning</span> Your subscription payment is due
</h3>
<p class="text-gray-600 text-sm">Kindly renew your subscription of the pagedone by end of this month.</p>
</div>
</div>
<div class="flex items-center p-4 mb-4 rounded-xl text-sm bg-emerald-50 border border-emerald-400" role="alert">
<div class="mr-3 w-9 h-9 p-2 bg-emerald-200 rounded-full">
<svg class="flex-shrink-0 w-5 h-5" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10.0048 13.3333V9.16666M10.0003 6.66666H10.0078M10.0003 18.3333C5.39795 18.3333 1.66699 14.6024 1.66699 9.99999C1.66699 5.39762 5.39795 1.66666 10.0003 1.66666C14.6027 1.66666 18.3337 5.39762 18.3337 9.99999C18.3337 14.6024 14.6027 18.3333 10.0003 18.3333Z" stroke="#10B981" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</div>
<div class="block">
<h3 class="text-emerald-500 font-normal mb-1">
<span class="font-semibold mr-1">Success</span> Your subscription payment is successful
</h3>
<p class="text-gray-600 text-sm">Kindly renew your subscription of the pagedone by end of this month.</p>
</div>
</div>
<div class="flex items-center p-4 mb-4 rounded-xl text-sm bg-red-500" role="alert">
<div class="mr-3 w-9 h-9 p-2 bg-white rounded-full">
<svg class="flex-shrink-0 w-5 h-5" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10.0048 13.3333V9.16663M10.0003 6.66663H10.0078M10.0003 18.3333C5.39795 18.3333 1.66699 14.6023 1.66699 9.99996C1.66699 5.39759 5.39795 1.66663 10.0003 1.66663C14.6027 1.66663 18.3337 5.39759 18.3337 9.99996C18.3337 14.6023 14.6027 18.3333 10.0003 18.3333Z" stroke="#111827" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</div>
<div class="block">
<h3 class="text-white font-normal mb-1">
<span class="font-semibold mr-1">Danger</span> Your subscription payment is failed
</h3>
<p class="text-white/80 text-sm">Kindly renew your subscription of the pagedone by end of this month.</p>
</div>
</div>Alert with icon style and content and button
Further ahead, this style will have buttons too
Warning Your subscription payment is due
Kindly renew your subscription of the pagedone by end of this month.
Success Your subscription payment is successful
Kindly renew your subscription of the pagedone by end of this month.
Danger Your subscription payment is failed
Kindly renew your subscription of the pagedone by end of this month.
<div class="flex p-4 mb-4 rounded-xl text-sm bg-amber-50" role="alert">
<div class="mr-3 w-9 h-9 p-2 bg-amber-200 rounded-full">
<svg class="flex-shrink-0 w-5 h-5" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10.0048 13.3333V9.16663M10.0003 6.66663H10.0078M10.0003 18.3333C5.39795 18.3333 1.66699 14.6023 1.66699 9.99996C1.66699 5.39759 5.39795 1.66663 10.0003 1.66663C14.6027 1.66663 18.3337 5.39759 18.3337 9.99996C18.3337 14.6023 14.6027 18.3333 10.0003 18.3333Z" stroke="#F59E0B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</div>
<div class="block">
<h3 class="text-amber-500 font-normal mb-1">
<span class="font-semibold mr-1">Warning</span> Your subscription payment is due
</h3>
<p class="text-gray-600 text-sm">Kindly renew your subscription of the pagedone by end of this month.</p>
<div class="flex items-center gap-6 mt-4">
<button class="font-semibold text-gray-900 transition-all duration-500 hover:text-amber-500">Remind later</button>
<button class="font-semibold text-gray-900 transition-all duration-500 hover:text-amber-500">Renew now</button>
</div>
</div>
</div>
<div class="flex p-4 mb-4 rounded-xl text-sm bg-emerald-50 border border-emerald-400" role="alert">
<div class="mr-3 w-9 h-9 p-2 bg-emerald-200 rounded-full">
<svg class="flex-shrink-0 w-5 h-5" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10.0048 13.3333V9.16666M10.0003 6.66666H10.0078M10.0003 18.3333C5.39795 18.3333 1.66699 14.6024 1.66699 9.99999C1.66699 5.39762 5.39795 1.66666 10.0003 1.66666C14.6027 1.66666 18.3337 5.39762 18.3337 9.99999C18.3337 14.6024 14.6027 18.3333 10.0003 18.3333Z" stroke="#10B981" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</div>
<div class="block">
<h3 class="text-emerald-500 font-normal mb-1">
<span class="font-semibold mr-1">Success</span> Your subscription payment is successful
</h3>
<p class="text-gray-600 text-sm">Kindly renew your subscription of the pagedone by end of this month.</p>
<div class="flex items-center gap-6 mt-4">
<button class="font-semibold text-gray-900 transition-all duration-500 hover:text-emerald-500">Remind later</button>
<button class="font-semibold text-gray-900 transition-all duration-500 hover:text-emerald-500">Renew now</button>
</div>
</div>
</div>
<div class="flex items-start p-4 mb-4 rounded-xl text-sm bg-red-500" role="alert">
<div class="mr-3 w-9 h-9 p-2 bg-white rounded-full">
<svg class="flex-shrink-0 w-5 h-5" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10.0048 13.3333V9.16663M10.0003 6.66663H10.0078M10.0003 18.3333C5.39795 18.3333 1.66699 14.6023 1.66699 9.99996C1.66699 5.39759 5.39795 1.66663 10.0003 1.66663C14.6027 1.66663 18.3337 5.39759 18.3337 9.99996C18.3337 14.6023 14.6027 18.3333 10.0003 18.3333Z" stroke="#111827" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</div>
<div class="block">
<h3 class="text-white font-normal mb-1">
<span class="font-semibold mr-1">Danger</span> Your subscription payment is failed
</h3>
<p class="text-white/80 text-sm">Kindly renew your subscription of the pagedone by end of this month.</p>
<div class="flex items-center gap-6 mt-4">
<button class="font-semibold text-white transition-all duration-500">Remind later</button>
<button class="font-semibold text-white transition-all duration-500">Renew now</button>
</div>
</div>
</div>Alert with avatar
Below tailwind alert message example will come with avatar you can add description and/or buttons too if required.
Warning Your subscription
payment is
due
Success Your subscription
payment is
successful
Danger Your subscription payment
is
failed
<div class="block">
<div class="flex items-center p-4 mb-4 rounded-xl text-sm bg-amber-50 text-amber-500" role="alert">
<img src="https://pagedone.io/asset/uploads/1688032245.png" alt="alert with avatar image" class="w-6 h-6 rounded-full border-2 border-amber-500 mr-3" />
<span class="font-semibold mr-1">Warning</span> Your subscription payment is due
</div>
<div class="flex items-center p-4 mb-4 rounded-xl text-sm border border-emerald-400 bg-emerald-50 text-emerald-500" role="alert">
<img src="https://pagedone.io/asset/uploads/1688032245.png" alt="alert with avatar image" class="w-6 h-6 rounded-full border-2 border-emerald-500 mr-3" />
<span class="font-semibold mr-1">Success</span> Your subscription payment is successful
</div>
<div class="flex items-center p-4 mb-4 rounded-xl text-sm bg-red-500 text-white" role="alert">
<img src="https://pagedone.io/asset/uploads/1688032245.png" alt="alert with avatar image" class="w-6 h-6 rounded-full border-2 border-white mr-3" />
<span class="font-semibold mr-1">Danger</span> Your subscription payment is failed
</div>
</div>Alert with avatar and content
Below example will come with avatar you can add description and/or buttons too if required.
Warning Your subscription payment is due
2 min ago
Success Your subscription payment is successful
2 min ago
Danger Your subscription payment is failed
2 min ago
<div class="block">
<div class="flex p-4 mb-4 rounded-xl bg-amber-50" role="alert">
<img src="https://pagedone.io/asset/uploads/1688032245.png" alt="alert with avatar image" class="w-6 h-6 rounded-full border-2 border-amber-500 mr-3"/>
<div class="block">
<h3 class="text-amber-500 font-normal text-base"><span class="font-semibold mr-1">Warning</span> Your subscription payment is due</h3>
<p class="mt-1 text-gray-600 text-sm">2 min ago</p>
</div>
</div>
<div class="flex p-4 mb-4 rounded-xl text-sm border border-emerald-400 bg-emerald-50 text-emerald-500" role="alert">
<img src="https://pagedone.io/asset/uploads/1688032245.png" alt="alert with avatar image" class="w-6 h-6 rounded-full border-2 border-emerald-500 mr-3"/>
<div class="block">
<h3 class="text-emerald-500 font-normal text-base"><span class="font-semibold mr-1">Success</span> Your subscription payment is successful</h3>
<p class="mt-1 text-gray-600 text-sm">2 min ago</p>
</div>
</div>
<div class="flex p-4 mb-4 rounded-xl text-sm bg-red-500 text-white" role="alert">
<img src="https://pagedone.io/asset/uploads/1688032245.png" alt="alert with avatar image" class="w-6 h-6 rounded-full border-2 border-white mr-3"/>
<div class="block">
<h3 class="text-white font-normal text-base"><span class="font-semibold mr-1">Danger</span> Your subscription payment is failed</h3>
<p class="mt-1 text-white/80 text-sm">2 min ago</p>
</div>
</div>
</div>1000+ Tailwind Blocks
Access over 1,000 ready-made Tailwind blocks with modern designs to accelerate your design process.
Explore More
Alert with avatar and content and button
Below example will come with avatar you can add description and/or buttons too if required.
Warning Your subscription payment is due
2 min ago
Success Your subscription payment is successful
2 min ago
Danger Your subscription payment is failed
2 min ago
<div class="block">
<div class="flex p-4 mb-4 rounded-xl text-sm bg-amber-50" role="alert">
<div class="mr-3">
<img src="https://pagedone.io/asset/uploads/1688032245.png" alt="alert with avatar image" class="w-6 h-6 rounded-full border-2 border-amber-500">
</div>
<div class="block">
<h3 class="text-amber-500 font-normal mb-1">
<span class="font-semibold mr-1">Warning</span> Your subscription payment is due
</h3>
<p class="text-gray-600 text-sm">2 min ago</p>
<div class="flex items-center gap-6 mt-4">
<button class="font-semibold text-gray-900 transition-all duration-500 hover:text-amber-500">Remind later</button>
<button class="font-semibold text-gray-900 transition-all duration-500 hover:text-amber-500">Renew now</button>
</div>
</div>
</div>
<div class="flex p-4 mb-4 rounded-xl text-sm bg-emerald-50 border border-emerald-400" role="alert">
<div class="mr-3">
<img src="https://pagedone.io/asset/uploads/1688032245.png" alt="alert with avatar image" class="w-6 h-6 rounded-full border-2 border-emerald-500">
</div>
<div class="block">
<h3 class="text-emerald-500 font-normal mb-1">
<span class="font-semibold mr-1">Success</span> Your subscription payment is successful
</h3>
<p class="text-gray-600 text-sm">2 min ago</p>
<div class="flex items-center gap-6 mt-4">
<button class="font-semibold text-gray-900 transition-all duration-500 hover:text-emerald-500">Remind later</button>
<button class="font-semibold text-gray-900 transition-all duration-500 hover:text-emerald-500">Renew now</button>
</div>
</div>
</div>
<div class="flex items-start p-4 mb-4 rounded-xl text-sm bg-red-500" role="alert">
<div class="mr-3">
<img src="https://pagedone.io/asset/uploads/1688032245.png" alt="alert with avatar image" class="w-6 h-6 rounded-full border-2 border-white">
</div>
<div class="block">
<h3 class="text-white font-normal mb-1">
<span class="font-semibold mr-1">Danger</span> Your subscription payment is failed
</h3>
<p class="text-white/80 text-sm">2 min ago</p>
<div class="flex items-center gap-6 mt-4">
<button class="font-semibold text-white transition-all duration-500">Remind later</button>
<button class="font-semibold text-white transition-all duration-500">Renew now</button>
</div>
</div>
</div>
</div>size
Following examples can also be used in case different sizes need to be used.
Warning Your subscription
payment is
due
Warning Your subscription
payment is
due
<div class="block">
<div class="flex items-center p-4 mb-4 rounded-xl text-sm bg-amber-50 text-amber-500" role="alert">
<img src="https://pagedone.io/asset/uploads/1688032245.png" alt="alert with small avatar image" class="w-6 h-6 rounded-full border-2 border-amber-500 mr-3">
<span class="font-semibold mr-1">Warning</span> Your subscription payment is due
</div>
<div class="flex items-center p-4 mb-4 rounded-xl text-normal bg-amber-50 text-amber-500" role="alert">
<img src="https://pagedone.io/asset/uploads/1688032245.png" alt="alert with medium avatar image" class="w-8 h-8 rounded-full border-2 border-amber-500 mr-3">
<span class="font-semibold mr-1">Warning</span> Your subscription payment is due
</div>
</div>Alert with progress
This tailwind alert message will display progress bar which will allow user to check if the task is being progressed or not.
Pagedone.fig downloading, waiting for network
Pagedone.fig downloaded successfully
Pagedone.fig downloading failed
<div class="block">
<div class="flex p-4 mb-4 rounded-xl text-normal bg-amber-50" role="alert">
<div class="mr-3">
<svg class="w-5 h-5" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M16.5 9.83333V13.1667V13.1667C16.5 15.0123 15.0123 16.5 13.1667 16.5V16.5H4.83333V16.5C2.98765 16.5 1.5 15.0123 1.5 13.1667V13.1667V9.83333M9 1.5V10.3889M5.66667 7.61111L8.41075 10.3552C8.68852 10.633 8.82741 10.7719 9 10.7719C9.17259 10.7719 9.31148 10.633 9.58926 10.3552L12.3333 7.61111" stroke="#F59E0B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</div>
<div class="block w-full">
<h3 class="text-amber-500 font-normal mb-3">
<span class="font-semibold mr-1">Pagedone.fig</span> downloading, waiting for network
</h3>
<div class="relative flex items-center">
<div class="relative shadow-sm w-full h-2.5 overflow-hidden rounded-3xl bg-white">
<div role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: 40%" class="flex h-full items-center justify-center bg-amber-500 text-white rounded-3xl"></div>
</div>
<span class="ml-2 text-gray-800 text-sm font-medium flex justify-center items-center ">40%</span>
</div>
</div>
</div>
<div class="flex p-4 mb-4 rounded-xl text-normal bg-emerald-50 border border-emerald-400" role="alert">
<div class="mr-3">
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M16.5 9.83333V13.1667V13.1667C16.5 15.0123 15.0123 16.5 13.1667 16.5V16.5H4.83333V16.5C2.98765 16.5 1.5 15.0123 1.5 13.1667V13.1667V9.83333M9 1.5V10.3889M5.66667 7.61111L8.41075 10.3552C8.68852 10.633 8.82741 10.7719 9 10.7719C9.17259 10.7719 9.31148 10.633 9.58926 10.3552L12.3333 7.61111" stroke="#10B981" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</div>
<div class="block w-full">
<h3 class="text-emerald-500 font-normal mb-3">
<span class="font-semibold mr-1">Pagedone.fig</span> downloaded successfully
</h3>
<div class="relative flex items-center">
<div class="relative shadow-sm w-full h-2.5 overflow-hidden rounded-3xl bg-white">
<div role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: 100%" class="flex h-full items-center justify-center bg-emerald-500 text-white rounded-3xl"></div>
</div>
<span class="ml-2 text-gray-800 text-sm font-medium flex justify-center items-center ">100%</span>
</div>
</div>
</div>
<div class="flex p-4 mb-4 rounded-xl text-normal bg-red-500" role="alert">
<div class="mr-3">
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M16.5 9.83333V13.1667V13.1667C16.5 15.0123 15.0123 16.5 13.1667 16.5V16.5H4.83333V16.5C2.98765 16.5 1.5 15.0123 1.5 13.1667V13.1667V9.83333M9 1.5V10.3889M5.66667 7.61111L8.41075 10.3552C8.68852 10.633 8.82741 10.7719 9 10.7719C9.17259 10.7719 9.31148 10.633 9.58926 10.3552L12.3333 7.61111" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</div>
<div class="block w-full">
<h3 class="text-white font-normal mb-3">
<span class="font-semibold mr-1">Pagedone.fig</span> downloading failed
</h3>
<div class="relative flex items-center">
<div class="relative shadow-sm w-full h-2.5 overflow-hidden rounded-3xl bg-white/20">
<div role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="40" style="width: 40%" class="flex h-full items-center justify-center bg-white text-white rounded-3xl"></div>
</div>
<span class="ml-2 text-white text-sm font-medium flex justify-center items-center ">40%</span>
</div>
</div>
</div>
</div>Alert with progress with description
This is much similar to alert with progress but will provide description too
Pagedone.fig downloading, waiting for network
2 min left
Pagedone.fig downloaded successfully
2 min left
Pagedone.fig downloading failed
2 min left
<div class="block">
<div class="flex p-4 mb-4 rounded-xl bg-amber-50" role="alert">
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg" class="mr-3">
<path d="M16.5 9.83333V13.1667V13.1667C16.5 15.0123 15.0123 16.5 13.1667 16.5V16.5H4.83333V16.5C2.98765 16.5 1.5 15.0123 1.5 13.1667V13.1667V9.83333M9 1.5V10.3889M5.66667 7.61111L8.41075 10.3552C8.68852 10.633 8.82741 10.7719 9 10.7719C9.17259 10.7719 9.31148 10.633 9.58926 10.3552L12.3333 7.61111" stroke="#F59E0B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
<div class="block w-full">
<h3 class="text-amber-500 font-normal text-base">
<span class="font-semibold mr-1">Pagedone.fig</span> downloading, waiting for network
</h3>
<p class="mt-1 text-gray-600 text-sm">2 min left</p>
<div class="relative flex items-center pt-2">
<div class="relative shadow-sm w-full h-2.5 overflow-hidden rounded-3xl bg-white">
<div role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: 40%" class="flex h-full items-center justify-center bg-amber-500 text-white rounded-3xl"></div>
</div>
<span class="ml-2 text-gray-800 text-sm font-medium flex justify-center items-center ">40%</span>
</div>
</div>
</div>
<div class="flex p-4 mb-4 rounded-xl bg-emerald-50 border border-emerald-400" role="alert">
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg" class="mr-3">
<path d="M16.5 9.83333V13.1667V13.1667C16.5 15.0123 15.0123 16.5 13.1667 16.5V16.5H4.83333V16.5C2.98765 16.5 1.5 15.0123 1.5 13.1667V13.1667V9.83333M9 1.5V10.3889M5.66667 7.61111L8.41075 10.3552C8.68852 10.633 8.82741 10.7719 9 10.7719C9.17259 10.7719 9.31148 10.633 9.58926 10.3552L12.3333 7.61111" stroke="#10B981" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
<div class="block w-full">
<h3 class="text-emerald-500 font-normal text-base">
<span class="font-semibold mr-1">Pagedone.fig</span> downloaded successfully
</h3>
<p class="mt-1 text-gray-600 text-sm">2 min left</p>
<div class="relative flex items-center pt-2">
<div class="relative shadow-sm w-full h-2.5 overflow-hidden rounded-3xl bg-white">
<div role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: 100%" class="flex h-full items-center justify-center bg-emerald-500 text-white rounded-3xl"></div>
</div>
<span class="ml-2 text-gray-800 text-sm font-medium flex justify-center items-center ">100%</span>
</div>
</div>
</div>
<div class="flex p-4 mb-4 rounded-xl bg-red-500" role="alert">
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg" class="mr-3">
<path d="M16.5 9.83333V13.1667V13.1667C16.5 15.0123 15.0123 16.5 13.1667 16.5V16.5H4.83333V16.5C2.98765 16.5 1.5 15.0123 1.5 13.1667V13.1667V9.83333M9 1.5V10.3889M5.66667 7.61111L8.41075 10.3552C8.68852 10.633 8.82741 10.7719 9 10.7719C9.17259 10.7719 9.31148 10.633 9.58926 10.3552L12.3333 7.61111" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
<div class="block w-full">
<h3 class="text-white font-normal text-base">
<span class="font-semibold mr-1">Pagedone.fig</span> downloading failed
</h3>
<p class="mt-1 text-white/80 text-sm">2 min left</p>
<div class="relative flex items-center pt-2">
<div class="relative shadow-sm w-full h-2.5 overflow-hidden rounded-3xl bg-white/20">
<div role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: 40%" class="flex h-full items-center justify-center bg-white text-white rounded-3xl"></div>
</div>
<span class="ml-2 text-white text-sm font-medium flex justify-center items-center ">40%</span>
</div>
</div>
</div>
</div>Alert with progress with description and button
Following example clearly shows how clearly it passes the alert message which will help user complete the task without any error and with much ease.
Pagedone.figdownloading, waiting for network
2 min left
Pagedone.figdownloaded successfully
2 min left
Pagedone.figdownloading failed
2 min left
<div class="block">
<div class="flex p-4 mb-4 rounded-xl text-sm bg-amber-50" role="alert">
<div class="mr-3">
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M16.5 9.83333V13.1667V13.1667C16.5 15.0123 15.0123 16.5 13.1667 16.5V16.5H4.83333V16.5C2.98765 16.5 1.5 15.0123 1.5 13.1667V13.1667V9.83333M9 1.5V10.3889M5.66667 7.61111L8.41075 10.3552C8.68852 10.633 8.82741 10.7719 9 10.7719C9.17259 10.7719 9.31148 10.633 9.58926 10.3552L12.3333 7.61111" stroke="#F59E0B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</div>
<div class="block w-full">
<h3 class="text-amber-500 font-normal mb-1">
<span class="font-semibold mr-1">Pagedone.fig</span>downloading, waiting for network
</h3>
<p class="text-gray-600 text-sm">2 min left</p>
<div class="relative flex items-center py-2">
<div class="relative shadow-sm w-full h-2.5 overflow-hidden rounded-3xl bg-white">
<div role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: 40%" class="flex h-full items-center justify-center bg-amber-500 text-white rounded-3xl"></div>
</div>
<span class="ml-2 text-gray-800 text-sm font-medium flex justify-center items-center ">40%</span>
</div>
<div class="flex items-center gap-6">
<button class="font-semibold text-gray-900 transition-all duration-500 hover:text-amber-500">Cancel</button>
<button class="font-semibold text-gray-900 transition-all duration-500 hover:text-amber-500">Retry</button>
</div>
</div>
</div>
<div class="flex p-4 mb-4 rounded-xl text-sm bg-emerald-50" role="alert">
<div class="mr-3">
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M16.5 9.83333V13.1667V13.1667C16.5 15.0123 15.0123 16.5 13.1667 16.5V16.5H4.83333V16.5C2.98765 16.5 1.5 15.0123 1.5 13.1667V13.1667V9.83333M9 1.5V10.3889M5.66667 7.61111L8.41075 10.3552C8.68852 10.633 8.82741 10.7719 9 10.7719C9.17259 10.7719 9.31148 10.633 9.58926 10.3552L12.3333 7.61111" stroke="#10B981" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</div>
<div class="block w-full">
<h3 class="text-emerald-500 font-normal mb-1">
<span class="font-semibold mr-1">Pagedone.fig</span>downloaded successfully
</h3>
<p class="text-gray-600 text-sm">2 min left</p>
<div class="relative flex items-center py-2">
<div class="relative shadow-sm w-full h-2.5 overflow-hidden rounded-3xl bg-white">
<div role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%" class="flex h-full items-center justify-center bg-emerald-500 text-white rounded-3xl"></div>
</div>
<span class="ml-2 text-gray-800 text-sm font-medium flex justify-center items-center ">100%</span>
</div>
<div class="flex items-center gap-6">
<button class="font-semibold text-gray-900 transition-all duration-500 hover:text-emerald-500">Cancel</button>
<button class="font-semibold text-gray-900 transition-all duration-500 hover:text-emerald-500">Re-download</button>
</div>
</div>
</div>
<div class="flex p-4 mb-4 rounded-xl text-sm bg-red-500" role="alert">
<div class="mr-3">
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M16.5 9.83333V13.1667V13.1667C16.5 15.0123 15.0123 16.5 13.1667 16.5V16.5H4.83333V16.5C2.98765 16.5 1.5 15.0123 1.5 13.1667V13.1667V9.83333M9 1.5V10.3889M5.66667 7.61111L8.41075 10.3552C8.68852 10.633 8.82741 10.7719 9 10.7719C9.17259 10.7719 9.31148 10.633 9.58926 10.3552L12.3333 7.61111" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</div>
<div class="block w-full">
<h3 class="text-white font-normal mb-1">
<span class="font-semibold mr-1">Pagedone.fig</span>downloading failed
</h3>
<p class="text-white/80 text-sm">2 min left</p>
<div class="relative flex items-center py-2">
<div class="relative shadow-sm w-full h-2.5 overflow-hidden rounded-3xl bg-white/20">
<div role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%" class="flex h-full items-center justify-center bg-white text-white rounded-3xl"></div>
</div>
<span class="ml-2 text-white text-sm font-medium flex justify-center items-center ">40%</span>
</div>
<div class="flex items-center gap-6">
<button class="font-semibold text-white transition-all duration-500 ">Cancel</button>
<button class="font-semibold text-white transition-all duration-500 ">Retry</button>
</div>
</div>
</div>
</div>Dismissable Alert
Requires Pagedone JS
To Use this Dismissable alert it requires Pagedone UI package need to be included.
Such tailwind alert dismisss messages are shown to remind something,
which
can
be closed after
reading. You need to add data-dismiss="alert" in button element.
WarningYour subscription
payment
is in pending
<div class="p-4 mb-4 text-sm text-amber-500 rounded-xl bg-amber-50 font-normal" role="alert">
<div class="flex">
<span class="font-semibold mr-2">Warning</span>Your subscription payment is in pending <button class="pl-3 ml-auto" data-dismiss="alert">
<svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0.833497 9.16659L9.16683 0.833253M9.16683 9.16658L0.833496 0.833252" stroke="#9CA3AF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</button>
</div>
</div>
Examples
Tailwind CSS Alert Examples
Tailwind CSS alerts come in handy when you want to display contextual feedback messages which attract user’s attention and inform user to take required action without disturbing his ongoing task.
Info Alert Examples
Following examples of info alert components can be used to display messages as information to your user.
Info
Info
This feature is currently in beta. Some functionality may be limited.
Info
Info
This feature is currently in beta. Some functionality may be limited.
Info
This feature is currently in beta. Some functionality may be limited.
<div class="w-full">
<div class="flex flex-col items-center justify-center gap-5">
<div class="w-full max-w-lg px-4 py-3 text-sm text-black rounded-lg bg-gray-50 border border-gray-400 font-normal"
role="alert">
<span class="font-semibold mr-2">Info</span>
</div>
<div
class="w-full max-w-lg px-4 py-3 text-sm text-black rounded-lg bg-gray-50 border border-gray-400 font-normal"
role="alert">
<span class="font-semibold mr-2">Info</span>
<p class="text-sm pt-0.5">This feature is currently in beta. Some functionality may be
limited.</p>
</div>
<div
class="w-full max-w-lg px-4 py-3 flex items-center gap-4 justify-between text-sm flex-col sm:flex-row text-black rounded-lg bg-gray-50 border border-gray-400 font-normal"
role="alert">
<span class="font-semibold mr-2">Info</span>
<div class="flex items-center gap-2">
<button
class="bg-gray-50 px-3 text-sm text-white py-1.5 rounded-md font-medium transition-all duration-500 hover:bg-gray-300">Learn
More</button>
<button
class="bg-white shadow-xs px-3 text-sm py-1.5 rounded-md font-medium border border-[#e5e5e5] transition-all duration-500 hover:bg-gray-100 hover:text-black">Dismiss</button>
</div>
</div>
<div
class="w-full max-w-lg px-4 py-3 flex items-center gap-4 justify-between text-sm flex-col sm:flex-row text-black rounded-lg bg-gray-50 border border-gray-400 font-normal"
role="alert">
<div class="flex flex-col gap-0.5">
<span class="font-semibold mr-2">Info</span>
<p class="text-sm pt-0.5">This feature is currently in beta. Some functionality may be
limited.</p>
</div>
<div class="flex items-center gap-2">
<button
class="bg-gray-50 px-3 text-sm text-white py-1.5 rounded-md font-medium transition-all duration-500 hover:bg-gray-300 whitespace-nowrap">Learn
More</button>
<button
class="bg-white shadow-xs px-3 text-sm py-1.5 rounded-md font-medium border border-[#e5e5e5] transition-all duration-500 hover:bg-gray-100 hover:text-black">Dismiss</button>
</div>
</div>
<div
class="w-full max-w-lg px-4 py-3 flex gap-4 justify-between text-sm text-black rounded-lg bg-gray-50 border border-gray-400 font-normal"
role="alert">
<div class="flex gap-3">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path d="M11.95 15.9412L11.95 9.94116" stroke="#000000" stroke-width="2"
stroke-linecap="round" class="my-path"></path>
<path d="M11.95 7L12 7" stroke="#000000" stroke-width="2" stroke-linecap="round"
class="my-path">
</path>
<path
d="M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z"
stroke="#000000" stroke-width="2" class="my-path"></path>
</svg>
<div class="flex flex-col gap-0.5">
<span class="font-semibold mr-2">Info</span>
<p class="text-sm pt-0.5">This feature is currently in beta. Some functionality may be
limited.
</p>
</div>
</div>
<div class="flex items-start gap-2">
<button
class="bg-gray-50 px-3 text-sm text-white py-1.5 rounded-md font-medium transition-all duration-500 hover:bg-gray-300 whitespace-nowrap">Learn
More</button>
<button
class="bg-white shadow-xs px-3 text-sm py-1.5 rounded-md font-medium border border-[#e5e5e5] transition-all duration-500 hover:bg-gray-100 hover:text-black">Dismiss</button>
</div>
</div>
</div>
</div>Error Message Alert Examples
Following examples can also be used in case different Error message need to be used.
Error
Error
There was a problem processing your request. Please try again.
Error
Error
There was a problem processing your request. Please try again.
Error
There was a problem processing your request. Please try again.
<div class="w-full">
<div class="flex flex-col items-center justify-center gap-5">
<div
class="w-full max-w-lg px-4 py-3 text-sm text-red-500 rounded-lg bg-red-50 border border-red-500 font-normal"
role="alert">
<span class="font-semibold mr-2">Error</span>
</div>
<div
class="w-full max-w-lg px-4 py-3 text-sm text-red-500 rounded-lg bg-red-50 border border-red-500 font-normal"
role="alert">
<span class="font-semibold mr-2">Error</span>
<p class="text-sm pt-0.5">There was a problem processing your request. Please try again.
</p>
</div>
<div
class="w-full max-w-lg px-4 py-3 flex items-center gap-4 justify-between text-sm flex-col sm:flex-row text-red-500 rounded-lg bg-red-50 border border-red-500 font-normal"
role="alert">
<span class="font-semibold mr-2">Error</span>
<div class="flex items-center gap-2">
<button
class="bg-red-500 px-3 text-sm text-white py-1.5 rounded-md font-medium transition-all duration-500 hover:bg-red-600">Retry</button>
<button
class="bg-white shadow-xs px-3 text-sm py-1.5 text-red-500 rounded-md font-medium border border-[#e5e5e5] transition-all duration-500 hover:bg-gray-50 hover:text-black">Dismiss</button>
</div>
</div>
<div
class="w-full max-w-lg px-4 py-3 flex items-center gap-4 justify-between text-sm flex-col sm:flex-row text-red-500 rounded-lg bg-red-50 border border-red-500 font-normal"
role="alert">
<div class="flex flex-col gap-0.5">
<span class="font-semibold mr-2">Error</span>
<p class="text-sm">There was a problem processing your request. Please try again.</p>
</div>
<div class="flex items-start gap-2">
<button
class="bg-red-500 px-3 text-sm text-white py-1.5 rounded-md font-medium transition-all duration-500 hover:bg-red-600">Retry</button>
<button
class="bg-white shadow-xs px-3 text-sm py-1.5 rounded-md font-medium border border-[#e5e5e5] transition-all duration-500 hover:bg-gray-50 hover:text-black">Dismiss</button>
</div>
</div>
<div
class="w-full max-w-lg px-4 py-3 flex gap-4 justify-between text-sm text-red-500 rounded-lg bg-red-50 border border-red-500 font-normal"
role="alert">
<div class="flex gap-3">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z"
stroke="#e7000b" stroke-width="2" class="my-path"></path>
<path d="M15 9L9 15M9 9L15 15" stroke="#e7000b" stroke-width="2"
stroke-linecap="round" class="my-path"></path>
</svg>
<div class="flex flex-col gap-0.5">
<span class="font-semibold mr-2">Error</span>
<p class="text-sm">There was a problem processing your request. Please try again.</p>
</div>
</div>
<div class="flex items-start gap-2">
<button
class="bg-red-500 px-3 text-sm text-white py-1.5 rounded-md font-medium transition-all duration-500 hover:bg-red-600">Retry</button>
<button
class="bg-white shadow-xs px-3 text-sm py-1.5 rounded-md font-medium border border-[#e5e5e5] transition-all duration-500 hover:bg-gray-50 hover:text-black">Dismiss</button>
</div>
</div>
</div>
</div>Success Alert Examples
Use this example to show a Success Message and description inside an alert component.
Success
Success
Your changes have been saved successfully.
Success
Success
Your changes have been saved successfully.
Success
Your changes have been saved successfully and are now live.
<div class="w-full">
<div class="flex flex-col items-center justify-center gap-5">
<div class="w-full max-w-lg px-4 py-3 text-sm text-black rounded-lg bg-gray-50 border border-gray-300 font-normal"
role="alert">
<span class="font-semibold mr-2">Success</span>
</div>
<div
class="w-full max-w-lg px-4 py-3 text-sm text-black rounded-lg bg-gray-50 border border-gray-300 font-normal"
role="alert">
<span class="font-semibold mr-2">Success</span>
<p class="text-sm pt-0.5 text-gray-500">Your changes have been saved successfully.</p>
</div>
<div
class="w-full max-w-lg px-4 py-3 flex items-center gap-4 justify-between text-sm flex-col sm:flex-row text-black rounded-lg bg-gray-50 border border-gray-300 font-normal"
role="alert">
<span class="font-semibold mr-2">Success </span>
<div class="flex items-center gap-2">
<button
class="bg-blue-500 px-3 text-sm text-white py-1.5 rounded-md font-medium transition-all duration-500 hover:bg-blue-600">View
Details</button>
<button
class="bg-white shadow-xs px-3 text-sm py-1.5 rounded-md font-medium border border-[#e5e5e5] transition-all duration-500 hover:bg-gray-100 hover:text-black">Dismiss</button>
</div>
</div>
<div
class="w-full max-w-lg px-4 py-3 flex items-center gap-4 justify-between text-sm flex-col sm:flex-row text-black rounded-lg bg-gray-50 border border-gray-300 font-normal"
role="alert">
<div class="flex flex-col gap-0.5">
<span class="font-semibold mr-2">Success </span>
<p class="text-sm pt-0.5 text-gray-500">Your changes have been saved successfully.</p>
</div>
<div class="flex items-center gap-2">
<button
class="bg-blue-500 px-3 text-sm text-white py-1.5 rounded-md font-medium transition-all duration-500 hover:bg-blue-600 whitespace-nowrap">View
Details</button>
<button
class="bg-white shadow-xs px-3 text-sm py-1.5 rounded-md font-medium border border-[#e5e5e5] transition-all duration-500 hover:bg-gray-100 hover:text-black">Dismiss</button>
</div>
</div>
<div
class="w-full max-w-lg px-4 py-3 flex gap-4 justify-between text-sm text-black rounded-lg bg-gray-50 border border-gray-300 font-normal"
role="alert">
<div class="flex gap-3">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z"
stroke="#000000" stroke-width="2" class="my-path"></path>
<path
d="M8 11.7236L9.53269 13.2563C10.1994 13.923 10.5327 14.2563 10.9469 14.2563C11.3611 14.2563 11.6945 13.923 12.3611 13.2563L16.6704 8.94702"
stroke="#000000" stroke-width="2" stroke-linecap="round" class="my-path"></path>
</svg>
<div class="flex flex-col gap-0.5">
<span class="font-semibold mr-2">Success </span>
<p class="text-sm pt-0.5 text-gray-500">Your changes have been saved successfully and
are now live.
</p>
</div>
</div>
<div class="flex items-start gap-2">
<button
class="bg-blue-500 px-3 text-sm text-white py-1.5 rounded-md font-medium transition-all duration-500 hover:bg-blue-600 whitespace-nowrap">View
Details</button>
<button
class="bg-white shadow-xs px-3 text-sm py-1.5 rounded-md font-medium border border-[#e5e5e5] transition-all duration-500 hover:bg-gray-100 hover:text-black">Dismiss</button>
</div>
</div>
</div>
</div>Warning Alert Examples
A warning alert with an amber border, a description displaying warning details, and a warning icon.
Warning
Warning
This action may have unintended consequences. Please proceed with caution.
Warning
Warning
This action may have unintended consequences. Please proceed with caution.
Warning
This action may have unintended consequences and cannot be undone.
<div class="w-full">
<div class="flex flex-col items-center justify-center gap-5">
<div class="w-full max-w-lg px-4 py-3 text-sm text-amber-500 rounded-lg border border-amber-400 font-normal"
role="alert">
<span class="font-semibold mr-2">Warning</span>
</div>
<div class="w-full max-w-lg px-4 py-3 text-sm text-amber-500 rounded-lg border border-amber-400 font-normal"
role="alert">
<span class="font-semibold mr-2">Warning</span>
<p class="text-sm pt-0.5">This action may have unintended consequences. Please proceed with caution.</p>
</div>
<div class="w-full max-w-lg px-4 py-3 flex items-center gap-4 justify-between text-sm flex-col sm:flex-row text-amber-500 rounded-lg border border-amber-400 font-normal"
role="alert">
<span class="font-semibold mr-2">Warning</span>
<div class="flex items-center gap-2">
<button
class="bg-amber-500 px-3 text-sm text-white py-1.5 rounded-md font-medium transition-all duration-500 hover:bg-amber-600">Proceed</button>
<button
class="bg-white shadow-xs px-3 text-sm py-1.5 rounded-md font-medium border border-[#e5e5e5] transition-all duration-500 hover:bg-gray-100 hover:text-amber-500">Cancel</button>
</div>
</div>
<div class="w-full max-w-lg px-4 py-3 flex items-center gap-4 justify-between text-sm flex-col sm:flex-row text-amber-500 rounded-lg border border-amber-400 font-normal"
role="alert">
<div class="flex flex-col gap-0.5">
<span class="font-semibold mr-2">Warning</span>
<p class="text-sm pt-0.5">This action may have unintended consequences. Please proceed with caution.</p>
</div>
<div class="flex items-center gap-2">
<button
class="bg-amber-500 px-3 text-sm text-white py-1.5 rounded-md font-medium transition-all duration-500 hover:bg-amber-600 whitespace-nowrap">Proceed</button>
<button
class="bg-white shadow-xs px-3 text-sm py-1.5 rounded-md font-medium border border-[#e5e5e5] transition-all duration-500 hover:bg-gray-100 hover:text-amber-500">Cancel</button>
</div>
</div>
<div class="w-full max-w-lg px-4 py-3 flex gap-4 justify-between text-sm text-amber-500 rounded-lg border border-amber-400 font-normal"
role="alert">
<div class="flex gap-3">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12.05 16.9414L12 16.9414" stroke="#FFC107" stroke-width="2" stroke-linecap="round"
class="my-path"></path>
<path d="M12 8L12 14" stroke="#FFC107" stroke-width="2" stroke-linecap="round" class="my-path">
</path>
<path
d="M8.53512 7C10.0747 4.33333 10.8445 3 11.9992 3C13.1539 3 13.9237 4.33333 15.4633 7L19.7934 14.5C21.333 17.1667 22.1028 18.5 21.5255 19.5C20.9481 20.5 19.4085 20.5 16.3293 20.5H7.66909C4.58989 20.5 3.05029 20.5 2.47294 19.5C1.89559 18.5 2.66539 17.1667 4.20499 14.5L8.53512 7Z"
stroke="#FFC107" stroke-width="2" class="my-path"></path>
</svg>
<div class="flex flex-col gap-0.5">
<span class="font-semibold mr-2">Warning</span>
<p class="text-sm pt-0.5">This action may have unintended consequences and cannot be undone.</p>
</div>
</div>
<div class="flex items-start gap-2">
<button
class="bg-amber-500 px-3 text-sm text-white py-1.5 rounded-md font-medium transition-all duration-500 hover:bg-amber-600 whitespace-nowrap">Proceed</button>
<button
class="bg-white shadow-xs px-3 text-sm py-1.5 rounded-md font-medium border border-[#e5e5e5] transition-all duration-500 hover:bg-gray-100 hover:text-amber-500">Cancel</button>
</div>
</div>
</div>
</div>Standard Alert Examples
A standard alert with a blue border, displaying helpful information or tips for the user.
Standard Alert
Standard Alert
You can use it to show general information or feedback to users.
Standard Alert
Standard Alert
You can use it to show general information or feedback to users.
Standard Alert
You can use it to show general information or feedback to users.and are now live.
<div class="w-full">
<div class="flex flex-col items-center justify-center gap-5">
<div class="w-full max-w-lg px-4 py-3 text-sm text-blue-700 rounded-lg border border-blue-500 bg-blue-50 font-normal"
role="alert">
<span class="font-semibold mr-2">Standard Alert</span>
</div>
<div class="w-full max-w-lg px-4 py-3 text-sm rounded-lg border border-blue-500 bg-blue-50 text-blue-700 font-normal"
role="alert">
<span class="font-semibold mr-2">Standard Alert</span>
<p class="text-sm pt-0.5 text-blue-600">You can use it to show general information or feedback to users.
</p>
</div>
<div class="w-full max-w-lg px-4 py-3 flex items-center gap-4 justify-between text-sm flex-col sm:flex-row text-blue-700 rounded-lg border border-blue-500 bg-blue-50 text-blue-700 font-normal"
role="alert">
<span class="font-semibold mr-2">Standard Alert </span>
<div class="flex items-center gap-2">
<button
class="bg-blue-500 px-3 text-sm text-white py-1.5 rounded-md font-medium transition-all duration-500 hover:bg-blue-600">View
Details</button>
<button
class="shadow-xs px-3 text-sm py-1.5 rounded-md font-medium border border-[#e5e5e5] transition-all duration-500 hover:bg-gray-100 hover:text-blue-700">Dismiss</button>
</div>
</div>
<div class="w-full max-w-lg px-4 py-3 flex items-center gap-4 justify-between text-sm flex-col sm:flex-row text-blue-700 rounded-lg border border-blue-500 bg-blue-50 text-blue-700 font-normal"
role="alert">
<div class="flex flex-col gap-0.5">
<span class="font-semibold mr-2">Standard Alert </span>
<p class="text-sm pt-0.5 text-blue-600">You can use it to show general information or feedback to
users.
</p>
</div>
<div class="flex items-center gap-2">
<button
class="bg-blue-500 px-3 text-sm text-white py-1.5 rounded-md font-medium transition-all duration-500 hover:bg-blue-600 whitespace-nowrap">View
Details</button>
<button
class="shadow-xs px-3 text-sm py-1.5 rounded-md font-medium border border-[#e5e5e5] transition-all duration-500 hover:bg-gray-100 hover:text-blue-700">Dismiss</button>
</div>
</div>
<div class="w-full max-w-lg px-4 py-3 flex gap-4 justify-between text-sm text-blue-700 rounded-lg border border-blue-500 bg-blue-50 text-blue-700 font-normal"
role="alert">
<div class="flex gap-3">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z"
stroke="#2b6cb0" stroke-width="2" class="my-path"></path>
<path
d="M8 11.7236L9.53269 13.2563C10.1994 13.923 10.5327 14.2563 10.9469 14.2563C11.3611 14.2563 11.6945 13.923 12.3611 13.2563L16.6704 8.94702"
stroke="#2b6cb0" stroke-width="2" stroke-linecap="round" class="my-path"></path>
</svg>
<div class="flex flex-col gap-0.5">
<span class="font-semibold mr-2">Standard Alert </span>
<p class="text-sm pt-0.5 text-blue-600">You can use it to show general information or feedback
to
users.and are now live.
</p>
</div>
</div>
<div class="flex items-start gap-2">
<button
class="bg-blue-500 px-3 text-sm text-white py-1.5 rounded-md font-medium transition-all duration-500 hover:bg-blue-600 whitespace-nowrap">View
Details</button>
<button
class="shadow-xs px-3 text-sm py-1.5 rounded-md font-medium border border-[#e5e5e5] transition-all duration-500 hover:bg-gray-100 hover:text-blue-700">Dismiss</button>
</div>
</div>
</div>
</div>
1000+ Tailwind Blocks
Access over 1,000 ready-made Tailwind blocks with modern designs to accelerate your design process.
Explore More