Alert
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
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 class="pr-12 pl-4 py-3 mb-4 rounded-lg relative text-primary bg-primarylight border border-primarylight">
<svg 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 text-dark absolute right-0 py-5 px-4 -top-1.1 opacity-50 z-[2]">
<span><i class="fa-solid fa-xmark scale-150"></i></span>
</button>
</div>
<div class="pr-12 pl-4 py-3 mb-4 rounded-lg relative border border-transparent bg-secondarylight text-secondary">
<svg 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 text-dark absolute right-0 py-5 px-4 -top-1.1 opacity-50 z-[2]">
<span><i class="fa-solid fa-xmark scale-150"></i></span>
</button>
</div>
<div class="pr-12 pl-4 py-3 mb-4 rounded-lg relative border border-transparent text-success bg-successlight">
<svg 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 text-dark absolute right-0 py-5 px-4 -top-1.1 opacity-50 z-[2]"><span><i class="fa-solid fa-xmark scale-150"></i></span>
</button>
</div>
<div class="pr-12 pl-4 py-3 mb-4 rounded-lg relative border border-transparent text-info bg-infolight">
<svg 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 text-dark absolute right-0 py-5 px-4 -top-1.1 opacity-50 z-[2]"><span><i class="fa-solid fa-xmark scale-150"></i></span>
</button>
</div>
<div class="pr-12 pl-4 py-3 mb-4 rounded-lg relative border border-transparent text-warning bg-warninglight">
<svg 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 text-dark absolute right-0 py-5 px-4 -top-1.1 opacity-50 z-[2]">
<span><i class="fa-solid fa-xmark scale-150"></i></span>
</button>
</div>
<div class="pr-12 pl-4 py-3 mb-4 rounded-lg relative border border-transparent text-danger bg-dangerlight dark:bg-[#e5555526] dark:border-[#e5555526]">
<svg 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 text-dark absolute right-0 py-5 px-4 -top-1.1 opacity-50 z-[2]"><span><i class="fa-solid fa-xmark scale-150"></i></span>
</button>
</div>
<div class="pr-12 pl-4 py-3 mb-4 rounded-lg relative border border-transparent text-dark bg-alertdark">
<svg 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 text-dark absolute right-0 py-5 px-4 -top-1.1 opacity-50 z-[2]">
<span><i class="fa-solid fa-xmark scale-150"></i></span>
</button>
</div>
<div class="pr-12 pl-4 py-3 mb-4 rounded-lg relative border border-transparent text-dark bg-[#F3F5F8]">
<svg 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 text-dark absolute right-0 py-5 px-4 -top-1.1 opacity-50 z-[2]">
<span><i class="fa-solid fa-xmark scale-150"></i></span>
</button>
</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 class="pr-12 pl-4 py-3 mb-4 rounded-lg relative border border-transparent bg-primary text-white">
<svg 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 text-dark absolute right-0 py-5 px-4 -top-1.1 opacity-50 z-[2]">
<span><i class="fa-solid fa-xmark scale-150 text-white"></i></span>
</button>
</div>
<div class="pr-12 pl-4 py-3 mb-4 rounded-lg relative border border-transparent bg-[#1F2025] text-white">
<svg 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 text-dark absolute right-0 py-5 px-4 -top-1.1 opacity-50 z-[2]">
<span><i class="fa-solid fa-xmark scale-150 text-white"></i></span>
</button>
</div>
<div class="pr-12 pl-4 py-3 mb-4 rounded-lg relative border border-transparent bg-success text-white">
<svg 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 text-dark absolute right-0 py-5 px-4 -top-1.1 opacity-50 z-[2]">
<span><i class="fa-solid fa-xmark scale-150 text-white"></i></span>
</button>
</div>
<div class="pr-12 pl-4 py-3 mb-4 rounded-lg relative border border-transparent text-white bg-info">
<svg 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 text-dark absolute right-0 py-5 px-4 -top-1.1 opacity-50 z-[2]">
<span><i class="fa-solid fa-xmark scale-150 text-white"></i></span>
</button>
</div>
<div class="pr-12 pl-4 py-3 mb-4 rounded-lg relative border border-transparent bg-warning text-white">
<svg 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 text-dark absolute right-0 py-5 px-4 -top-1.1 opacity-50 z-[2]">
<span><i class="fa-solid fa-xmark scale-150 text-white"></i></span>
</button>
</div>
<div class="pr-12 pl-4 py-3 mb-4 rounded-lg relative border border-transparent bg-danger text-white">
<svg 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 text-dark absolute right-0 py-5 px-4 -top-1.1 opacity-50 z-[2]"><span><i class="fa-solid fa-xmark scale-150 text-white"></i></span>
</button>
</div>
<div class="pr-12 pl-4 py-3 mb-4 rounded-lg relative border border-transparent bg-dark text-white">
<svg 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 text-dark absolute right-0 py-5 px-4 -top-1.1 opacity-50 z-[2]"><span><i class="fa-solid fa-xmark scale-150 text-white"></i></span>
</button>
</div>
<div class="pr-12 pl-4 py-3 mb-4 rounded-lg relative border border-transparent text-dark bg-[#F3F5F8]">
<svg 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 text-dark absolute right-0 py-5 px-4 -top-1.1 opacity-50 z-[2]"><span><i class="fa-solid fa-xmark scale-150 text-white"></i></span>
</button>
</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 class="pr-12 pl-4 py-3 mb-4 relative border border-transparent bg-primary text-white"><strong>Welcome!</strong> Message has been sent.</div>
<div class="pr-12 pl-4 py-3 mb-4 relative border border-transparent bg-[#1F2025] text-white"><strong>Done!</strong> Your profile photo updated.</div>
<div class="pr-12 pl-4 py-3 mb-4 relative border border-transparent bg-success solid text-white "><strong>Success!</strong> Message has been sent.</div>
<div class="pr-12 pl-4 py-3 mb-4 relative border border-transparent bg-info text-white "><strong>Info!</strong> You have got 5 new email.</div>
<div class="pr-12 pl-4 py-3 mb-4 relative border border-transparent bg-warning text-white"><strong>Warning!</strong> Something went wrong. Please check.</div>
<div class="pr-12 pl-4 py-3 mb-4 relative border border-transparent bg-danger text-white"><strong>Error!</strong> Message sending failed.</div>
<div class="pr-12 pl-4 py-3 mb-4 relative border border-transparent bg-dark text-white"><strong>Error!</strong> You successfully read this important alert message.</div>
<div class="pr-12 pl-4 py-3 mb-4 relative border border-transparent text-dark bg-[#F3F5F8]"><strong>Error!</strong> You successfully read this message..</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 class="pr-12 pl-4 py-3 mb-4 rounded-full relative border border-transparent bg-primary text-white"><strong>Welcome!</strong> Message has been sent.</div>
<div class="pr-12 pl-4 py-3 mb-4 rounded-full relative border border-transparent bg-[#1F2025] text-white"><strong>Done!</strong> Your profile photo updated.</div>
<div class="pr-12 pl-4 py-3 mb-4 rounded-full relative border border-transparent bg-success solid text-white "><strong>Success!</strong> Message has been sent.</div>
<div class="pr-12 pl-4 py-3 mb-4 rounded-full relative border border-transparent bg-info text-white "><strong>Info!</strong> You have got 5 new email.</div>
<div class="pr-12 pl-4 py-3 mb-4 rounded-full relative border border-transparent bg-warning text-white"><strong>Warning!</strong> Something went wrong. Please check.</div>
<div class="pr-12 pl-4 py-3 mb-4 rounded-full relative border border-transparent bg-danger text-white"><strong>Error!</strong> Message sending failed.</div>
<div class="pr-12 pl-4 py-3 mb-4 rounded-full relative border border-transparent bg-dark text-white"><strong>Error!</strong> You successfully read this important alert message.</div>
<div class="pr-12 pl-4 py-3 mb-4 rounded-full relative border border-transparent text-dark bg-[#F3F5F8]"><strong>Error!</strong> You successfully read this message..</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 class="pr-12 pl-4 py-3 mb-4 rounded-lg relative text-primary bg-primarylight border border-primarylight">
<button type="button" class="remove-btn text-dark absolute right-0 py-5 px-4 -top-1.1 opacity-50 z-[2]"><span><i class="fa-solid fa-xmark scale-150"></i></span>
</button>
<strong>Success!</strong> Message has been sent.
</div>
<div class="pr-12 pl-4 py-3 mb-4 rounded-lg relative border border-transparent bg-secondarylight text-secondary">
<button type="button" class="remove-btn text-dark absolute right-0 py-5 px-4 -top-1.1 opacity-50 z-[2]"><span><i class="fa-solid fa-xmark scale-150"></i></span>
</button>
<strong>Success!</strong> Message has been sent.
</div>
<div class="pr-12 pl-4 py-3 mb-4 rounded-lg relative border border-transparent text-success bg-successlight">
<button type="button" class="remove-btn text-dark absolute right-0 py-5 px-4 -top-1.1 opacity-50 z-[2]"><span><i class="fa-solid fa-xmark scale-150"></i></span>
</button>
<strong>Success!</strong> Message has been sent.
</div>
<div class="pr-12 pl-4 py-3 mb-4 rounded-lg relative border border-transparent text-info bg-infolight">
<button type="button" class="remove-btn text-dark absolute right-0 py-5 px-4 -top-1.1 opacity-50 z-[2]"><span><i class="fa-solid fa-xmark scale-150"></i></span>
</button>
<strong>Info!</strong> You have got 5 new email.
</div>
<div class="pr-12 pl-4 py-3 mb-4 rounded-lg relative border border-transparent text-warning bg-warninglight">
<button type="button" class="remove-btn text-dark absolute right-0 py-5 px-4 -top-1.1 opacity-50 z-[2]"><span><i class="fa-solid fa-xmark scale-150"></i></span>
</button>
<strong>Warning!</strong> Something went wrong. Please check.
</div>
<div class="pr-12 pl-4 py-3 mb-4 rounded-lg relative border border-transparent text-danger bg-dangerlight dark:bg-[#e5555526] dark:border-[#e5555526]">
<button type="button" class="remove-btn text-dark absolute right-0 py-5 px-4 -top-1.1 opacity-50 z-[2]"><span><i class="fa-solid fa-xmark scale-150"></i></span>
</button>
<strong>Error!</strong> Message Sending failed.
</div>
<div class="pr-12 pl-4 py-3 mb-4 rounded-lg relative border border-transparent text-dark bg-alertdark">
<button type="button" class="remove-btn text-dark absolute right-0 py-5 px-4 -top-1.1 opacity-50 z-[2]"><span><i class="fa-solid fa-xmark scale-150"></i></span>
</button>
<strong>Error!</strong> Message Sending failed.
</div>
<div class="pr-12 pl-4 py-3 mb-4 rounded-lg relative border border-transparent text-dark bg-[#F3F5F8]">
<button type="button" class="remove-btn text-dark absolute right-0 py-5 px-4 -top-1.1 opacity-50 z-[2]"><span><i class="fa-solid fa-xmark scale-150"></i></span>
</button>
<strong>Error!</strong> Message Sending failed.
</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 class="pr-12 pl-4 py-3 mb-4 rounded-lg relative text-primary bg-primarylight border border-transparent border-l-4 border-l-primary">
<button type="button" class="remove-btn text-dark absolute right-0 py-5 px-4 -top-1.1 opacity-50 z-[2]"><span><i class="fa-solid fa-xmark scale-150"></i></span>
</button>
<strong>Success!</strong> Message has been sent.
</div>
<div class="pr-12 pl-4 py-3 mb-4 rounded-lg relative border border-transparent border-l-4 border-l-secondary bg-secondarylight text-secondary">
<button type="button" class="remove-btn text-dark absolute right-0 py-5 px-4 -top-1.1 opacity-50 z-[2]"><span><i class="fa-solid fa-xmark scale-150"></i></span>
</button>
<strong>Success!</strong> Message has been sent.
</div>
<div class="pr-12 pl-4 py-3 mb-4 rounded-lg relative border border-transparent border-l-4 border-l-success text-success bg-successlight">
<button type="button" class="remove-btn text-dark absolute right-0 py-5 px-4 -top-1.1 opacity-50 z-[2]"><span><i class="fa-solid fa-xmark scale-150"></i></span>
</button>
<strong>Success!</strong> Message has been sent.
</div>
<div class="pr-12 pl-4 py-3 mb-4 rounded-lg relative border border-transparent border-l-4 border-l-info text-info bg-infolight">
<button type="button" class="remove-btn text-dark absolute right-0 py-5 px-4 -top-1.1 opacity-50 z-[2]"><span><i class="fa-solid fa-xmark scale-150"></i></span>
</button>
<strong>Info!</strong> You have got 5 new email.
</div>
<div class="pr-12 pl-4 py-3 mb-4 rounded-lg relative border border-transparent border-l-4 border-l-warning text-warning bg-warninglight">
<button type="button" class="remove-btn text-dark absolute right-0 py-5 px-4 -top-1.1 opacity-50 z-[2]"><span><i class="fa-solid fa-xmark scale-150"></i></span>
</button>
<strong>Warning!</strong> Something went wrong. Please check.
</div>
<div class="pr-12 pl-4 py-3 mb-4 rounded-lg relative border border-transparent border-l-4 border-l-danger text-danger bg-dangerlight dark:bg-[#e5555526] dark:border-[#e5555526]">
<button type="button" class="remove-btn text-dark absolute right-0 py-5 px-4 -top-1.1 opacity-50 z-[2]"><span><i class="fa-solid fa-xmark scale-150"></i></span>
</button>
<strong>Error!</strong> Message Sending failed.
</div>
<div class="pr-12 pl-4 py-3 mb-4 rounded-lg relative border border-transparent border-l-4 border-l-dark dark:border-l-[#b1b1b159] text-dark bg-alertdark">
<button type="button" class="remove-btn text-dark absolute right-0 py-5 px-4 -top-1.1 opacity-50 z-[2]"><span><i class="fa-solid fa-xmark scale-150"></i></span>
</button>
<strong>Error!</strong> Message Sending failed.
</div>
<div class="pr-12 pl-4 py-3 mb-4 rounded-lg relative border border-transparent border-l-4 border-l-[#b9b9b9] text-dark bg-[#F3F5F8]">
<button type="button" class="remove-btn text-dark absolute right-0 py-5 px-4 -top-1.1 opacity-50 z-[2]"><span><i class="fa-solid fa-xmark scale-150"></i></span>
</button>
<strong>Error!</strong> Message Sending failed.
</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 class="pr-12 pl-4 py-3 mb-4 rounded-lg relative border-l-4 border-l-primary-dark text-white bg-primary border border-primary">
<button type="button" class="remove-btn text-dark absolute right-0 py-5 px-4 -top-1.1 opacity-50 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="pr-12 pl-4 py-3 mb-4 rounded-lg relative border-l-4 border-l-secondary border border-transparent text-white bg-[#1F2025]">
<button type="button" class="remove-btn text-dark absolute right-0 py-5 px-4 -top-1.1 opacity-50 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="pr-12 pl-4 py-3 mb-4 rounded-lg relative border-l-4 border-l-[#003e33] border border-transparent bg-success text-white">
<button type="button" class="remove-btn text-dark absolute right-0 py-5 px-4 -top-1.1 opacity-50 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="pr-12 pl-4 py-3 mb-4 rounded-lg relative border-l-4 border-l-[#0f5983] border border-transparent bg-info text-white">
<button type="button" class="remove-btn text-dark absolute right-0 py-5 px-4 -top-1.1 opacity-50 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="pr-12 pl-4 py-3 mb-4 rounded-lg relative border-l-4 border-l-[#8a5404] border border-transparent bg-warning text-white">
<button type="button" class="remove-btn text-dark absolute right-0 py-5 px-4 -top-1.1 opacity-50 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="pr-12 pl-4 py-3 mb-4 rounded-lg relative border-l-4 border-l-[#a21919] border border-transparent bg-danger text-white">
<button type="button" class="remove-btn text-dark absolute right-0 py-5 px-4 -top-1.1 opacity-50 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="pr-12 pl-4 py-3 mb-4 rounded-lg relative border-l-4 border-l-[#040404] border border-transparent bg-dark text-white">
<button type="button" class="remove-btn text-dark absolute right-0 py-5 px-4 -top-1.1 opacity-50 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="pr-12 pl-4 py-3 mb-4 rounded-lg relative border-l-4 border-l-[#a2b2c9] border border-transparent text-dark bg-[#F3F5F8]">
<button type="button" class="remove-btn text-dark absolute right-0 py-5 px-4 -top-1.1 opacity-50 z-[2]"><span><i class="fa-solid fa-xmark scale-150 text-white"></i></span>
</button>
<strong>Error!</strong> Message Sending failed.
</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 class="pr-12 pl-4 py-3 mb-4 rounded-lg relative border border-transparent bg-primary text-white">
<button type="button" class="remove-btn text-dark absolute right-0 py-5 px-4 -top-1.1 opacity-50 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="pr-12 pl-4 py-3 mb-4 rounded-lg relative border border-transparent bg-[#1F2025] text-white">
<button type="button" class="remove-btn text-dark absolute right-0 py-5 px-4 -top-1.1 opacity-50 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="pr-12 pl-4 py-3 mb-4 rounded-lg relative border border-transparent bg-success text-white">
<button type="button" class="remove-btn text-dark absolute right-0 py-5 px-4 -top-1.1 opacity-50 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="pr-12 pl-4 py-3 mb-4 rounded-lg relative border border-transparent text-white bg-info">
<button type="button" class="remove-btn text-dark absolute right-0 py-5 px-4 -top-1.1 opacity-50 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="pr-12 pl-4 py-3 mb-4 rounded-lg relative border border-transparent bg-warning text-white">
<button type="button" class="remove-btn text-dark absolute right-0 py-5 px-4 -top-1.1 opacity-50 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="pr-12 pl-4 py-3 mb-4 rounded-lg relative border border-transparent bg-danger text-white">
<button type="button" class="remove-btn text-dark absolute right-0 py-5 px-4 -top-1.1 opacity-50 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="pr-12 pl-4 py-3 mb-4 rounded-lg relative border border-transparent bg-dark text-white">
<button type="button" class="remove-btn text-dark absolute right-0 py-5 px-4 -top-1.1 opacity-50 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="pr-12 pl-4 py-3 mb-4 rounded-lg relative border border-transparent text-dark bg-[#F3F5F8]">
<button type="button" class="remove-btn text-dark absolute right-0 py-5 px-4 -top-1.1 opacity-50 z-[2]"><span><i class="fa-solid fa-xmark scale-150 text-white"></i></span>
</button>
<strong>Error!</strong> Message Sending failed.
</div>
Alert with Link
WOW! Eveything looks OK. Please check this one as
well
WOW! Eveything looks OK. Please check this one as
well
WOW! Eveything looks OK. Please check this one as
well
Hey! Take a quick look. My birthday party
Warning! Why you did it to me! Check this out
Error! Something Went wrong Click here for details.
Error! Something Went wrong Click here for details.
Error! Something Went wrong Click here for details.
<div class="pr-12 pl-4 py-3 mb-4 rounded-lg relative text-primary bg-primarylight border border-primarylight">
<button type="button" class="remove-btn text-dark absolute right-0 py-5 px-4 -top-1.1 opacity-50 z-[2]"><span><i class="fa-solid fa-xmark scale-150"></i></span>
</button>
<strong>WOW! Eveything looks OK.</strong> <a href="javascript:void(0);" class="text-body">Please check this one as
well</a>
</div>
<div class="pr-12 pl-4 py-3 mb-4 rounded-lg relative border border-transparent bg-secondarylight text-secondary">
<button type="button" class="remove-btn text-dark absolute right-0 py-5 px-4 -top-1.1 opacity-50 z-[2]"><span><i class="fa-solid fa-xmark scale-150"></i></span>
</button>
<strong>WOW! Eveything looks OK.</strong> <a href="javascript:void(0);" class="text-body">Please check this one as
well</a>
</div>
<div class="pr-12 pl-4 py-3 mb-4 rounded-lg relative border border-transparent text-success bg-successlight">
<button type="button" class="remove-btn text-dark absolute right-0 py-5 px-4 -top-1.1 opacity-50 z-[2]"><span><i class="fa-solid fa-xmark scale-150"></i></span>
</button>
<strong>WOW! Eveything looks OK.</strong> <a href="javascript:void(0);" class="text-body">Please check this one as
well</a>
</div>
<div class="pr-12 pl-4 py-3 mb-4 rounded-lg relative border border-transparent text-info bg-infolight">
<button type="button" class="remove-btn text-dark absolute right-0 py-5 px-4 -top-1.1 opacity-50 z-[2]"><span><i class="fa-solid fa-xmark scale-150"></i></span>
</button>
<strong>Hey! Take a quick look.</strong> <a href="javascript:void(0);" class="text-body">My birthday party</a>
</div>
<div class="pr-12 pl-4 py-3 mb-4 rounded-lg relative border border-transparent text-warning bg-warninglight">
<button type="button" class="remove-btn text-dark absolute right-0 py-5 px-4 -top-1.1 opacity-50 z-[2]"><span><i class="fa-solid fa-xmark scale-150"></i></span>
</button>
<strong>Warning!</strong> Why you did it to me! <a href="javascript:void(0);" class="text-body">Check this out</a>
</div>
<div class="pr-12 pl-4 py-3 mb-4 rounded-lg relative border border-transparent text-danger bg-dangerlight dark:bg-[#e5555526] dark:border-[#e5555526]">
<button type="button" class="remove-btn text-dark absolute right-0 py-5 px-4 -top-1.1 opacity-50 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="text-body">Click here for details.</a>
</div>
<div class="pr-12 pl-4 py-3 mb-4 rounded-lg relative border border-transparent text-dark bg-alertdark">
<button type="button" class="remove-btn text-dark absolute right-0 py-5 px-4 -top-1.1 opacity-50 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="text-body">Click here for details.</a>
</div>
<div class="pr-12 pl-4 py-3 mb-4 rounded-lg relative border border-transparent text-dark bg-[#F3F5F8]">
<button type="button" class="remove-btn text-dark absolute right-0 py-5 px-4 -top-1.1 opacity-50 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="text-body">Click here for details.</a>
</div>
Alert with Link and solid color
<div class="pr-12 pl-4 py-3 mb-4 rounded-lg relative border border-transparent bg-primary text-white">
<button type="button" class="remove-btn text-dark absolute right-0 py-5 px-4 -top-1.1 opacity-50 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="pr-12 pl-4 py-3 mb-4 rounded-lg relative border border-transparent bg-[#1F2025] text-white">
<button type="button" class="remove-btn text-dark absolute right-0 py-5 px-4 -top-1.1 opacity-50 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-dark ml-1">upgrade</a>
</div>
<div class="pr-12 pl-4 py-3 mb-4 rounded-lg relative border border-transparent bg-success text-white">
<button type="button" class="remove-btn text-dark absolute right-0 py-5 px-4 -top-1.1 opacity-50 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="pr-12 pl-4 py-3 mb-4 rounded-lg relative border border-transparent text-white bg-info">
<button type="button" class="remove-btn text-dark absolute right-0 py-5 px-4 -top-1.1 opacity-50 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="pr-12 pl-4 py-3 mb-4 rounded-lg relative border border-transparent bg-warning text-white">
<button type="button" class="remove-btn text-dark absolute right-0 py-5 px-4 -top-1.1 opacity-50 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="pr-12 pl-4 py-3 mb-4 rounded-lg relative border border-transparent bg-danger text-white">
<button type="button" class="remove-btn text-dark absolute right-0 py-5 px-4 -top-1.1 opacity-50 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="pr-12 pl-4 py-3 mb-4 rounded-lg relative border border-transparent bg-dark text-white">
<button type="button" class="remove-btn text-dark absolute right-0 py-5 px-4 -top-1.1 opacity-50 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="pr-12 pl-4 py-3 mb-4 rounded-lg relative border border-transparent text-dark bg-[#F3F5F8]">
<button type="button" class="remove-btn text-dark absolute right-0 py-5 px-4 -top-1.1 opacity-50 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>
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 class="row">
<div class="xl:w-1/2 w-full">
<div class="pr-12 pl-4 py-3 mb-4 rounded-lg relative border border-transparent bg-primarylight">
<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>
<button class="btn btn-sm bg-primary hover:bg-primaryhover hover:shadow-btnprimary text-white">Confirm</button>
<button class="btn btn-sm text-primary !shadow-none">Cancel</button>
</div>
</div>
<div class="xl:w-1/2 w-full">
<div class="pr-12 pl-4 py-3 mb-4 rounded-lg relative border border-transparent bg-secondarylight">
<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>
<button class="btn btn-sm btn bg-secondary hover:bg-secondaryhover hover:shadow-btnsecondary text-white">Confirm</button>
<button class="btn btn-sm text-primary !shadow-none">Cancel</button>
</div>
</div>
<div class="xl:w-1/2 w-full">
<div class="pr-12 pl-4 py-3 mb-4 rounded-lg relative border border-transparent bg-successlight">
<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>
<button class="btn btn-sm btn bg-success hover:bg-successhover hover:shadow-btnsuccess text-white">Confirm</button>
<button class="btn btn-sm text-primary !shadow-none">Cancel</button>
</div>
</div>
<div class="xl:w-1/2 w-full">
<div class="pr-12 pl-4 py-3 mb-4 rounded-lg relative border border-transparent bg-infolight">
<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>
<button class="btn btn-sm btn bg-info hover:bg-infohover hover:shadow-btninfo text-white">Confirm</button>
<button class="btn btn-sm text-primary !shadow-none">Cancel</button>
</div>
</div>
<div class="xl:w-1/2 w-full">
<div class="pr-12 pl-4 py-3 mb-4 rounded-lg relative border border-transparent bg-warninglight">
<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>
<button class="btn btn-sm btn bg-warning hover:bg-warninghover hover:shadow-btnwarning text-white">Confirm</button>
<button class="btn btn-sm text-primary !shadow-none">Cancel</button>
</div>
</div>
<div class="xl:w-1/2 w-full">
<div class="pr-12 pl-4 py-3 mb-4 rounded-lg relative border border-transparent bg-dangerlight dark:bg-[#e5555526] dark:border-[#e5555526]">
<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>
<button class="btn btn-sm btn bg-danger hover:bg-dangerhover hover:shadow-btndanger text-white">Confirm</button>
<button class="btn btn-sm text-primary !shadow-none">Cancel</button>
</div>
</div>
<div class="xl:w-1/2 w-full">
<div class="pr-12 pl-4 py-3 mb-4 rounded-lg relative border border-transparent bg-alertdark">
<p class="text-dark mb-2"><strong>Danger! </strong> Religion And Science
</p>
<p class="mb-4 text-dark leading-normal">What is the loop of Creation? How is there something from nothing? In spite of the fact.. </p>
<button class="btn btn-sm btn bg-dark hover:bg-darkhover hover:shadow-btndark text-white">Confirm</button>
<button class="btn btn-sm text-primary !shadow-none">Cancel</button>
</div>
</div>
<div class="xl:w-1/2 w-full">
<div class="pr-12 pl-4 py-3 mb-4 rounded-lg relative border border-transparent bg-light">
<p class="text-dark mb-2"><strong>Danger! </strong> Religion And Science</p>
<p class="mb-4 text-dark leading-normal">What is the loop of Creation? How is there something from nothing? In spite of the fact.. </p>
<button class="btn btn-sm btn bg-dark hover:bg-darkhover hover:shadow-btndark text-white">Confirm</button>
<button class="btn btn-sm text-primary !shadow-none">Cancel</button>
</div>
</div>
</div>
Alert Icon Left
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 class="pr-12 pl-4 py-3 mb-4 rounded-lg relative border border-transparent bg-primary text-white">
<span><i class="mdi mdi-account-search"></i></span>
<button type="button" class="remove-btn text-dark absolute right-0 py-5 px-4 -top-1.1 opacity-50 z-[2]"><span><i class="fa-solid fa-xmark scale-150 text-white"></i></span>
</button> Success! Message has been sent.
</div>
<div class="pr-12 pl-4 py-3 mb-4 rounded-lg relative border border-transparent bg-[#1F2025] text-white">
<span><i class="mdi mdi-bell"></i></span>
<button type="button" class="remove-btn text-dark absolute right-0 py-5 px-4 -top-1.1 opacity-50 z-[2]"><span><i class="fa-solid fa-xmark scale-150 text-white"></i></span>
</button> Success! Message has been sent.
</div>
<div class="pr-12 pl-4 py-3 mb-4 rounded-lg relative border border-transparent bg-success text-white">
<span><i class="mdi mdi-check"></i></span>
<button type="button" class="remove-btn text-dark absolute right-0 py-5 px-4 -top-1.1 opacity-50 z-[2]"><span><i class="fa-solid fa-xmark scale-150 text-white"></i></span>
</button> Success! Message has been sent.
</div>
<div class="pr-12 pl-4 py-3 mb-4 rounded-lg relative border border-transparent bg-info text-white">
<span><i class="mdi mdi-email"></i></span>
<button type="button" class="remove-btn text-dark absolute right-0 py-5 px-4 -top-1.1 opacity-50 z-[2]"><span><i class="fa-solid fa-xmark scale-150 text-white"></i></span>
</button> Info! You have got 5 new email.
</div>
<div class="pr-12 pl-4 py-3 mb-4 rounded-lg relative border border-transparent bg-warning text-white">
<span><i class="mdi mdi-alert"></i></span>
<button type="button" class="remove-btn text-dark absolute right-0 py-5 px-4 -top-1.1 opacity-50 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="pr-12 pl-4 py-3 mb-4 rounded-lg relative border border-transparent bg-danger text-white">
<span><i class="mdi mdi-help"></i></span>
<button type="button" class="remove-btn text-dark absolute right-0 py-5 px-4 -top-1.1 opacity-50 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="pr-12 pl-4 py-3 mb-4 rounded-lg relative border border-transparent bg-dark text-white">
<span><i class="mdi mdi-settings"></i></span>
<button type="button" class="remove-btn text-dark absolute right-0 py-5 px-4 -top-1.1 opacity-50 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="pr-12 pl-4 py-3 mb-4 rounded-lg relative border border-transparent text-dark bg-[#F3F5F8]">
<span><i class="mdi mdi-cogs"></i></span>
<button type="button" class="remove-btn text-dark absolute right-0 py-5 px-4 -top-1.1 opacity-50 z-[2]"><span><i class="fa-solid fa-xmark scale-150 text-white"></i></span>
</button>
<strong>Error!</strong> Message Sending failed.
</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 class="pr-12 pl-4 py-3 mb-4 rounded-lg relative border border-primary text-primary">
<button type="button" class="remove-btn text-dark absolute right-0 py-5 px-4 -top-1.1 opacity-50 z-[2]"><span><i class="fa-solid fa-xmark scale-150"></i></span>
</button> Success! Message has been sent.
</div>
<div class="pr-12 pl-4 py-3 mb-4 rounded-lg relative border border-secondary text-secondary">
<button type="button" class="remove-btn text-dark absolute right-0 py-5 px-4 -top-1.1 opacity-50 z-[2]"><span><i class="fa-solid fa-xmark scale-150"></i></span>
</button> Success! Message has been sent.
</div>
<div class="pr-12 pl-4 py-3 mb-4 rounded-lg relative border border-success text-success">
<button type="button" class="remove-btn text-dark absolute right-0 py-5 px-4 -top-1.1 opacity-50 z-[2]"><span><i class="fa-solid fa-xmark scale-150"></i></span>
</button> Success! Message has been sent.
</div>
<div class="pr-12 pl-4 py-3 mb-4 rounded-lg relative border border-info text-info">
<button type="button" class="remove-btn text-dark absolute right-0 py-5 px-4 -top-1.1 opacity-50 z-[2]"><span><i class="fa-solid fa-xmark scale-150"></i></span>
</button> Info! You have got 5 new email.
</div>
<div class="pr-12 pl-4 py-3 mb-4 rounded-lg relative border border-warning text-warning">
<button type="button" class="remove-btn text-dark absolute right-0 py-5 px-4 -top-1.1 opacity-50 z-[2]"><span><i class="fa-solid fa-xmark scale-150"></i></span>
</button>
<strong>Warning!</strong> Something went wrong. Please check.
</div>
<div class="pr-12 pl-4 py-3 mb-4 rounded-lg relative border border-danger text-danger">
<button type="button" class="remove-btn text-dark absolute right-0 py-5 px-4 -top-1.1 opacity-50 z-[2]"><span><i class="fa-solid fa-xmark scale-150"></i></span>
</button>
<strong>Error!</strong> Message Sending failed.
</div>
<div class="pr-12 pl-4 py-3 mb-4 rounded-lg relative border border-dark text-dark">
<button type="button" class="remove-btn text-dark absolute right-0 py-5 px-4 -top-1.1 opacity-50 z-[2]"><span><i class="fa-solid fa-xmark scale-150"></i></span>
</button>
<strong>Error!</strong> Message Sending failed.
</div>
<div class="pr-12 pl-4 py-3 mb-4 rounded-lg relative border border-light text-dark">
<button type="button" class="remove-btn text-dark absolute right-0 py-5 px-4 -top-1.1 opacity-50 z-[2]"><span><i class="fa-solid fa-xmark scale-150"></i></span>
</button>
<strong>Error!</strong> Message Sending failed.
</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 class="row">
<div class="xl:w-1/2 w-full">
<div class="pr-12 pl-4 py-3 mb-4 rounded-lg relative border border-transparent text-white bg-[#1877F2]">
<button type="button" class="remove-btn text-dark absolute right-0 py-5 px-4 -top-1.1 opacity-50 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.6 social-icon">
<span><i class="text-4.65xl mdi mdi-facebook"></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="pr-12 pl-4 py-3 mb-4 rounded-lg relative border border-transparent text-white bg-[#03A9F4]">
<button type="button" class="remove-btn text-dark absolute right-0 py-5 px-4 -top-1.1 opacity-50 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.6 social-icon">
<span><i class="text-4.65xl mdi mdi-twitter"></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="pr-12 pl-4 py-3 mb-4 rounded-lg relative border border-transparent text-white bg-[#1976D2]">
<button type="button" class="remove-btn text-dark absolute right-0 py-5 px-4 -top-1.1 opacity-50 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.6 social-icon">
<span><i class="text-4.65xl mdi mdi-linkedin"></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="pr-12 pl-4 py-3 mb-4 rounded-lg relative border border-transparent text-white bg-[#D93F21]">
<button type="button" class="remove-btn text-dark absolute right-0 py-5 px-4 -top-1.1 opacity-50 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.6 social-icon">
<span><i class="text-4.65xl mdi mdi-google-plus"></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>
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 class="row">
<div class="xl:w-1/2 w-full">
<div class="pr-12 pl-4 py-3 mb-4 rounded-lg relative text-primary bg-primarylight border border-primarylight">
<button type="button" class="remove-btn text-dark absolute right-0 py-5 px-4 -top-1.1 opacity-50 z-[2]"><span><i class="fa-solid fa-xmark scale-150"></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="pr-12 pl-4 py-3 mb-4 rounded-lg relative border border-transparent bg-secondarylight text-secondary">
<button type="button" class="remove-btn text-dark absolute right-0 py-5 px-4 -top-1.1 opacity-50 z-[2]"><span><i class="fa-solid fa-xmark scale-150"></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="pr-12 pl-4 py-3 mb-4 rounded-lg relative border border-transparent text-success bg-successlight">
<button type="button" class="remove-btn text-dark absolute right-0 py-5 px-4 -top-1.1 opacity-50 z-[2]"><span><i class="fa-solid fa-xmark scale-150"></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="pr-12 pl-4 py-3 mb-4 rounded-lg relative border border-transparent text-info bg-infolight">
<button type="button" class="remove-btn text-dark absolute right-0 py-5 px-4 -top-1.1 opacity-50 z-[2]"><span><i class="fa-solid fa-xmark scale-150"></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="pr-12 pl-4 py-3 mb-4 rounded-lg relative border border-transparent text-warning bg-warninglight">
<button type="button" class="remove-btn text-dark absolute right-0 py-5 px-4 -top-1.1 opacity-50 z-[2]"><span><i class="fa-solid fa-xmark scale-150"></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="pr-12 pl-4 py-3 mb-4 rounded-lg relative border border-transparent text-danger bg-dangerlight dark:bg-[#e5555526] dark:border-[#e5555526]">
<button type="button" class="remove-btn text-dark absolute right-0 py-5 px-4 -top-1.1 opacity-50 z-[2]"><span><i class="fa-solid fa-xmark scale-150"></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="pr-12 pl-4 py-3 mb-4 rounded-lg relative border border-transparent text-dark bg-alertdark">
<button type="button" class="remove-btn text-dark absolute right-0 py-5 px-4 -top-1.1 opacity-50 z-[2]"><span><i class="fa-solid fa-xmark scale-150"></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-dark">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="pr-12 pl-4 py-3 mb-4 rounded-lg relative border border-transparent text-dark bg-[#F3F5F8]">
<button type="button" class="remove-btn text-dark absolute right-0 py-5 px-4 -top-1.1 opacity-50 z-[2]"><span><i class="fa-solid fa-xmark scale-150"></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-dark">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>
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 class="row">
<div class="xl:w-1/2 w-full">
<div class="pr-12 pl-4 py-3 mb-4 rounded-lg relative border border-transparent bg-primary text-white">
<button type="button" class="remove-btn text-dark absolute right-0 py-5 px-4 -top-1.1 opacity-50 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="pr-12 pl-4 py-3 mb-4 rounded-lg relative border border-transparent bg-[#1F2025] text-white">
<button type="button" class="remove-btn text-dark absolute right-0 py-5 px-4 -top-1.1 opacity-50 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="pr-12 pl-4 py-3 mb-4 rounded-lg relative border border-transparent bg-success text-white">
<button type="button" class="remove-btn text-dark absolute right-0 py-5 px-4 -top-1.1 opacity-50 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="pr-12 pl-4 py-3 mb-4 rounded-lg relative border border-transparent text-white bg-info">
<button type="button" class="remove-btn text-dark absolute right-0 py-5 px-4 -top-1.1 opacity-50 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="pr-12 pl-4 py-3 mb-4 rounded-lg relative border border-transparent bg-warning text-white">
<button type="button" class="remove-btn text-dark absolute right-0 py-5 px-4 -top-1.1 opacity-50 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="pr-12 pl-4 py-3 mb-4 rounded-lg relative border border-transparent bg-danger text-white">
<button type="button" class="remove-btn text-dark absolute right-0 py-5 px-4 -top-1.1 opacity-50 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="pr-12 pl-4 py-3 mb-4 rounded-lg relative border border-transparent bg-dark text-white">
<button type="button" class="remove-btn text-dark absolute right-0 py-5 px-4 -top-1.1 opacity-50 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="pr-12 pl-4 py-3 mb-4 rounded-lg relative border border-transparent text-dark bg-[#F3F5F8]">
<button type="button" class="remove-btn text-dark absolute right-0 py-5 px-4 -top-1.1 opacity-50 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-dark">Notifications</h5>
<p class="sm:text-2sm leading-normal text-dark">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>
Alert left icon big
<div class="row">
<div class="xl:w-1/2 w-full">
<div class="pr-12 pl-4 py-3 mb-4 rounded-lg relative border border-transparent text-primary bg-primarylight left-icon-big">
<button type="button" class="remove-btn text-dark absolute right-0 py-5 px-4 -top-1.1 opacity-50 z-[2]"><span><i class="fa-solid fa-xmark scale-150"></i></span>
</button>
<div class="flex items-start">
<div class="self-center mr-3.6 social-icon">
<span><i class="text-4xl leading-none mdi mdi-email-alert"></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="pr-12 pl-4 py-3 mb-4 rounded-lg relative border border-transparent text-warning bg-warninglight left-icon-big">
<button type="button" class="remove-btn text-dark absolute right-0 py-5 px-4 -top-1.1 opacity-50 z-[2]"><span><i class="fa-solid fa-xmark scale-150"></i></span>
</button>
<div class="flex items-start">
<div class="self-center mr-3.6 social-icon">
<span><i class="text-4xl leading-none mdi mdi-help-circle-outline"></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="pr-12 pl-4 py-3 mb-4 rounded-lg relative border border-transparent text-success bg-successlight left-icon-big">
<button type="button" class="remove-btn text-dark absolute right-0 py-5 px-4 -top-1.1 opacity-50 z-[2]"><span><i class="fa-solid fa-xmark scale-150"></i></span>
</button>
<div class="flex items-start">
<div class="self-center mr-3.6 social-icon">
<span><i class="text-4xl leading-none mdi mdi-check-circle-outline"></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="pr-12 pl-4 py-3 mb-4 rounded-lg relative border border-transparent text-danger bg-dangerlight dark:bg-[#e5555526] dark:border-[#e5555526] left-icon-big">
<button type="button" class="remove-btn text-dark absolute right-0 py-5 px-4 -top-1.1 opacity-50 z-[2]"><span><i class="fa-solid fa-xmark scale-150"></i></span>
</button>
<div class="flex items-start">
<div class="self-center mr-3.6 social-icon">
<span><i class="text-4xl leading-none mdi mdi-alert"></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>