Alert.
Make use of Tailwind's unique Alert styles to enhance actions in forms, dialogs, and various other elements, featuring comprehensive support for multiple sizes, states, and additional functionalities.
AlertAlert
Basic Alerts
A simple primary alert check it out!
A simple secondary alert check it out!
A simple success alert check it out!
A simple info alert check it out!
A simple warning alert check it out!
A simple danger alert check it out!
A simple light alert check it out!
A simple dark alert check it out!
<div>
<div class="p-4 mb-4 rounded-xl relative border border-primary/20 text-primary bg-primary/10">
A simple primary alert check it out!
</div>
<div class="p-4 mb-4 rounded-xl relative border border-secondary/20 bg-secondary/10 text-secondary">
A simple secondary alert check it out!
</div>
<div class="p-4 mb-4 rounded-xl relative border border-success/20 text-success bg-success/10">
A simple success alert check it out!
</div>
<div class="p-4 mb-4 rounded-xl relative border border-info/20 text-info bg-info/10">
A simple info alert check it out!
</div>
<div class="p-4 mb-4 rounded-xl relative border border-warning/20 text-warning bg-warning/10">
A simple warning alert check it out!
</div>
<div class="p-4 mb-4 rounded-xl relative border border-danger/20 text-danger bg-danger/10">
A simple danger alert check it out!
</div>
<div class="p-4 mb-4 rounded-xl relative border border-light/20 bg-light">
A simple light alert check it out!
</div>
<div class="p-4 mb-4 rounded-xl relative border border-dark/30 bg-dark/20">
A simple dark alert check it out!
</div>
</div>
Alert with Link
A simple primary alert check with an example link Give it a click if you like
A simple secondary alert check with an example link Give it a click if you like
A simple success alert check with an example link Give it a click if you like
A simple info alert check with an example link Give it a click if you like
A simple warning alert check with an example link Give it a click if you like
A simple danger alert check with an example link Give it a click if you like
A simple light alert check with an example link Give it a click if you like
A simple dark alert check with an example link Give it a click if you like
<div>
<div class="p-4 mb-4 rounded-xl relative border border-primary/20 text-primary bg-primary/10">
A simple primary alert check with <a href="javascript:void(0);" class="underline font-semibold mx-0.5 opacity-80">an example link</a> Give it a click if you like
</div>
<div class="p-4 mb-4 rounded-xl relative border border-secondary/20 bg-secondary/10 text-secondary">
A simple secondary alert check with <a href="javascript:void(0);" class="underline font-semibold mx-0.5 opacity-80">an example link</a> Give it a click if you like
</div>
<div class="p-4 mb-4 rounded-xl relative border border-success/20 text-success bg-success/10">
A simple success alert check with <a href="javascript:void(0);" class="underline font-semibold mx-0.5 opacity-80">an example link</a> Give it a click if you like
</div>
<div class="p-4 mb-4 rounded-xl relative border border-info/20 text-info bg-info/10">
A simple info alert check with <a href="javascript:void(0);" class="underline font-semibold mx-0.5 opacity-80">an example link</a> Give it a click if you like
</div>
<div class="p-4 mb-4 rounded-xl relative border border-warning/20 text-warning bg-warning/10">
A simple warning alert check with <a href="javascript:void(0);" class="underline font-semibold mx-0.5 opacity-80">an example link</a> Give it a click if you like
</div>
<div class="p-4 mb-4 rounded-xl relative border border-danger/20 text-danger bg-danger/10">
A simple danger alert check with <a href="javascript:void(0);" class="underline font-semibold mx-0.5 opacity-80">an example link</a> Give it a click if you like
</div>
<div class="p-4 mb-4 rounded-xl relative border border-light/20 bg-light">
A simple light alert check with <a href="javascript:void(0);" class="underline font-semibold mx-0.5 opacity-80">an example link</a> Give it a click if you like
</div>
<div class="p-4 mb-4 rounded-xl relative border border-dark/30 bg-dark/20">
A simple dark alert check with <a href="javascript:void(0);" class="underline font-semibold mx-0.5 opacity-80">an example link</a> Give it a click if you like
</div>
</div>
Additional content
Well done!
Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.
Whenever you need to, be sure to use margin utilities to keep things nice and tidy.
<div>
<div class="p-4 mb-4 rounded-xl relative border border-green/20 text-green bg-success/10">
<h5 class="text-lg mb-2 text-green!">Well done!</h5>
<p class="mb-4">Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p>
<hr class="border-t border-green/40 my-4">
<p>Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
</div>
</div>
Alert Icon Left
An example alert primary with an icon
An example alert secondary with an icon
An example alert success with an icon
An example alert info with an icon
An example alert warning with an icon
An example alert danger with an icon
An example alert light with an icon
An example alert dark with an icon
<div>
<div class="p-4 mb-4 rounded-xl relative border border-primary/20 text-primary bg-primary/10 flex items-center">
<span><i class="fa-solid fa-user me-2"></i></span>
<div>An example alert primary with an icon</div>
</div>
<div class="p-4 mb-4 rounded-xl relative border border-secondary/20 bg-secondary/10 text-secondary flex items-center">
<span><i class="fa-solid fa-bell me-2"></i></span>
<div>An example alert secondary with an icon</div>
</div>
<div class="p-4 mb-4 rounded-xl relative border border-success/20 text-success bg-success/10 flex items-center">
<span><i class="fa-solid fa-check me-2"></i></span>
<div>An example alert success with an icon</div>
</div>
<div class="p-4 mb-4 rounded-xl relative border border-info/20 text-info bg-info/10 flex items-center">
<span><i class="fa-solid fa-envelope me-2"></i></span>
<div>An example alert info with an icon</div>
</div>
<div class="p-4 mb-4 rounded-xl relative border border-warning/20 text-warning bg-warning/10 flex items-center">
<span><i class="fa-solid fa-triangle-exclamation me-2"></i></span>
<div>An example alert warning with an icon</div>
</div>
<div class="p-4 mb-4 rounded-xl relative border border-danger/20 text-danger bg-danger/10 flex items-center">
<span><i class="fa-solid fa-question me-2"></i></span>
<div>An example alert danger with an icon</div>
</div>
<div class="p-4 mb-4 rounded-xl relative border border-light/20 bg-light flex items-center">
<span><i class="fa-solid fa-gear me-2"></i></span>
<div>An example alert light with an icon</div>
</div>
<div class="p-4 mb-4 rounded-xl relative border border-dark/30 bg-dark/20 flex items-center">
<span><i class="fa-solid fa-gears me-2"></i></span>
<div>An example alert dark with an icon</div>
</div>
</div>
Dismissable Alerts
Success! Message has been sent.
Success! Message has been sent.
Success! Message has been sent.
Info! You have got 5 new email.
Warning! Something went wrong. Please check.
Error! Message Sending failed.
Error! Message Sending failed.
Error! Message Sending failed.
<div>
<div class="p-4 mb-4 rounded-xl relative text-primary bg-primary/10 border border-primary/10">
<button type="button" class="remove-btn absolute right-0 py-5 px-4 -top-1.25 z-2"><span><i class="fa-solid fa-xmark scale-150 text-bodycolor"></i></span></button>
<strong>Success!</strong> Message has been sent.
</div>
<div class="p-4 mb-4 rounded-xl relative border border-secondary bg-secondary/10 text-secondary">
<button type="button" class="remove-btn absolute right-0 py-5 px-4 -top-1.25 z-2"><span><i class="fa-solid fa-xmark scale-150 text-bodycolor"></i></span></button>
<strong>Success!</strong> Message has been sent.
</div>
<div class="p-4 mb-4 rounded-xl relative border border-transparent text-success bg-success/10">
<button type="button" class="remove-btn absolute right-0 py-5 px-4 -top-1.25 z-2"><span><i class="fa-solid fa-xmark scale-150 text-bodycolor"></i></span></button>
<strong>Success!</strong> Message has been sent.
</div>
<div class="p-4 mb-4 rounded-xl relative border border-transparent text-info bg-info/10">
<button type="button" class="remove-btn absolute right-0 py-5 px-4 -top-1.25 z-2"><span><i class="fa-solid fa-xmark scale-150 text-bodycolor"></i></span></button>
<strong>Info!</strong> You have got 5 new email.
</div>
<div class="p-4 mb-4 rounded-xl relative border border-transparent text-warning bg-warning/10">
<button type="button" class="remove-btn absolute right-0 py-5 px-4 -top-1.25 z-2"><span><i class="fa-solid fa-xmark scale-150 text-bodycolor"></i></span></button>
<strong>Warning!</strong> Something went wrong. Please check.
</div>
<div class="p-4 mb-4 rounded-xl relative border border-transparent text-danger bg-danger/10">
<button type="button" class="remove-btn absolute right-0 py-5 px-4 -top-1.25 z-2"><span><i class="fa-solid fa-xmark scale-150 text-bodycolor"></i></span></button>
<strong>Error!</strong> Message Sending failed.
</div>
<div class="p-4 mb-4 rounded-xl relative border border-dark bg-dark/20">
<button type="button" class="remove-btn absolute right-0 py-5 px-4 -top-1.25 z-2"><span><i class="fa-solid fa-xmark scale-150 text-bodycolor"></i></span></button>
<strong>Error!</strong> Message Sending failed.
</div>
<div class="p-4 mb-4 rounded-xl relative border border-light bg-light">
<button type="button" class="remove-btn absolute right-0 py-5 px-4 -top-1.25 z-2"><span><i class="fa-solid fa-xmark scale-150 text-bodycolor"></i></span></button>
<strong>Error!</strong> Message Sending failed.
</div>
</div>
Solid color alerts
Welcome! Message has been sent.
Done! Your profile photo updated.
Success! Message has been sent.
Info! You have got 5 new email.
Warning! Something went wrong. Please check.
Error! Message sending failed.
Error! You successfully read this important alert message.
Error! You successfully read this message..
<div>
<div class="p-4 mb-4 rounded-xl relative border border-primary bg-primary text-white">
<svg class="inline-block" viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="mr-2"><circle cx="12" cy="12" r="10"></circle><path d="M8 14s1.5 2 4 2 4-2 4-2"></path><line x1="9" y1="9" x2="9.01" y2="9"></line><line x1="15" y1="9" x2="15.01" y2="9"></line></svg>
<strong>Welcome!</strong> Message has been sent.
<button type="button" class="remove-btn absolute right-0 py-5 px-4 -top-1.25 z-2">
<span><i class="fa-solid fa-xmark scale-150 text-white"></i></span>
</button>
</div>
<div class="p-4 mb-4 rounded-xl relative border border-secondary bg-secondary text-white">
<svg class="inline-block" viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="mr-2"><path d="M14 9V5a3 3 0 0 0-3-3l-4 9v11h11.28a2 2 0 0 0 2-1.7l1.38-9a2 2 0 0 0-2-2.3zM7 22H4a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2h3"></path></svg>
<strong>Done!</strong> Your profile photo updated.
<button type="button" class="remove-btn absolute right-0 py-5 px-4 -top-1.25 z-2">
<span><i class="fa-solid fa-xmark scale-150 text-white"></i></span>
</button>
</div>
<div class="p-4 mb-4 rounded-xl relative border border-success bg-success text-white">
<svg class="inline-block" viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="mr-2"><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg>
<strong>Success!</strong> Message has been sent.
<button type="button" class="remove-btn absolute right-0 py-5 px-4 -top-1.25 z-2">
<span><i class="fa-solid fa-xmark scale-150 text-white"></i></span>
</button>
</div>
<div class="p-4 mb-4 rounded-xl relative border border-transparent text-white bg-info">
<svg class="inline-block" viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="mr-2"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="16" x2="12" y2="12"></line><line x1="12" y1="8" x2="12.01" y2="8"></line></svg>
<strong>Info!</strong> You have got 5 new email.
<button type="button" class="remove-btn absolute right-0 py-5 px-4 -top-1.25 z-2">
<span><i class="fa-solid fa-xmark scale-150 text-white"></i></span>
</button>
</div>
<div class="p-4 mb-4 rounded-xl relative border border-warning bg-warning text-white">
<svg class="inline-block" viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="mr-2"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"></path><line x1="12" y1="9" x2="12" y2="13"></line><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>
<strong>Warning!</strong> Something went wrong. Please check.
<button type="button" class="remove-btn absolute right-0 py-5 px-4 -top-1.25 z-2">
<span><i class="fa-solid fa-xmark scale-150 text-white"></i></span>
</button>
</div>
<div class="p-4 mb-4 rounded-xl relative border border-danger bg-danger text-white">
<svg class="inline-block" viewBox="0 0 24 24" width="24 " height="24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="mr-2"><polygon points="7.86 2 16.14 2 22 7.86 22 16.14 16.14 22 7.86 22 2 16.14 2 7.86 7.86 2"></polygon><line x1="15" y1="9" x2="9" y2="15"></line><line x1="9" y1="9" x2="15" y2="15"></line></svg>
<strong>Error!</strong> Message sending failed.
<button type="button" class="remove-btn absolute right-0 py-5 px-4 -top-1.25 z-2"><span><i class="fa-solid fa-xmark scale-150 text-white"></i></span>
</button>
</div>
<div class="p-4 mb-4 rounded-xl relative border border-dark bg-dark/60 text-white">
<svg class="inline-block" viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="mr-2"><polygon points="7.86 2 16.14 2 22 7.86 22 16.14 16.14 22 7.86 22 2 16.14 2 7.86 7.86 2"></polygon><line x1="15" y1="9" x2="9" y2="15"></line><line x1="9" y1="9" x2="15" y2="15"></line></svg>
<strong>Error!</strong> You successfully read this important alert message.
<button type="button" class="remove-btn absolute right-0 py-5 px-4 -top-1.25 z-2"><span><i class="fa-solid fa-xmark scale-150 text-white"></i></span>
</button>
</div>
<div class="p-4 mb-4 rounded-xl relative border border-light bg-light">
<svg class="inline-block" viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="mr-2"><polygon points="7.86 2 16.14 2 22 7.86 22 16.14 16.14 22 7.86 22 2 16.14 2 7.86 7.86 2"></polygon><line x1="15" y1="9" x2="9" y2="15"></line><line x1="9" y1="9" x2="15" y2="15"></line></svg>
<strong>Error!</strong> You successfully read this message..
<button type="button" class="remove-btn absolute right-0 py-5 px-4 -top-1.25 z-2"><span><i class="fa-solid fa-xmark scale-150 text-white"></i></span>
</button>
</div>
</div>
Square alerts
Welcome! Message has been sent.
Done! Your profile photo updated.
Success! Message has been sent.
Info! You have got 5 new email.
Warning! Something went wrong. Please check.
Error! Message sending failed.
Error! You successfully read this important alert message.
Error! You successfully read this message..
<div>
<div class="p-4 mb-4 relative border border-primary/20 bg-primary/10 text-primary"><strong>Welcome!</strong> Message has been sent.
<button type="button" class="remove-btn absolute right-0 py-5 px-4 -top-1.25 z-2"><span><i class="fa-solid fa-xmark scale-150 text-bodycolor"></i></span></button>
</div>
<div class="p-4 mb-4 relative border border-secondary/20 bg-secondary/10 text-secondary"><strong>Done!</strong> Your profile photo updated.
<button type="button" class="remove-btn absolute right-0 py-5 px-4 -top-1.25 z-2"><span><i class="fa-solid fa-xmark scale-150 text-bodycolor"></i></span></button>
</div>
<div class="p-4 mb-4 relative border border-success/20 bg-success/10 solid text-success"><strong>Success!</strong> Message has been sent.
<button type="button" class="remove-btn absolute right-0 py-5 px-4 -top-1.25 z-2"><span><i class="fa-solid fa-xmark scale-150 text-bodycolor"></i></span></button>
</div>
<div class="p-4 mb-4 relative border border-info/20 bg-info/10 text-info"><strong>Info!</strong> You have got 5 new email.
<button type="button" class="remove-btn absolute right-0 py-5 px-4 -top-1.25 z-2"><span><i class="fa-solid fa-xmark scale-150 text-bodycolor"></i></span></button>
</div>
<div class="p-4 mb-4 relative border border-warning/20 bg-warning/10 text-warning"><strong>Warning!</strong> Something went wrong. Please check.
<button type="button" class="remove-btn absolute right-0 py-5 px-4 -top-1.25 z-2"><span><i class="fa-solid fa-xmark scale-150 text-bodycolor"></i></span></button>
</div>
<div class="p-4 mb-4 relative border border-danger/20 bg-danger/10 text-danger"><strong>Error!</strong> Message sending failed.
<button type="button" class="remove-btn absolute right-0 py-5 px-4 -top-1.25 z-2"><span><i class="fa-solid fa-xmark scale-150 text-bodycolor"></i></span></button>
</div>
<div class="p-4 mb-4 relative border border-dark/20 bg-dark/10 text-dark"><strong>Error!</strong> You successfully read this important alert message.
<button type="button" class="remove-btn absolute right-0 py-5 px-4 -top-1.25 z-2"><span><i class="fa-solid fa-xmark scale-150 text-bodycolor"></i></span></button>
</div>
<div class="p-4 mb-4 relative border border-light/20 bg-light"><strong>Error!</strong> You successfully read this message..
<button type="button" class="remove-btn absolute right-0 py-5 px-4 -top-1.25 z-2"><span><i class="fa-solid fa-xmark scale-150 text-bodycolor"></i></span></button>
</div>
</div>
Rounded alerts
Welcome! Message has been sent.
Done! Your profile photo updated.
Success! Message has been sent.
Info! You have got 5 new email.
Warning! Something went wrong. Please check.
Error! Message sending failed.
Error! You successfully read this important alert message.
Error! You successfully read this message..
<div>
<div class="p-4 mb-4 rounded-full relative border border-primary/20 bg-primary/10 text-primary"><strong>Welcome!</strong> Message has been sent.
<button type="button" class="remove-btn absolute right-0 py-5 px-4 -top-1.25 z-2"><span><i class="fa-solid fa-xmark scale-150 text-bodycolor"></i></span></button>
</div>
<div class="p-4 mb-4 rounded-full relative border border-secondary/20 bg-secondary/10 text-secondary"><strong>Done!</strong> Your profile photo updated.
<button type="button" class="remove-btn absolute right-0 py-5 px-4 -top-1.25 z-2"><span><i class="fa-solid fa-xmark scale-150 text-bodycolor"></i></span></button>
</div>
<div class="p-4 mb-4 rounded-full relative border border-success/20 bg-success/10 solid text-success"><strong>Success!</strong> Message has been sent.
<button type="button" class="remove-btn absolute right-0 py-5 px-4 -top-1.25 z-2"><span><i class="fa-solid fa-xmark scale-150 text-bodycolor"></i></span></button>
</div>
<div class="p-4 mb-4 rounded-full relative border border-info/20 bg-info/10 text-info"><strong>Info!</strong> You have got 5 new email.
<button type="button" class="remove-btn absolute right-0 py-5 px-4 -top-1.25 z-2"><span><i class="fa-solid fa-xmark scale-150 text-bodycolor"></i></span></button>
</div>
<div class="p-4 mb-4 rounded-full relative border border-warning/20 bg-warning/10 text-warning"><strong>Warning!</strong> Something went wrong. Please check.
<button type="button" class="remove-btn absolute right-0 py-5 px-4 -top-1.25 z-2"><span><i class="fa-solid fa-xmark scale-150 text-bodycolor"></i></span></button>
</div>
<div class="p-4 mb-4 rounded-full relative border border-danger/20 bg-danger/10 text-danger"><strong>Error!</strong> Message sending failed.
<button type="button" class="remove-btn absolute right-0 py-5 px-4 -top-1.25 z-2"><span><i class="fa-solid fa-xmark scale-150 text-bodycolor"></i></span></button>
</div>
<div class="p-4 mb-4 rounded-full relative border border-dark/20 bg-dark/10 text-dark"><strong>Error!</strong> You successfully read this important alert message.
<button type="button" class="remove-btn absolute right-0 py-5 px-4 -top-1.25 z-2"><span><i class="fa-solid fa-xmark scale-150 text-bodycolor"></i></span></button>
</div>
<div class="p-4 mb-4 rounded-full relative border border-light/20 bg-light"><strong>Error!</strong> You successfully read this message..
<button type="button" class="remove-btn absolute right-0 py-5 px-4 -top-1.25 z-2"><span><i class="fa-solid fa-xmark scale-150 text-bodycolor"></i></span></button>
</div>
</div>
Alerts alt
Success! Message has been sent.
Success! Message has been sent.
Success! Message has been sent.
Info! You have got 5 new email.
Warning! Something went wrong. Please check.
Error! Message Sending failed.
Error! Message Sending failed.
Error! Message Sending failed.
<div>
<div class="p-4 mb-4 rounded-xl relative text-primary bg-primary/10 border border-transparent border-l-4 border-l-primary">
<button type="button" class="remove-btn absolute right-0 py-5 px-4 -top-1.25 z-2"><span><i class="fa-solid fa-xmark scale-150 text-bodycolor"></i></span></button>
<strong>Success!</strong> Message has been sent.
</div>
<div class="p-4 mb-4 rounded-xl relative border border-transparent border-l-4 border-l-secondary bg-secondary/10 text-secondary">
<button type="button" class="remove-btn absolute right-0 py-5 px-4 -top-1.25 z-2"><span><i class="fa-solid fa-xmark scale-150 text-bodycolor"></i></span></button>
<strong>Success!</strong> Message has been sent.
</div>
<div class="p-4 mb-4 rounded-xl relative border border-transparent border-l-4 border-l-success text-success bg-success/10">
<button type="button" class="remove-btn absolute right-0 py-5 px-4 -top-1.25 z-2"><span><i class="fa-solid fa-xmark scale-150 text-bodycolor"></i></span></button>
<strong>Success!</strong> Message has been sent.
</div>
<div class="p-4 mb-4 rounded-xl relative border border-transparent border-l-4 border-l-info text-info bg-info/10">
<button type="button" class="remove-btn absolute right-0 py-5 px-4 -top-1.25 z-2"><span><i class="fa-solid fa-xmark scale-150 text-bodycolor"></i></span></button>
<strong>Info!</strong> You have got 5 new email.
</div>
<div class="p-4 mb-4 rounded-xl relative border border-transparent border-l-4 border-l-warning text-warning bg-warning/10">
<button type="button" class="remove-btn absolute right-0 py-5 px-4 -top-1.25 z-2"><span><i class="fa-solid fa-xmark scale-150 text-bodycolor"></i></span></button>
<strong>Warning!</strong> Something went wrong. Please check.
</div>
<div class="p-4 mb-4 rounded-xl relative border border-transparent border-l-4 border-l-danger text-danger bg-danger/10">
<button type="button" class="remove-btn absolute right-0 py-5 px-4 -top-1.25 z-2"><span><i class="fa-solid fa-xmark scale-150 text-bodycolor"></i></span></button>
<strong>Error!</strong> Message Sending failed.
</div>
<div class="p-4 mb-4 rounded-xl relative border border-transparent border-l-4 border-l-dark/70 bg-dark/20">
<button type="button" class="remove-btn absolute right-0 py-5 px-4 -top-1.25 z-2"><span><i class="fa-solid fa-xmark scale-150 text-bodycolor"></i></span></button>
<strong>Error!</strong> Message Sending failed.
</div>
<div class="p-4 mb-4 rounded-xl relative border border-transparent border-l-4 border-l-[#b9b9b9] bg-light">
<button type="button" class="remove-btn absolute right-0 py-5 px-4 -top-1.25 z-2"><span><i class="fa-solid fa-xmark scale-150 text-bodycolor"></i></span></button>
<strong>Error!</strong> Message Sending failed.
</div>
</div>
Solid Alt
Success! Message has been sent.
Success! Message has been sent.
Success! Message has been sent.
Info! You have got 5 new email.
Warning! Something went wrong. Please check.
Error! Message Sending failed.
Error! Message Sending failed.
Error! Message Sending failed.
<div>
<div class="p-4 mb-4 rounded-xl relative border-l-4 border-l-[#0c1948] border border-primary bg-primary text-white">
<button type="button" class="remove-btn absolute right-0 py-5 px-4 -top-1.25 z-2"><span><i class="fa-solid fa-xmark scale-150 text-white"></i></span>
</button>
<strong>Success!</strong> Message has been sent.
</div>
<div class="p-4 mb-4 rounded-xl relative border-l-4 border-l-[#401264] border border-secondary bg-secondary text-white">
<button type="button" class="remove-btn absolute right-0 py-5 px-4 -top-1.25 z-2"><span><i class="fa-solid fa-xmark scale-150 text-white"></i></span>
</button>
<strong>Success!</strong> Message has been sent.
</div>
<div class="p-4 mb-4 rounded-xl relative border-l-4 border-l-[#003e33] border border-success bg-success text-white">
<button type="button" class="remove-btn absolute right-0 py-5 px-4 -top-1.25 z-2"><span><i class="fa-solid fa-xmark scale-150 text-white"></i></span>
</button>
<strong>Success!</strong> Message has been sent.
</div>
<div class="p-4 mb-4 rounded-xl relative border-l-4 border-l-[#0f5983] border border-info bg-info text-white">
<button type="button" class="remove-btn absolute right-0 py-5 px-4 -top-1.25 z-2"><span><i class="fa-solid fa-xmark scale-150 text-white"></i></span>
</button>
<strong>Info!</strong> You have got 5 new email.
</div>
<div class="p-4 mb-4 rounded-xl relative border-l-4 border-l-[#8a5404] border border-warning bg-warning text-white">
<button type="button" class="remove-btn absolute right-0 py-5 px-4 -top-1.25 z-2"><span><i class="fa-solid fa-xmark scale-150 text-white"></i></span>
</button>
<strong>Warning!</strong> Something went wrong. Please check.
</div>
<div class="p-4 mb-4 rounded-xl relative border-l-4 border-l-[#a21919] border border-danger bg-danger text-white">
<button type="button" class="remove-btn absolute right-0 py-5 px-4 -top-1.25 z-2"><span><i class="fa-solid fa-xmark scale-150 text-white"></i></span>
</button>
<strong>Error!</strong> Message Sending failed.
</div>
<div class="p-4 mb-4 rounded-xl relative border-l-4 border-l-[#040404] border border-secondary bg-secondary/60 text-white">
<button type="button" class="remove-btn absolute right-0 py-5 px-4 -top-1.25 z-2"><span><i class="fa-solid fa-xmark scale-150 text-white"></i></span>
</button>
<strong>Error!</strong> Message Sending failed.
</div>
<div class="p-4 mb-4 rounded-xl relative border-l-4 border-l-[#a2b2c9] border border-light bg-light">
<button type="button" class="remove-btn absolute right-0 py-5 px-4 -top-1.25 z-2"><span><i class="fa-solid fa-xmark scale-150"></i></span>
</button>
<strong>Error!</strong> Message Sending failed.
</div>
</div>
Dismissable with solid
Success! Message has been sent.
Success! Message has been sent.
Success! Message has been sent.
Info! You have got 5 new email.
Warning! Something went wrong. Please check.
Error! Message Sending failed.
Error! Message Sending failed.
Error! Message Sending failed.
<div>
<div class="p-4 mb-4 rounded-xl relative border border-primary bg-primary text-white">
<button type="button" class="remove-btn absolute right-0 py-5 px-4 -top-1.25 z-2"><span><i class="fa-solid fa-xmark scale-150 text-white"></i></span>
</button>
<strong>Success!</strong> Message has been sent.
</div>
<div class="p-4 mb-4 rounded-xl relative border border-secondary bg-secondary text-white">
<button type="button" class="remove-btn absolute right-0 py-5 px-4 -top-1.25 z-2"><span><i class="fa-solid fa-xmark scale-150 text-white"></i></span>
</button>
<strong>Success!</strong> Message has been sent.
</div>
<div class="p-4 mb-4 rounded-xl relative border border-success bg-success text-white">
<button type="button" class="remove-btn absolute right-0 py-5 px-4 -top-1.25 z-2"><span><i class="fa-solid fa-xmark scale-150 text-white"></i></span>
</button>
<strong>Success!</strong> Message has been sent.
</div>
<div class="p-4 mb-4 rounded-xl relative border border-transparent text-white bg-info">
<button type="button" class="remove-btn absolute right-0 py-5 px-4 -top-1.25 z-2"><span><i class="fa-solid fa-xmark scale-150 text-white"></i></span>
</button>
<strong>Info!</strong> You have got 5 new email.
</div>
<div class="p-4 mb-4 rounded-xl relative border border-warning bg-warning text-white">
<button type="button" class="remove-btn absolute right-0 py-5 px-4 -top-1.25 z-2"><span><i class="fa-solid fa-xmark scale-150 text-white"></i></span>
</button>
<strong>Warning!</strong> Something went wrong. Please check.
</div>
<div class="p-4 mb-4 rounded-xl relative border border-danger bg-danger text-white">
<button type="button" class="remove-btn absolute right-0 py-5 px-4 -top-1.25 z-2"><span><i class="fa-solid fa-xmark scale-150 text-white"></i></span>
</button>
<strong>Error!</strong> Message Sending failed.
</div>
<div class="p-4 mb-4 rounded-xl relative border border-dark bg-dark text-white">
<button type="button" class="remove-btn absolute right-0 py-5 px-4 -top-1.25 z-2"><span><i class="fa-solid fa-xmark scale-150 text-white"></i></span>
</button>
<strong>Error!</strong> Message Sending failed.
</div>
<div class="p-4 mb-4 rounded-xl relative border border-light bg-light">
<button type="button" class="remove-btn absolute right-0 py-5 px-4 -top-1.25 z-2"><span><i class="fa-solid fa-xmark scale-150"></i></span>
</button>
<strong>Error!</strong> Message Sending failed.
</div>
</div>
Alert with Link and solid color
<div>
<div class="p-4 mb-4 rounded-xl relative border border-primary bg-primary text-white">
<button type="button" class="remove-btn absolute right-0 py-5 px-4 -top-1.25 z-2"><span><i class="fa-solid fa-xmark scale-150 text-white"></i></span>
</button> WOW! Eveything looks OK. <a href="javascript:void(0);" class="badge badge-sm bg-light text-primary ml-1">upgrade</a>
</div>
<div class="p-4 mb-4 rounded-xl relative border border-secondary bg-secondary text-white">
<button type="button" class="remove-btn absolute right-0 py-5 px-4 -top-1.25 z-2"><span><i class="fa-solid fa-xmark scale-150 text-white"></i></span>
</button> WOW! Eveything looks OK. <a href="javascript:void(0);" class="badge badge-sm bg-light text-secondary ml-1">upgrade</a>
</div>
<div class="p-4 mb-4 rounded-xl relative border border-success bg-success text-white">
<button type="button" class="remove-btn absolute right-0 py-5 px-4 -top-1.25 z-2"><span><i class="fa-solid fa-xmark scale-150 text-white"></i></span>
</button> WOW! Eveything looks OK. <a href="javascript:void(0);" class="badge badge-sm bg-light text-success ml-1">upgrade</a>
</div>
<div class="p-4 mb-4 rounded-xl relative border border-info bg-info text-white">
<button type="button" class="remove-btn absolute right-0 py-5 px-4 -top-1.25 z-2"><span><i class="fa-solid fa-xmark scale-150 text-white"></i></span>
</button> Hey! Take a quick look. <a href="javascript:void(0);" class="badge badge-sm bg-light text-info ml-1">upgrade</a>
</div>
<div class="p-4 mb-4 rounded-xl relative border border-warning bg-warning text-white">
<button type="button" class="remove-btn absolute right-0 py-5 px-4 -top-1.25 z-2"><span><i class="fa-solid fa-xmark scale-150 text-white"></i></span>
</button>
<strong>Warning!</strong> Why you did it to me! <a href="javascript:void(0);" class="badge badge-sm bg-light text-warning ml-1">upgrade</a>
</div>
<div class="p-4 mb-4 rounded-xl relative border border-danger bg-danger text-white">
<button type="button" class="remove-btn absolute right-0 py-5 px-4 -top-1.25 z-2"><span><i class="fa-solid fa-xmark scale-150 text-white"></i></span>
</button>
<strong>Error!</strong> Something Went wrong <a href="javascript:void(0);" class="badge badge-sm bg-light text-danger ml-1">upgrade</a>
</div>
<div class="p-4 mb-4 rounded-xl relative border border-dark bg-dark/60 text-white">
<button type="button" class="remove-btn absolute right-0 py-5 px-4 -top-1.25 z-2"><span><i class="fa-solid fa-xmark scale-150 text-white"></i></span>
</button>
<strong>Error!</strong> Something Went wrong <a href="javascript:void(0);" class="badge badge-sm bg-light text-dark ml-1">upgrade</a>
</div>
<div class="p-4 mb-4 rounded-xl relative border border-light bg-light">
<button type="button" class="remove-btn absolute right-0 py-5 px-4 -top-1.25 z-2"><span><i class="fa-solid fa-xmark scale-150"></i></span>
</button>
<strong>Error!</strong> Something Went wrong <a href="javascript:void(0);" class="badge badge-sm bg-light text-dark ml-1">upgrade</a>
</div>
</div>
Inline Notifications
Success! Vampires The Romantic Ideology Behind Them
The following article covers a topic that has recently moved to center stage-at lease it seems that way.
Success! Vampires The Romantic Ideology Behind Them
The following article covers a topic that has recently moved to center stage-at lease it seems that way.
Success! Vampires The Romantic Ideology Behind Them
The following article covers a topic that has recently moved to center stage-at lease it seems that way.
Success! Vampires The Romantic Ideology Behind Them
The following article covers a topic that has recently moved to center stage-at lease it seems that way.
Success! Vampires The Romantic Ideology Behind Them
The following article covers a topic that has recently moved to center stage-at lease it seems that way.
Danger! Religion And Science
What is the loop of Creation? How is there something from nothing? In spite of the fact..
Danger! Religion And Science
What is the loop of Creation? How is there something from nothing? In spite of the fact..
Danger! Religion And Science
What is the loop of Creation? How is there something from nothing? In spite of the fact..
<div>
<div class="row">
<div class="xl:w-1/2 w-full">
<div class="card p-4 border border-primary/20 bg-primary/10!">
<p class="text-primary mb-2"><strong>Success!</strong> Vampires The Romantic Ideology Behind Them</p>
<p class="mb-4 text-primary leading-normal">The following article covers a topic that has recently moved to center stage-at lease it seems that way.</p>
<div>
<button class="btn btn-sm btn-primary">Confirm</button>
<button class="btn btn-sm text-primary">Cancel</button>
</div>
</div>
</div>
<div class="xl:w-1/2 w-full">
<div class="card p-4 border border-secondary/20 bg-secondary/10!">
<p class="text-secondary mb-2"><strong>Success!</strong> Vampires The Romantic Ideology Behind Them</p>
<p class="mb-4 text-secondary leading-normal">The following article covers a topic that has recently moved to center stage-at lease it seems that way.</p>
<div>
<button class="btn btn-sm btn-secondary">Confirm</button>
<button class="btn btn-sm text-primary">Cancel</button>
</div>
</div>
</div>
<div class="xl:w-1/2 w-full">
<div class="card p-4 border border-success/20 bg-success/10!">
<p class="text-success mb-2"><strong>Success!</strong> Vampires The Romantic Ideology Behind Them</p>
<p class="mb-4 text-success leading-normal">The following article covers a topic that has recently moved to center stage-at lease it seems that way.</p>
<div>
<button class="btn btn-sm btn-success">Confirm</button>
<button class="btn btn-sm text-primary">Cancel</button>
</div>
</div>
</div>
<div class="xl:w-1/2 w-full">
<div class="card p-4 border border-info/20 bg-info/10!">
<p class="text-info mb-2"><strong>Success!</strong> Vampires The Romantic Ideology Behind Them</p>
<p class="mb-4 text-info leading-normal">The following article covers a topic that has recently moved to center stage-at lease it seems that way.</p>
<div>
<button class="btn btn-sm btn-info">Confirm</button>
<button class="btn btn-sm text-primary">Cancel</button>
</div>
</div>
</div>
<div class="xl:w-1/2 w-full">
<div class="card p-4 border border-warning/20 bg-warning/10!">
<p class="text-warning mb-2"><strong>Success!</strong> Vampires The Romantic Ideology Behind Them</p>
<p class="mb-4 text-warning leading-normal">The following article covers a topic that has recently moved to center stage-at lease it seems that way.</p>
<div>
<button class="btn btn-sm btn-warning">Confirm</button>
<button class="btn btn-sm text-primary">Cancel</button>
</div>
</div>
</div>
<div class="xl:w-1/2 w-full">
<div class="card p-4 border border-danger/20 bg-danger/10!">
<p class="text-danger mb-2"><strong>Danger! </strong> Religion And Science</p>
<p class="mb-4 text-danger leading-normal">What is the loop of Creation? How is there something from nothing? In spite of the fact.. </p>
<div>
<button class="btn btn-sm btn-danger">Confirm</button>
<button class="btn btn-sm text-primary">Cancel</button>
</div>
</div>
</div>
<div class="xl:w-1/2 w-full">
<div class="card p-4 border border-dark/20 bg-dark/20!">
<p class="text-dark mb-2"><strong>Danger! </strong> Religion And Science
</p>
<p class="mb-4 leading-normal">What is the loop of Creation? How is there something from nothing? In spite of the fact.. </p>
<div>
<button class="btn btn-sm btn-dark">Confirm</button>
<button class="btn btn-sm text-primary">Cancel</button>
</div>
</div>
</div>
<div class="xl:w-1/2 w-full">
<div class="card p-4 border border-light/20 bg-light!">
<p class="text-dark mb-2"><strong>Danger! </strong> Religion And Science</p>
<p class="mb-4 leading-normal">What is the loop of Creation? How is there something from nothing? In spite of the fact.. </p>
<div>
<button class="btn btn-sm bg-dark/5">Confirm</button>
<button class="btn btn-sm text-primary">Cancel</button>
</div>
</div>
</div>
</div>
</div>
Alert Outline
Success! Message has been sent.
Success! Message has been sent.
Success! Message has been sent.
Info! You have got 5 new email.
Warning! Something went wrong. Please check.
Error! Message Sending failed.
Error! Message Sending failed.
Error! Message Sending failed.
<div>
<div class="p-4 mb-4 rounded-xl relative border border-primary text-primary">
<button type="button" class="remove-btn absolute right-0 py-5 px-4 -top-1.25 z-2"><span><i class="fa-solid fa-xmark scale-150 text-bodycolor"></i></span></button> Success! Message has been sent.
</div>
<div class="p-4 mb-4 rounded-xl relative border border-secondary text-secondary">
<button type="button" class="remove-btn absolute right-0 py-5 px-4 -top-1.25 z-2"><span><i class="fa-solid fa-xmark scale-150 text-bodycolor"></i></span></button> Success! Message has been sent.
</div>
<div class="p-4 mb-4 rounded-xl relative border border-success text-success">
<button type="button" class="remove-btn absolute right-0 py-5 px-4 -top-1.25 z-2"><span><i class="fa-solid fa-xmark scale-150 text-bodycolor"></i></span></button> Success! Message has been sent.
</div>
<div class="p-4 mb-4 rounded-xl relative border border-info text-info">
<button type="button" class="remove-btn absolute right-0 py-5 px-4 -top-1.25 z-2"><span><i class="fa-solid fa-xmark scale-150 text-bodycolor"></i></span></button> Info! You have got 5 new email.
</div>
<div class="p-4 mb-4 rounded-xl relative border border-warning text-warning">
<button type="button" class="remove-btn absolute right-0 py-5 px-4 -top-1.25 z-2"><span><i class="fa-solid fa-xmark scale-150 text-bodycolor"></i></span></button>
<strong>Warning!</strong> Something went wrong. Please check.
</div>
<div class="p-4 mb-4 rounded-xl relative border border-danger text-danger">
<button type="button" class="remove-btn absolute right-0 py-5 px-4 -top-1.25 z-2"><span><i class="fa-solid fa-xmark scale-150 text-bodycolor"></i></span></button>
<strong>Error!</strong> Message Sending failed.
</div>
<div class="p-4 mb-4 rounded-xl relative border border-dark">
<button type="button" class="remove-btn absolute right-0 py-5 px-4 -top-1.25 z-2"><span><i class="fa-solid fa-xmark scale-150 text-bodycolor"></i></span></button>
<strong>Error!</strong> Message Sending failed.
</div>
<div class="p-4 mb-4 rounded-xl relative border border-light">
<button type="button" class="remove-btn absolute right-0 py-5 px-4 -top-1.25 z-2"><span><i class="fa-solid fa-xmark scale-150 text-bodycolor"></i></span></button>
<strong>Error!</strong> Message Sending failed.
</div>
</div>
Alert Social
Cras sit amet nibh libero, in gravida nulla. tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
Cras sit amet nibh libero, in gravida nulla. tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
Cras sit amet nibh libero, in gravida nulla. tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
Google Plus
Cras sit amet nibh libero, in gravida nulla. tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
<div>
<div class="row">
<div class="xl:w-1/2 w-full">
<div class="p-4 mb-4 rounded-xl relative border border-transparent text-white bg-facebook">
<button type="button" class="remove-btn absolute right-0 py-5 px-4 -top-1.25 z-2"><span><i class="fa-solid fa-xmark scale-150 text-white"></i></span>
</button>
<div class="media flex items-start">
<div class="self-center mr-3.75 social-icon">
<span><i class="fa-brands fa-facebook-f text-4xl"></i></span>
</div>
<div class="media-body">
<h5 class="mt-1 mb-2 text-white">Facebook</h5>
<p class="sm:text-2sm leading-normal text-white">Cras sit amet nibh libero, in gravida nulla. tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
</div>
</div>
</div>
</div>
<div class="xl:w-1/2 w-full">
<div class="p-4 mb-4 rounded-xl relative border border-transparent text-white bg-black">
<button type="button" class="remove-btn absolute right-0 py-5 px-4 -top-1.25 z-2"><span><i class="fa-solid fa-xmark scale-150 text-white"></i></span>
</button>
<div class="media flex items-start">
<div class="self-center mr-3.75 social-icon">
<span><i class="fa-brands fa-x-twitter text-4xl"></i></span>
</div>
<div class="media-body">
<h5 class="mt-1 mb-2 text-white">Twitter</h5>
<p class="sm:text-2sm leading-normal text-white">Cras sit amet nibh libero, in gravida nulla. tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
</div>
</div>
</div>
</div>
<div class="xl:w-1/2 w-full">
<div class="p-4 mb-4 rounded-xl relative border border-transparent text-white bg-linkedin">
<button type="button" class="remove-btn absolute right-0 py-5 px-4 -top-1.25 z-2"><span><i class="fa-solid fa-xmark scale-150 text-white"></i></span>
</button>
<div class="media flex items-start">
<div class="self-center mr-3.75 social-icon">
<span><i class="fa-brands fa-linkedin-in text-4xl"></i></span>
</div>
<div class="media-body">
<h5 class="mt-1 mb-2 text-white">Linkedin</h5>
<p class="sm:text-2sm leading-normal text-white">Cras sit amet nibh libero, in gravida nulla. tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
</div>
</div>
</div>
</div>
<div class="xl:w-1/2 w-full">
<div class="p-4 mb-4 rounded-xl relative border border-transparent text-white bg-google-plus">
<button type="button" class="remove-btn absolute right-0 py-5 px-4 -top-1.25 z-2"><span><i class="fa-solid fa-xmark scale-150 text-white"></i></span>
</button>
<div class="media flex items-start">
<div class="self-center mr-3.75 social-icon">
<span><i class="fa-brands fa-google-plus-g text-4xl"></i></span>
</div>
<div class="media-body">
<h5 class="mt-1 mb-2 text-white">Google Plus</h5>
<p class="sm:text-2sm leading-normal text-white">Cras sit amet nibh libero, in gravida nulla. tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
</div>
</div>
</div>
</div>
</div>
</div>
Message Alert
Notifications
Cras sit amet nibh libero, in gravida nulla. tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
Notifications
Cras sit amet nibh libero, in gravida nulla. tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
Notifications
Cras sit amet nibh libero, in gravida nulla. tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
Notifications
Cras sit amet nibh libero, in gravida nulla. tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
Notifications
Cras sit amet nibh libero, in gravida nulla. tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
Notifications
Cras sit amet nibh libero, in gravida nulla. tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
Notifications
Cras sit amet nibh libero, in gravida nulla. tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
Notifications
Cras sit amet nibh libero, in gravida nulla. tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
<div>
<div class="row">
<div class="xl:w-1/2 w-full">
<div class="p-4 mb-4 rounded-xl relative text-primary bg-primary/10 border border-primary/10">
<button type="button" class="remove-btn absolute right-0 py-5 px-4 -top-1.25 z-2"><span><i class="fa-solid fa-xmark scale-150 text-bodycolor"></i></span>
</button>
<div class="media">
<div class="media-body">
<h5 class="mt-1 mb-1">Notifications</h5>
<p class="sm:text-2sm leading-normal text-primary">Cras sit amet nibh libero, in gravida nulla. tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
</div>
</div>
</div>
</div>
<div class="xl:w-1/2 w-full">
<div class="p-4 mb-4 rounded-xl relative border border-secondary/20 bg-secondary/10 text-secondary">
<button type="button" class="remove-btn absolute right-0 py-5 px-4 -top-1.25 z-2"><span><i class="fa-solid fa-xmark scale-150 text-bodycolor"></i></span>
</button>
<div class="media">
<div class="media-body">
<h5 class="mt-1 mb-1">Notifications</h5>
<p class="sm:text-2sm leading-normal text-secondary">Cras sit amet nibh libero, in gravida nulla. tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
</div>
</div>
</div>
</div>
<div class="xl:w-1/2 w-full">
<div class="p-4 mb-4 rounded-xl relative border border-transparent text-success bg-success/10">
<button type="button" class="remove-btn absolute right-0 py-5 px-4 -top-1.25 z-2"><span><i class="fa-solid fa-xmark scale-150 text-bodycolor"></i></span>
</button>
<div class="media">
<div class="media-body">
<h5 class="mt-1 mb-1">Notifications</h5>
<p class="sm:text-2sm leading-normal text-success">Cras sit amet nibh libero, in gravida nulla. tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
</div>
</div>
</div>
</div>
<div class="xl:w-1/2 w-full">
<div class="p-4 mb-4 rounded-xl relative border border-transparent text-info bg-info/10">
<button type="button" class="remove-btn absolute right-0 py-5 px-4 -top-1.25 z-2"><span><i class="fa-solid fa-xmark scale-150 text-bodycolor"></i></span>
</button>
<div class="media">
<div class="media-body">
<h5 class="mt-1 mb-1">Notifications</h5>
<p class="sm:text-2sm leading-normal text-info">Cras sit amet nibh libero, in gravida nulla. tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
</div>
</div>
</div>
</div>
<div class="xl:w-1/2 w-full">
<div class="p-4 mb-4 rounded-xl relative border border-transparent text-warning bg-warning/10">
<button type="button" class="remove-btn absolute right-0 py-5 px-4 -top-1.25 z-2"><span><i class="fa-solid fa-xmark scale-150 text-bodycolor"></i></span>
</button>
<div class="media">
<div class="media-body">
<h5 class="mt-1 mb-1">Notifications</h5>
<p class="sm:text-2sm leading-normal text-warning">Cras sit amet nibh libero, in gravida nulla. tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
</div>
</div>
</div>
</div>
<div class="xl:w-1/2 w-full">
<div class="p-4 mb-4 rounded-xl relative border border-transparent text-danger bg-danger/10">
<button type="button" class="remove-btn absolute right-0 py-5 px-4 -top-1.25 z-2"><span><i class="fa-solid fa-xmark scale-150 text-bodycolor"></i></span>
</button>
<div class="media">
<div class="media-body">
<h5 class="mt-1 mb-1">Notifications</h5>
<p class="sm:text-2sm leading-normal text-danger">Cras sit amet nibh libero, in gravida nulla. tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
</div>
</div>
</div>
</div>
<div class="xl:w-1/2 w-full">
<div class="p-4 mb-4 rounded-xl relative border border-dark/30 bg-dark/20">
<button type="button" class="remove-btn absolute right-0 py-5 px-4 -top-1.25 z-2"><span><i class="fa-solid fa-xmark scale-150 text-bodycolor"></i></span>
</button>
<div class="media">
<div class="media-body">
<h5 class="mt-1 mb-1">Notifications</h5>
<p class="sm:text-2sm leading-normal">Cras sit amet nibh libero, in gravida nulla. tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
</div>
</div>
</div>
</div>
<div class="xl:w-1/2 w-full">
<div class="p-4 mb-4 rounded-xl relative border border-light bg-light">
<button type="button" class="remove-btn absolute right-0 py-5 px-4 -top-1.25 z-2"><span><i class="fa-solid fa-xmark scale-150 text-bodycolor"></i></span>
</button>
<div class="media">
<div class="media-body">
<h5 class="mt-1 mb-1">Notifications</h5>
<p class="sm:text-2sm leading-normal">Cras sit amet nibh libero, in gravida nulla. tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
</div>
</div>
</div>
</div>
</div>
</div>
Message Alert with Solid color
Notifications
Cras sit amet nibh libero, in gravida nulla. tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
Notifications
Cras sit amet nibh libero, in gravida nulla. tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
Notifications
Cras sit amet nibh libero, in gravida nulla. tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
Notifications
Cras sit amet nibh libero, in gravida nulla. tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
Notifications
Cras sit amet nibh libero, in gravida nulla. tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
Notifications
Cras sit amet nibh libero, in gravida nulla. tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
Notifications
Cras sit amet nibh libero, in gravida nulla. tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
Notifications
Cras sit amet nibh libero, in gravida nulla. tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
<div>
<div class="row">
<div class="xl:w-1/2 w-full">
<div class="p-4 mb-4 rounded-xl relative border border-primary bg-primary text-white">
<button type="button" class="remove-btn absolute right-0 py-5 px-4 -top-1.25 z-2">
<span><i class="fa-solid fa-xmark scale-150 text-white"></i></span>
</button>
<div class="media">
<div class="media-body">
<h5 class="mt-1 mb-2 text-white">Notifications</h5>
<p class="sm:text-2sm leading-normal text-white">Cras sit amet nibh libero, in gravida nulla. tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
</div>
</div>
</div>
</div>
<div class="xl:w-1/2 w-full">
<div class="p-4 mb-4 rounded-xl relative border border-secondary bg-secondary text-white">
<button type="button" class="remove-btn absolute right-0 py-5 px-4 -top-1.25 z-2">
<span><i class="fa-solid fa-xmark scale-150 text-white"></i></span>
</button>
<div class="media">
<div class="media-body">
<h5 class="mt-1 mb-2 text-white">Notifications</h5>
<p class="sm:text-2sm leading-normal text-white">Cras sit amet nibh libero, in gravida nulla. tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
</div>
</div>
</div>
</div>
<div class="xl:w-1/2 w-full">
<div class="p-4 mb-4 rounded-xl relative border border-success bg-success text-white">
<button type="button" class="remove-btn absolute right-0 py-5 px-4 -top-1.25 z-2">
<span><i class="fa-solid fa-xmark scale-150 text-white"></i></span>
</button>
<div class="media">
<div class="media-body">
<h5 class="mt-1 mb-2 text-white">Notifications</h5>
<p class="sm:text-2sm leading-normal text-white">Cras sit amet nibh libero, in gravida nulla. tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
</div>
</div>
</div>
</div>
<div class="xl:w-1/2 w-full">
<div class="p-4 mb-4 rounded-xl relative border border-transparent text-white bg-info">
<button type="button" class="remove-btn absolute right-0 py-5 px-4 -top-1.25 z-2">
<span><i class="fa-solid fa-xmark scale-150 text-white"></i></span>
</button>
<div class="media">
<div class="media-body">
<h5 class="mt-1 mb-2 text-white">Notifications</h5>
<p class="sm:text-2sm leading-normal text-white">Cras sit amet nibh libero, in gravida nulla. tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
</div>
</div>
</div>
</div>
<div class="xl:w-1/2 w-full">
<div class="p-4 mb-4 rounded-xl relative border border-warning bg-warning text-white">
<button type="button" class="remove-btn absolute right-0 py-5 px-4 -top-1.25 z-2">
<span><i class="fa-solid fa-xmark scale-150 text-white"></i></span>
</button>
<div class="media">
<div class="media-body">
<h5 class="mt-1 mb-2 text-white">Notifications</h5>
<p class="sm:text-2sm leading-normal text-white">Cras sit amet nibh libero, in gravida nulla. tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
</div>
</div>
</div>
</div>
<div class="xl:w-1/2 w-full">
<div class="p-4 mb-4 rounded-xl relative border border-danger bg-danger text-white">
<button type="button" class="remove-btn absolute right-0 py-5 px-4 -top-1.25 z-2">
<span><i class="fa-solid fa-xmark scale-150 text-white"></i></span>
</button>
<div class="media">
<div class="media-body">
<h5 class="mt-1 mb-2 text-white">Notifications</h5>
<p class="sm:text-2sm leading-normal text-white">Cras sit amet nibh libero, in gravida nulla. tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
</div>
</div>
</div>
</div>
<div class="xl:w-1/2 w-full">
<div class="p-4 mb-4 rounded-xl relative border border-dark bg-dark text-white">
<button type="button" class="remove-btn absolute right-0 py-5 px-4 -top-1.25 z-2">
<span><i class="fa-solid fa-xmark scale-150 text-white"></i></span>
</button>
<div class="media">
<div class="media-body">
<h5 class="mt-1 mb-2 text-white">Notifications</h5>
<p class="sm:text-2sm leading-normal text-white">Cras sit amet nibh libero, in gravida nulla. tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
</div>
</div>
</div>
</div>
<div class="xl:w-1/2 w-full">
<div class="p-4 mb-4 rounded-xl relative border border-light bg-light">
<button type="button" class="remove-btn absolute right-0 py-5 px-4 -top-1.25 z-2">
<span><i class="fa-solid fa-xmark scale-150 text-white"></i></span>
</button>
<div class="media">
<div class="media-body">
<h5 class="mt-1 mb-2">Notifications</h5>
<p class="sm:text-2sm leading-normal">Cras sit amet nibh libero, in gravida nulla. tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
</div>
</div>
</div>
</div>
</div>
</div>
Alert left icon big
<div>
<div class="row">
<div class="xl:w-1/2 w-full">
<div class="p-4 mb-4 rounded-xl relative border border-transparent text-primary bg-primary/10 left-icon-big">
<button type="button" class="remove-btn absolute right-0 py-5 px-4 -top-1.25 z-2"><span><i class="fa-solid fa-xmark scale-150 text-bodycolor"></i></span>
</button>
<div class="flex items-start">
<div class="self-center mr-3.75 social-icon">
<span><i class="fa-regular fa-envelope text-4xl"></i></span>
</div>
<div class="media-body">
<h6 class="mt-1 mb-2">Welcome to your account.</h6>
<p class="sm:text-2sm leading-normal text-primary">Please confirm your email address: email@example.com</p>
</div>
</div>
</div>
</div>
<div class="xl:w-1/2 w-full">
<div class="p-4 mb-4 rounded-xl relative border border-transparent text-warning bg-warning/10 left-icon-big">
<button type="button" class="remove-btn absolute right-0 py-5 px-4 -top-1.25 z-2"><span><i class="fa-solid fa-xmark scale-150 text-bodycolor"></i></span>
</button>
<div class="flex items-start">
<div class="self-center mr-3.75 social-icon">
<span><i class="fa-regular fa-circle-question text-4xl"></i></span>
</div>
<div class="media-body">
<h5 class="mt-1 mb-2">Pending!</h5>
<p class="sm:text-2sm leading-normal text-warning">You message sending failed.</p>
</div>
</div>
</div>
</div>
<div class="xl:w-1/2 w-full">
<div class="p-4 mb-4 rounded-xl relative border border-transparent text-success bg-success/10 left-icon-big">
<button type="button" class="remove-btn absolute right-0 py-5 px-4 -top-1.25 z-2"><span><i class="fa-solid fa-xmark scale-150 text-bodycolor"></i></span>
</button>
<div class="flex items-start">
<div class="self-center mr-3.75 social-icon">
<span><i class="fa-regular fa-circle-check text-4xl"></i></span>
</div>
<div class="media-body">
<h5 class="mt-1 mb-2">Congratulations!</h5>
<p class="sm:text-2sm leading-normal text-success">You have successfully created a account.</p>
</div>
</div>
</div>
</div>
<div class="xl:w-1/2 w-full">
<div class="p-4 mb-4 rounded-xl relative border border-transparent text-danger bg-danger/10 left-icon-big">
<button type="button" class="remove-btn absolute right-0 py-5 px-4 -top-1.25 z-2"><span><i class="fa-solid fa-xmark scale-150 text-bodycolor"></i></span>
</button>
<div class="flex items-start">
<div class="self-center mr-3.75 social-icon">
<span><i class="fa-solid fa-triangle-exclamation text-4xl"></i></span>
</div>
<div class="media-body">
<h5 class="mt-1 mb-2">Loading failed!</h5>
<p class="sm:text-2sm leading-normal text-danger">Again upload your server</p>
</div>
</div>
</div>
</div>
</div>
</div>