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="alert py-3 px-6 mb-4 sm:text-sm text-xs rounded-md relative text-primary bg-primary-light border border-primary-light">
<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="close-btn absolute right-0 py-5 px-4 top-[-5px] opacity-50 z-[2] dark:text-white">
<span><i class="fa-solid fa-xmark scale-[1.4]"></i></span>
</button>
</div>
<div class="alert py-3 px-6 mb-4 sm:text-sm text-xs rounded-md relative border border-transparent bg-badge-secondary 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"><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="close-btn absolute right-0 py-5 px-4 top-[-5px] opacity-50 z-[2] dark:text-white">
<span><i class="fa-solid fa-xmark scale-[1.4]"></i></span>
</button>
</div>
<div class="alert py-3 px-6 mb-4 sm:text-sm text-xs rounded-md relative border border-transparent text-success bg-success-light">
<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="close-btn absolute right-0 py-5 px-4 top-[-5px] opacity-50 z-[2] dark:text-white"><span><i class="fa-solid fa-xmark scale-[1.4]"></i></span>
</button>
</div>
<div class="alert py-3 px-6 mb-4 sm:text-sm text-xs rounded-md relative border border-transparent text-info bg-info-light">
<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="close-btn absolute right-0 py-5 px-4 top-[-5px] opacity-50 z-[2] dark:text-white"><span><i class="fa-solid fa-xmark scale-[1.4]"></i></span>
</button>
</div>
<div class="alert py-3 px-6 mb-4 sm:text-sm text-xs rounded-md relative border border-transparent text-warning bg-warning-light">
<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="close-btn absolute right-0 py-5 px-4 top-[-5px] opacity-50 z-[2] dark:text-white">
<span><i class="fa-solid fa-xmark scale-[1.4]"></i></span>
</button>
</div>
<div class="alert py-3 px-6 mb-4 sm:text-sm text-xs rounded-md relative border border-transparent text-danger bg-danger-light dark:bg-[#ff5e5e26] dark:border-[#ff5e5e26]">
<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="close-btn absolute right-0 py-5 px-4 top-[-5px] opacity-50 z-[2] dark:text-white"><span><i class="fa-solid fa-xmark scale-[1.4]"></i></span>
</button>
</div>
<div class="alert py-3 px-6 mb-4 sm:text-sm text-xs rounded-md relative border border-transparent text-dark bg-d-light dark:bg-[#6e6e6e59] dark:border-[#6e6e6e59] dark:text-white show">
<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="close-btn absolute right-0 py-5 px-4 top-[-5px] opacity-50 z-[2] dark:text-white">
<span><i class="fa-solid fa-xmark scale-[1.4]"></i></span>
</button>
</div>
<div class="alert py-3 px-6 mb-4 sm:text-sm text-xs rounded-md relative border border-transparent text-dark bg-d-light-2">
<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="close-btn absolute right-0 py-5 px-4 top-[-5px] opacity-50 z-[2] dark:text-white">
<span><i class="fa-solid fa-xmark scale-[1.4]"></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="alert py-3 px-6 mb-4 sm:text-sm text-xs rounded-md 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="close-btn absolute right-0 py-5 px-4 top-[-5px] opacity-50 z-[2] dark:text-white">
<span><i class="fa-solid fa-xmark scale-[1.4]"></i></span>
</button>
</div>
<div class="alert py-3 px-6 mb-4 sm:text-sm text-xs rounded-md relative border border-transparent bg-secondary 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="close-btn absolute right-0 py-5 px-4 top-[-5px] opacity-50 z-[2] dark:text-white">
<span><i class="fa-solid fa-xmark scale-[1.4]"></i></span>
</button>
</div>
<div class="alert py-3 px-6 mb-4 sm:text-sm text-xs rounded-md 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="close-btn absolute right-0 py-5 px-4 top-[-5px] opacity-50 z-[2] dark:text-white">
<span><i class="fa-solid fa-xmark scale-[1.4]"></i></span>
</button>
</div>
<div class="alert py-3 px-6 mb-4 sm:text-sm text-xs rounded-md 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="close-btn absolute right-0 py-5 px-4 top-[-5px] opacity-50 z-[2] dark:text-white">
<span><i class="fa-solid fa-xmark scale-[1.4]"></i></span>
</button>
</div>
<div class="alert py-3 px-6 mb-4 sm:text-sm text-xs rounded-md 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="close-btn absolute right-0 py-5 px-4 top-[-5px] opacity-50 z-[2] dark:text-white">
<span><i class="fa-solid fa-xmark scale-[1.4]"></i></span>
</button>
</div>
<div class="alert py-3 px-6 mb-4 sm:text-sm text-xs rounded-md 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="close-btn absolute right-0 py-5 px-4 top-[-5px] opacity-50 z-[2] dark:text-white"><span><i class="fa-solid fa-xmark scale-[1.4]"></i></span>
</button>
</div>
<div class="alert py-3 px-6 mb-4 sm:text-sm text-xs rounded-md 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="close-btn absolute right-0 py-5 px-4 top-[-5px] opacity-50 z-[2] dark:text-white"><span><i class="fa-solid fa-xmark scale-[1.4]"></i></span>
</button>
</div>
<div class="alert py-3 px-6 mb-4 sm:text-sm text-xs rounded-md relative border border-transparent text-dark bg-d-light-2">
<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="close-btn absolute right-0 py-5 px-4 top-[-5px] opacity-50 z-[2] dark:text-white"><span><i class="fa-solid fa-xmark scale-[1.4]"></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="alert py-3 px-6 mb-4 sm:text-sm text-xs relative border border-transparent bg-primary text-white solid alert-square"><strong>Welcome!</strong> Message has been sent.</div>
<div class="alert py-3 px-6 mb-4 sm:text-sm text-xs relative border border-transparent bg-secondary text-white alert-square"><strong>Done!</strong> Your profile photo updated.</div>
<div class="alert py-3 px-6 mb-4 sm:text-sm text-xs relative border border-transparent bg-success solid text-white "><strong>Success!</strong> Message has been sent.</div>
<div class="alert py-3 px-6 mb-4 sm:text-sm text-xs relative border border-transparent bg-info text-white "><strong>Info!</strong> You have got 5 new email.</div>
<div class="alert py-3 px-6 mb-4 sm:text-sm text-xs relative border border-transparent bg-warning text-white"><strong>Warning!</strong> Something went wrong. Please check.</div>
<div class="alert py-3 px-6 mb-4 sm:text-sm text-xs relative border border-transparent bg-danger text-white"><strong>Error!</strong> Message sending failed.</div>
<div class="alert py-3 px-6 mb-4 sm:text-sm text-xs relative border border-transparent bg-dark text-white"><strong>Error!</strong> You successfully read this important alert message.</div>
<div class="alert py-3 px-6 mb-4 sm:text-sm text-xs relative border border-transparent text-dark bg-d-light-2"><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="alert py-3 px-6 mb-4 sm:text-sm text-xs rounded-full relative border border-transparent bg-primary text-white solid alert-rounded"><strong>Welcome!</strong> Message has been sent.</div>
<div class="alert py-3 px-6 mb-4 sm:text-sm text-xs rounded-full relative border border-transparent bg-secondary text-white alert-rounded"><strong>Done!</strong> Your profile photo updated.</div>
<div class="alert py-3 px-6 mb-4 sm:text-sm text-xs rounded-full relative border border-transparent bg-success solid text-white "><strong>Success!</strong> Message has been sent.</div>
<div class="alert py-3 px-6 mb-4 sm:text-sm text-xs rounded-full relative border border-transparent bg-info text-white "><strong>Info!</strong> You have got 5 new email.</div>
<div class="alert py-3 px-6 mb-4 sm:text-sm text-xs rounded-full relative border border-transparent bg-warning text-white"><strong>Warning!</strong> Something went wrong. Please check.</div>
<div class="alert py-3 px-6 mb-4 sm:text-sm text-xs rounded-full relative border border-transparent bg-danger text-white"><strong>Error!</strong> Message sending failed.</div>
<div class="alert py-3 px-6 mb-4 sm:text-sm text-xs rounded-full relative border border-transparent bg-dark text-white"><strong>Error!</strong> You successfully read this important alert message.</div>
<div class="alert py-3 px-6 mb-4 sm:text-sm text-xs rounded-full relative border border-transparent text-dark bg-d-light-2"><strong>Error!</strong> You successfully read this message..</div>
Dismissable Alerts
Ui Elements default style
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="alert py-3 px-6 mb-4 sm:text-sm text-xs rounded-md relative text-primary bg-primary-light border border-primary-light">
<button type="button" class="close-btn absolute right-0 py-5 px-4 top-[-5px] opacity-50 z-[2] dark:text-white"><span><i class="fa-solid fa-xmark scale-[1.4]"></i></span>
</button>
<strong>Success!</strong> Message has been sent.
</div>
<div class="alert py-3 px-6 mb-4 sm:text-sm text-xs rounded-md relative border border-transparent bg-badge-secondary dark:text-white">
<button type="button" class="close-btn absolute right-0 py-5 px-4 top-[-5px] opacity-50 z-[2] dark:text-white"><span><i class="fa-solid fa-xmark scale-[1.4]"></i></span>
</button>
<strong>Success!</strong> Message has been sent.
</div>
<div class="alert py-3 px-6 mb-4 sm:text-sm text-xs rounded-md relative border border-transparent text-success bg-success-light">
<button type="button" class="close-btn absolute right-0 py-5 px-4 top-[-5px] opacity-50 z-[2] dark:text-white"><span><i class="fa-solid fa-xmark scale-[1.4]"></i></span>
</button>
<strong>Success!</strong> Message has been sent.
</div>
<div class="alert py-3 px-6 mb-4 sm:text-sm text-xs rounded-md relative border border-transparent text-info bg-info-light">
<button type="button" class="close-btn absolute right-0 py-5 px-4 top-[-5px] opacity-50 z-[2] dark:text-white"><span><i class="fa-solid fa-xmark scale-[1.4]"></i></span>
</button>
<strong>Info!</strong> You have got 5 new email.
</div>
<div class="alert py-3 px-6 mb-4 sm:text-sm text-xs rounded-md relative border border-transparent text-warning bg-warning-light">
<button type="button" class="close-btn absolute right-0 py-5 px-4 top-[-5px] opacity-50 z-[2] dark:text-white"><span><i class="fa-solid fa-xmark scale-[1.4]"></i></span>
</button>
<strong>Warning!</strong> Something went wrong. Please check.
</div>
<div class="alert py-3 px-6 mb-4 sm:text-sm text-xs rounded-md relative border border-transparent text-danger bg-danger-light dark:bg-[#ff5e5e26] dark:border-[#ff5e5e26]">
<button type="button" class="close-btn absolute right-0 py-5 px-4 top-[-5px] opacity-50 z-[2] dark:text-white"><span><i class="fa-solid fa-xmark scale-[1.4]"></i></span>
</button>
<strong>Error!</strong> Message Sending failed.
</div>
<div class="alert py-3 px-6 mb-4 sm:text-sm text-xs rounded-md relative border border-transparent text-dark bg-d-light dark:bg-[#6e6e6e59] dark:border-[#6e6e6e59] dark:text-white show">
<button type="button" class="close-btn absolute right-0 py-5 px-4 top-[-5px] opacity-50 z-[2] dark:text-white"><span><i class="fa-solid fa-xmark scale-[1.4]"></i></span>
</button>
<strong>Error!</strong> Message Sending failed.
</div>
<div class="alert py-3 px-6 mb-4 sm:text-sm text-xs rounded-md relative border border-transparent text-dark bg-d-light-2">
<button type="button" class="close-btn absolute right-0 py-5 px-4 top-[-5px] opacity-50 z-[2] dark:text-white"><span><i class="fa-solid fa-xmark scale-[1.4]"></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="alert py-3 px-6 mb-4 sm:text-sm text-xs rounded-md relative text-primary bg-primary-light border border-transparent border-l-4 border-l-primary alert-light alert-alt">
<button type="button" class="close-btn absolute right-0 py-5 px-4 top-[-5px] opacity-50 z-[2] dark:text-white"><span><i class="fa-solid fa-xmark scale-[1.4]"></i></span>
</button>
<strong>Success!</strong> Message has been sent.
</div>
<div class="alert py-3 px-6 mb-4 sm:text-sm text-xs rounded-md relative border border-transparent border-l-4 border-l-secondary bg-badge-secondary alert-alt">
<button type="button" class="close-btn absolute right-0 py-5 px-4 top-[-5px] opacity-50 z-[2] dark:text-white"><span><i class="fa-solid fa-xmark scale-[1.4]"></i></span>
</button>
<strong>Success!</strong> Message has been sent.
</div>
<div class="alert py-3 px-6 mb-4 sm:text-sm text-xs rounded-md relative border border-transparent border-l-4 border-l-success text-success bg-success-light alert-alt">
<button type="button" class="close-btn absolute right-0 py-5 px-4 top-[-5px] opacity-50 z-[2] dark:text-white"><span><i class="fa-solid fa-xmark scale-[1.4]"></i></span>
</button>
<strong>Success!</strong> Message has been sent.
</div>
<div class="alert py-3 px-6 mb-4 sm:text-sm text-xs rounded-md relative border border-transparent border-l-4 border-l-info text-info bg-info-light alert-alt">
<button type="button" class="close-btn absolute right-0 py-5 px-4 top-[-5px] opacity-50 z-[2] dark:text-white"><span><i class="fa-solid fa-xmark scale-[1.4]"></i></span>
</button>
<strong>Info!</strong> You have got 5 new email.
</div>
<div class="alert py-3 px-6 mb-4 sm:text-sm text-xs rounded-md relative border border-transparent border-l-4 border-l-warning text-warning bg-warning-light alert-alt">
<button type="button" class="close-btn absolute right-0 py-5 px-4 top-[-5px] opacity-50 z-[2] dark:text-white"><span><i class="fa-solid fa-xmark scale-[1.4]"></i></span>
</button>
<strong>Warning!</strong> Something went wrong. Please check.
</div>
<div class="alert py-3 px-6 mb-4 sm:text-sm text-xs rounded-md relative border border-transparent border-l-4 border-l-danger text-danger bg-danger-light alert-alt dark:bg-[#ff5e5e26] dark:border-[#ff5e5e26]">
<button type="button" class="close-btn absolute right-0 py-5 px-4 top-[-5px] opacity-50 z-[2] dark:text-white"><span><i class="fa-solid fa-xmark scale-[1.4]"></i></span>
</button>
<strong>Error!</strong> Message Sending failed.
</div>
<div class="alert py-3 px-6 mb-4 sm:text-sm text-xs rounded-md relative border border-transparent border-l-4 border-l-dark text-dark bg-d-light dark:bg-[#6e6e6e59] dark:border-[#6e6e6e59] dark:text-white alert-alt">
<button type="button" class="close-btn absolute right-0 py-5 px-4 top-[-5px] opacity-50 z-[2] dark:text-white"><span><i class="fa-solid fa-xmark scale-[1.4]"></i></span>
</button>
<strong>Error!</strong> Message Sending failed.
</div>
<div class="alert py-3 px-6 mb-4 sm:text-sm text-xs rounded-md relative border border-transparent border-l-4 border-l-[#b9b9b9] text-dark bg-d-light-2 alert-alt">
<button type="button" class="close-btn absolute right-0 py-5 px-4 top-[-5px] opacity-50 z-[2] dark:text-white"><span><i class="fa-solid fa-xmark scale-[1.4]"></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="alert py-3 px-6 mb-4 sm:text-sm text-xs rounded-md relative border-l-4 border-l-primary-dark text-white bg-primary border border-primary alert-alt solid">
<button type="button" class="close-btn absolute right-0 py-5 px-4 top-[-5px] opacity-50 z-[2] dark:text-white"><span><i class="fa-solid fa-xmark scale-[1.4]"></i></span>
</button>
<strong>Success!</strong> Message has been sent.
</div>
<div class="alert py-3 px-6 mb-4 sm:text-sm text-xs rounded-md relative border-l-4 border-l-black border border-transparent text-white bg-secondary alert-alt solid">
<button type="button" class="close-btn absolute right-0 py-5 px-4 top-[-5px] opacity-50 z-[2] dark:text-white"><span><i class="fa-solid fa-xmark scale-[1.4]"></i></span>
</button>
<strong>Success!</strong> Message has been sent.
</div>
<div class="alert py-3 px-6 mb-4 sm:text-sm text-xs rounded-md relative border-l-4 border-l-[#1c673c] border border-transparent bg-success text-white alert-alt solid">
<button type="button" class="close-btn absolute right-0 py-5 px-4 top-[-5px] opacity-50 z-[2] dark:text-white"><span><i class="fa-solid fa-xmark scale-[1.4]"></i></span>
</button>
<strong>Success!</strong> Message has been sent.
</div>
<div class="alert py-3 px-6 mb-4 sm:text-sm text-xs rounded-md relative border-l-4 border-l-[#22758e] border border-transparent bg-info text-white alert-alt solid">
<button type="button" class="close-btn absolute right-0 py-5 px-4 top-[-5px] opacity-50 z-[2] dark:text-white"><span><i class="fa-solid fa-xmark scale-[1.4]"></i></span>
</button>
<strong>Info!</strong> You have got 5 new email.
</div>
<div class="alert py-3 px-6 mb-4 sm:text-sm text-xs rounded-md relative border-l-4 border-l-[#805000] border border-transparent bg-warning text-white alert-alt solid">
<button type="button" class="close-btn absolute right-0 py-5 px-4 top-[-5px] opacity-50 z-[2] dark:text-white"><span><i class="fa-solid fa-xmark scale-[1.4]"></i></span>
</button>
<strong>Warning!</strong> Something went wrong. Please check.
</div>
<div class="alert py-3 px-6 mb-4 sm:text-sm text-xs rounded-md relative border-l-4 border-l-[#de0000] border border-transparent bg-danger text-white alert-alt solid">
<button type="button" class="close-btn absolute right-0 py-5 px-4 top-[-5px] opacity-50 z-[2] dark:text-white"><span><i class="fa-solid fa-xmark scale-[1.4]"></i></span>
</button>
<strong>Error!</strong> Message Sending failed.
</div>
<div class="alert py-3 px-6 mb-4 sm:text-sm text-xs rounded-md relative border-l-4 border-l-[#2e2e2e] border border-transparent bg-dark text-white alert-alt solid">
<button type="button" class="close-btn absolute right-0 py-5 px-4 top-[-5px] opacity-50 z-[2] dark:text-white"><span><i class="fa-solid fa-xmark scale-[1.4]"></i></span>
</button>
<strong>Error!</strong> Message Sending failed.
</div>
<div class="alert py-3 px-6 mb-4 sm:text-sm text-xs rounded-md relative border-l-4 border-l-[#9f9f9f] border border-transparent text-dark bg-d-light-2 alert-alt solid">
<button type="button" class="close-btn absolute right-0 py-5 px-4 top-[-5px] opacity-50 z-[2] dark:text-white"><span><i class="fa-solid fa-xmark scale-[1.4]"></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="alert py-3 px-6 mb-4 sm:text-sm text-xs rounded-md relative border border-transparent bg-primary text-white">
<button type="button" class="close-btn absolute right-0 py-5 px-4 top-[-5px] opacity-50 z-[2] dark:text-white"><span><i class="fa-solid fa-xmark scale-[1.4]"></i></span>
</button>
<strong>Success!</strong> Message has been sent.
</div>
<div class="alert py-3 px-6 mb-4 sm:text-sm text-xs rounded-md relative border border-transparent bg-secondary text-white">
<button type="button" class="close-btn absolute right-0 py-5 px-4 top-[-5px] opacity-50 z-[2] dark:text-white"><span><i class="fa-solid fa-xmark scale-[1.4]"></i></span>
</button>
<strong>Success!</strong> Message has been sent.
</div>
<div class="alert py-3 px-6 mb-4 sm:text-sm text-xs rounded-md relative border border-transparent bg-success text-white">
<button type="button" class="close-btn absolute right-0 py-5 px-4 top-[-5px] opacity-50 z-[2] dark:text-white"><span><i class="fa-solid fa-xmark scale-[1.4]"></i></span>
</button>
<strong>Success!</strong> Message has been sent.
</div>
<div class="alert py-3 px-6 mb-4 sm:text-sm text-xs rounded-md relative border border-transparent text-white bg-info">
<button type="button" class="close-btn absolute right-0 py-5 px-4 top-[-5px] opacity-50 z-[2] dark:text-white"><span><i class="fa-solid fa-xmark scale-[1.4]"></i></span>
</button>
<strong>Info!</strong> You have got 5 new email.
</div>
<div class="alert py-3 px-6 mb-4 sm:text-sm text-xs rounded-md relative border border-transparent bg-warning text-white">
<button type="button" class="close-btn absolute right-0 py-5 px-4 top-[-5px] opacity-50 z-[2] dark:text-white"><span><i class="fa-solid fa-xmark scale-[1.4]"></i></span>
</button>
<strong>Warning!</strong> Something went wrong. Please check.
</div>
<div class="alert py-3 px-6 mb-4 sm:text-sm text-xs rounded-md relative border border-transparent bg-danger text-white">
<button type="button" class="close-btn absolute right-0 py-5 px-4 top-[-5px] opacity-50 z-[2] dark:text-white"><span><i class="fa-solid fa-xmark scale-[1.4]"></i></span>
</button>
<strong>Error!</strong> Message Sending failed.
</div>
<div class="alert py-3 px-6 mb-4 sm:text-sm text-xs rounded-md relative border border-transparent bg-dark text-white">
<button type="button" class="close-btn absolute right-0 py-5 px-4 top-[-5px] opacity-50 z-[2] dark:text-white"><span><i class="fa-solid fa-xmark scale-[1.4]"></i></span>
</button>
<strong>Error!</strong> Message Sending failed.
</div>
<div class="alert py-3 px-6 mb-4 sm:text-sm text-xs rounded-md relative border border-transparent text-dark bg-d-light-2">
<button type="button" class="close-btn absolute right-0 py-5 px-4 top-[-5px] opacity-50 z-[2] dark:text-white"><span><i class="fa-solid fa-xmark scale-[1.4]"></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="alert py-3 px-6 mb-4 sm:text-sm text-xs rounded-md relative text-primary bg-primary-light border border-primary-light">
<button type="button" class="close-btn absolute right-0 py-5 px-4 top-[-5px] opacity-50 z-[2] dark:text-white"><span><i class="fa-solid fa-xmark scale-[1.4]"></i></span>
</button>
<strong>WOW! Eveything looks OK.</strong> <a href="javascript:void(0);" class="dark:text-white">Please check this one as
well</a>
</div>
<div class="alert py-3 px-6 mb-4 sm:text-sm text-xs rounded-md relative border border-transparent bg-badge-secondary dark:text-white">
<button type="button" class="close-btn absolute right-0 py-5 px-4 top-[-5px] opacity-50 z-[2] dark:text-white"><span><i class="fa-solid fa-xmark scale-[1.4]"></i></span>
</button>
<strong>WOW! Eveything looks OK.</strong> <a href="javascript:void(0);" class="dark:text-white">Please check this one as
well</a>
</div>
<div class="alert py-3 px-6 mb-4 sm:text-sm text-xs rounded-md relative border border-transparent text-success bg-success-light">
<button type="button" class="close-btn absolute right-0 py-5 px-4 top-[-5px] opacity-50 z-[2] dark:text-white"><span><i class="fa-solid fa-xmark scale-[1.4]"></i></span>
</button>
<strong>WOW! Eveything looks OK.</strong> <a href="javascript:void(0);" class="dark:text-white">Please check this one as
well</a>
</div>
<div class="alert py-3 px-6 mb-4 sm:text-sm text-xs rounded-md relative border border-transparent text-info bg-info-light">
<button type="button" class="close-btn absolute right-0 py-5 px-4 top-[-5px] opacity-50 z-[2] dark:text-white"><span><i class="fa-solid fa-xmark scale-[1.4]"></i></span>
</button>
<strong>Hey! Take a quick look.</strong> <a href="javascript:void(0);" class="dark:text-white">My birthday party</a>
</div>
<div class="alert py-3 px-6 mb-4 sm:text-sm text-xs rounded-md relative border border-transparent text-warning bg-warning-light">
<button type="button" class="close-btn absolute right-0 py-5 px-4 top-[-5px] opacity-50 z-[2] dark:text-white"><span><i class="fa-solid fa-xmark scale-[1.4]"></i></span>
</button>
<strong>Warning!</strong> Why you did it to me! <a href="javascript:void(0);" class="dark:text-white">Check this out</a>
</div>
<div class="alert py-3 px-6 mb-4 sm:text-sm text-xs rounded-md relative border border-transparent text-danger bg-danger-light dark:bg-[#ff5e5e26] dark:border-[#ff5e5e26]">
<button type="button" class="close-btn absolute right-0 py-5 px-4 top-[-5px] opacity-50 z-[2] dark:text-white"><span><i class="fa-solid fa-xmark scale-[1.4]"></i></span>
</button>
<strong>Error!</strong> Something Went wrong <a href="javascript:void(0);" class="dark:text-white">Click here for details.</a>
</div>
<div class="alert py-3 px-6 mb-4 sm:text-sm text-xs rounded-md relative border border-transparent text-dark bg-d-light dark:bg-[#6e6e6e59] dark:border-[#6e6e6e59] dark:text-white show">
<button type="button" class="close-btn absolute right-0 py-5 px-4 top-[-5px] opacity-50 z-[2] dark:text-white"><span><i class="fa-solid fa-xmark scale-[1.4]"></i></span>
</button>
<strong>Error!</strong> Something Went wrong <a href="javascript:void(0);" class="dark:text-white">Click here for details.</a>
</div>
<div class="alert py-3 px-6 mb-4 sm:text-sm text-xs rounded-md relative border border-transparent text-dark bg-d-light-2">
<button type="button" class="close-btn absolute right-0 py-5 px-4 top-[-5px] opacity-50 z-[2] dark:text-white"><span><i class="fa-solid fa-xmark scale-[1.4]"></i></span>
</button>
<strong>Error!</strong> Something Went wrong <a href="javascript:void(0);" class="dark:text-white">Click here for details.</a>
</div>
Alert with Link and solid color
<div class="alert py-3 px-6 mb-4 sm:text-sm text-xs rounded-md relative border border-transparent bg-primary text-white">
<button type="button" class="close-btn absolute right-0 py-5 px-4 top-[-5px] opacity-50 z-[2] dark:text-white"><span><i class="fa-solid fa-xmark scale-[1.4]"></i></span>
</button> WOW! Eveything looks OK. <a href="javascript:void(0);" class="py-[0.3125rem] px-2 text-[0.6875rem] leading-[0.6875rem] text-center inline-block border border-transparent rounded-md dark:bg-[#1E1E1E] dark:text-white bg-[#e8f5ff] text-primary ml-1">upgrade</a>
</div>
<div class="alert py-3 px-6 mb-4 sm:text-sm text-xs rounded-md relative border border-transparent bg-secondary text-white">
<button type="button" class="close-btn absolute right-0 py-5 px-4 top-[-5px] opacity-50 z-[2] dark:text-white"><span><i class="fa-solid fa-xmark scale-[1.4]"></i></span>
</button> WOW! Eveything looks OK. <a href="javascript:void(0);" class="py-[0.3125rem] px-2 text-[0.6875rem] leading-[0.6875rem] text-center inline-block border border-transparent rounded-md dark:bg-transparent dark:text-white text-secondary bg-badge-secondary ml-1">upgrade</a>
</div>
<div class="alert py-3 px-6 mb-4 sm:text-sm text-xs rounded-md relative border border-transparent bg-success text-white">
<button type="button" class="close-btn absolute right-0 py-5 px-4 top-[-5px] opacity-50 z-[2] dark:text-white"><span><i class="fa-solid fa-xmark scale-[1.4]"></i></span>
</button> WOW! Eveything looks OK. <a href="javascript:void(0);" class="py-[0.3125rem] px-2 text-[0.6875rem] leading-[0.6875rem] text-center inline-block border border-transparent rounded-md dark:bg-transparent dark:text-white text-success bg-success-light ml-1">upgrade</a>
</div>
<div class="alert py-3 px-6 mb-4 sm:text-sm text-xs rounded-md relative border border-transparent text-white bg-info">
<button type="button" class="close-btn absolute right-0 py-5 px-4 top-[-5px] opacity-50 z-[2] dark:text-white"><span><i class="fa-solid fa-xmark scale-[1.4]"></i></span>
</button> Hey! Take a quick look. <a href="javascript:void(0);" class="py-[0.3125rem] px-2 text-[0.6875rem] leading-[0.6875rem] text-center inline-block border border-transparent rounded-md dark:bg-transparent dark:text-white text-info bg-info-light ml-1">upgrade</a>
</div>
<div class="alert py-3 px-6 mb-4 sm:text-sm text-xs rounded-md relative border border-transparent bg-warning text-white">
<button type="button" class="close-btn absolute right-0 py-5 px-4 top-[-5px] opacity-50 z-[2] dark:text-white"><span><i class="fa-solid fa-xmark scale-[1.4]"></i></span>
</button>
<strong>Warning!</strong> Why you did it to me! <a href="javascript:void(0);" class="py-[0.3125rem] px-2 text-[0.6875rem] leading-[0.6875rem] text-center inline-block border border-transparent rounded-md dark:bg-transparent dark:text-white text-warning bg-warning-light ml-1">upgrade</a>
</div>
<div class="alert py-3 px-6 mb-4 sm:text-sm text-xs rounded-md relative border border-transparent bg-danger text-white">
<button type="button" class="close-btn absolute right-0 py-5 px-4 top-[-5px] opacity-50 z-[2] dark:text-white"><span><i class="fa-solid fa-xmark scale-[1.4]"></i></span>
</button>
<strong>Error!</strong> Something Went wrong <a href="javascript:void(0);" class="py-[0.3125rem] px-2 text-[0.6875rem] leading-[0.6875rem] text-center inline-block border border-transparent rounded-md dark:bg-transparent dark:text-white text-danger bg-danger-light ml-1">upgrade</a>
</div>
<div class="alert py-3 px-6 mb-4 sm:text-sm text-xs rounded-md relative border border-transparent bg-dark text-white">
<button type="button" class="close-btn absolute right-0 py-5 px-4 top-[-5px] opacity-50 z-[2] dark:text-white"><span><i class="fa-solid fa-xmark scale-[1.4]"></i></span>
</button>
<strong>Error!</strong> Something Went wrong <a href="javascript:void(0);" class="py-[0.3125rem] px-2 text-[0.6875rem] leading-[0.6875rem] text-center inline-block border border-transparent rounded-md dark:bg-transparent dark:text-white text-dark bg-d-light-2 ml-1">upgrade</a>
</div>
<div class="alert py-3 px-6 mb-4 sm:text-sm text-xs rounded-md relative border border-transparent text-dark bg-d-light-2">
<button type="button" class="close-btn absolute right-0 py-5 px-4 top-[-5px] opacity-50 z-[2] dark:text-white"><span><i class="fa-solid fa-xmark scale-[1.4]"></i></span>
</button>
<strong>Error!</strong> Something Went wrong <a href="javascript:void(0);" class="py-[0.3125rem] px-2 text-[0.6875rem] leading-[0.6875rem] text-center inline-block border border-transparent rounded-md dark:bg-transparent dark:text-white text-dark bg-[#e7e7e7] 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="xl:w-1/2 w-full">
<div class="alert py-3 px-6 mb-4 sm:text-sm text-xs rounded-md relative border border-transparent text-primary bg-primary-light notification">
<p class="text-primary mb-2"><strong>Success!</strong> Vampires The Romantic Ideology Behind Them</p>
<p class="mb-4 text-primary leading-[1.5]">The following article covers a topic that has recently moved to center stage-at lease it seems that way.</p>
<button class="py-[5px] px-3 text-sm bg-primary text-white rounded btn-sm">Confirm</button>
<button class="py-[5px] px-3 text-sm text-primary hover:text-hover-primary dark:text-white duration-300">Cancel</button>
</div>
</div>
<div class="xl:w-1/2 w-full">
<div class="alert py-3 px-6 mb-4 sm:text-sm text-xs rounded-md relative border border-transparent bg-badge-secondary notification">
<p class="text-secondary dark:text-white mb-2"><strong>Success!</strong> Vampires The Romantic Ideology Behind Them</p>
<p class="mb-4 text-secondary dark:text-white leading-[1.5]">The following article covers a topic that has recently moved to center stage-at lease it seems that way.</p>
<button class="py-[5px] px-3 text-sm bg-secondary text-white rounded btn-sm">Confirm</button>
<button class="py-[5px] px-3 text-sm text-primary hover:text-hover-primary dark:text-white duration-300">Cancel</button>
</div>
</div>
<div class="xl:w-1/2 w-full">
<div class="alert py-3 px-6 mb-4 sm:text-sm text-xs rounded-md relative border border-transparent text-success bg-success-light notification">
<p class="text-success mb-2"><strong>Success!</strong> Vampires The Romantic Ideology Behind Them</p>
<p class="mb-4 text-success leading-[1.5]">The following article covers a topic that has recently moved to center stage-at lease it seems that way.</p>
<button class="py-[5px] px-3 text-sm bg-success text-white rounded btn-sm">Confirm</button>
<button class="py-[5px] px-3 text-sm text-primary hover:text-hover-primary dark:text-white duration-300">Cancel</button>
</div>
</div>
<div class="xl:w-1/2 w-full">
<div class="alert py-3 px-6 mb-4 sm:text-sm text-xs rounded-md relative border border-transparent text-info bg-info-light notification">
<p class="text-info mb-2"><strong>Success!</strong> Vampires The Romantic Ideology Behind Them</p>
<p class="mb-4 text-info leading-[1.5]">The following article covers a topic that has recently moved to center stage-at lease it seems that way.</p>
<button class="py-[5px] px-3 text-sm bg-info text-white rounded btn-sm">Confirm</button>
<button class="py-[5px] px-3 text-sm text-primary hover:text-hover-primary dark:text-white duration-300">Cancel</button>
</div>
</div>
<div class="xl:w-1/2 w-full">
<div class="alert py-3 px-6 mb-4 sm:text-sm text-xs rounded-md relative border border-transparent text-warning bg-warning-light notification">
<p class="text-warning mb-2"><strong>Success!</strong> Vampires The Romantic Ideology Behind Them</p>
<p class="mb-4 text-warning leading-[1.5]">The following article covers a topic that has recently moved to center stage-at lease it seems that way.</p>
<button class="py-[5px] px-3 text-sm bg-warning text-white rounded btn-sm">Confirm</button>
<button class="py-[5px] px-3 text-sm text-primary hover:text-hover-primary dark:text-white duration-300">Cancel</button>
</div>
</div>
<div class="xl:w-1/2 w-full">
<div class="alert py-3 px-6 mb-4 sm:text-sm text-xs rounded-md relative border border-transparent text-danger bg-danger-light dark:bg-[#ff5e5e26] dark:border-[#ff5e5e26] notification">
<p class="text-danger mb-2"><strong>Danger! </strong> Religion And Science</p>
<p class="mb-4 text-danger leading-[1.5]">What is the loop of Creation? How is there something from nothing? In spite of the fact.. </p>
<button class="py-[5px] px-3 text-sm bg-danger text-white rounded btn-sm">Confirm</button>
<button class="py-[5px] px-3 text-sm text-primary hover:text-hover-primary dark:text-white duration-300">Cancel</button>
</div>
</div>
<div class="xl:w-1/2 w-full">
<div class="alert py-3 px-6 mb-4 sm:text-sm text-xs rounded-md relative border border-transparent text-dark bg-d-light dark:bg-[#6e6e6e59] dark:border-[#6e6e6e59] dark:text-white notification">
<p class="notificaiton-title mb-2"><strong>Danger! </strong> Religion And Science
</p>
<p class="mb-4 text-dark leading-[1.5]">What is the loop of Creation? How is there something from nothing? In spite of the fact.. </p>
<button class="py-[5px] px-3 text-sm bg-dark text-white rounded btn-sm">Confirm</button>
<button class="py-[5px] px-3 text-sm text-primary hover:text-hover-primary dark:text-white duration-300">Cancel</button>
</div>
</div>
<div class="xl:w-1/2 w-full">
<div class="alert py-3 px-6 mb-4 sm:text-sm text-xs rounded-md relative border border-transparent text-light bg-d-light-2 notification">
<p class="text-light mb-2"><strong>Danger! </strong> Religion And Science</p>
<p class="mb-4 text-light leading-[1.5]">What is the loop of Creation? How is there something from nothing? In spite of the fact.. </p>
<button class="py-[5px] px-3 text-sm bg-dark text-white rounded btn-sm">Confirm</button>
<button class="py-[5px] px-3 text-sm text-primary hover:text-hover-primary dark:text-white duration-300">Cancel</button>
</div>
</div>
Alert Icon Left
<div class="alert py-3 px-6 mb-4 sm:text-sm text-xs rounded-md relative border border-transparent bg-primary text-white solid alert-end-icon alert-dismissible">
<span><i class="mdi mdi-account-search"></i></span>
<button type="button" class="close-btn absolute right-0 py-5 px-4 top-[-5px] opacity-50 z-[2] dark:text-white"><span><i class="fa-solid fa-xmark scale-[1.4]"></i></span>
</button> Success! Message has been sent.
</div>
<div class="alert py-3 px-6 mb-4 sm:text-sm text-xs rounded-md relative border border-transparent bg-secondary text-white solid alert-end-icon alert-dismissible">
<span><i class="icon icon-bell-53"></i></span>
<button type="button" class="close-btn absolute right-0 py-5 px-4 top-[-5px] opacity-50 z-[2] dark:text-white"><span><i class="fa-solid fa-xmark scale-[1.4]"></i></span>
</button> Success! Message has been sent.
</div>
<div class="alert py-3 px-6 mb-4 sm:text-sm text-xs rounded-md relative border border-transparent bg-success text-white solid alert-end-icon alert-dismissible">
<span><i class="mdi mdi-check"></i></span>
<button type="button" class="close-btn absolute right-0 py-5 px-4 top-[-5px] opacity-50 z-[2] dark:text-white"><span><i class="fa-solid fa-xmark scale-[1.4]"></i></span>
</button> Success! Message has been sent.
</div>
<div class="alert py-3 px-6 mb-4 sm:text-sm text-xs rounded-md relative border border-transparent bg-info text-white solid alert-end-icon alert-dismissible">
<span><i class="mdi mdi-email"></i></span>
<button type="button" class="close-btn absolute right-0 py-5 px-4 top-[-5px] opacity-50 z-[2] dark:text-white"><span><i class="fa-solid fa-xmark scale-[1.4]"></i></span>
</button> Info! You have got 5 new email.
</div>
<div class="alert py-3 px-6 mb-4 sm:text-sm text-xs rounded-md relative border border-transparent bg-warning text-white solid alert-end-icon alert-dismissible">
<span><i class="mdi mdi-alert"></i></span>
<button type="button" class="close-btn absolute right-0 py-5 px-4 top-[-5px] opacity-50 z-[2] dark:text-white"><span><i class="fa-solid fa-xmark scale-[1.4]"></i></span>
</button>
<strong>Warning!</strong> Something went wrong. Please check.
</div>
<div class="alert py-3 px-6 mb-4 sm:text-sm text-xs rounded-md relative border border-transparent bg-danger text-white solid alert-end-icon alert-dismissible">
<span><i class="mdi mdi-help"></i></span>
<button type="button" class="close-btn absolute right-0 py-5 px-4 top-[-5px] opacity-50 z-[2] dark:text-white"><span><i class="fa-solid fa-xmark scale-[1.4]"></i></span>
</button>
<strong>Error!</strong> Message Sending failed.
</div>
<div class="alert py-3 px-6 mb-4 sm:text-sm text-xs rounded-md relative border border-transparent bg-dark text-white solid alert-end-icon alert-dismissible">
<span><i class="mdi mdi-settings"></i></span>
<button type="button" class="close-btn absolute right-0 py-5 px-4 top-[-5px] opacity-50 z-[2] dark:text-white"><span><i class="fa-solid fa-xmark scale-[1.4]"></i></span>
</button>
<strong>Error!</strong> Message Sending failed.
</div>
<div class="alert py-3 px-6 mb-4 sm:text-sm text-xs rounded-md relative border border-transparent text-dark bg-d-light-2 solid alert-end-icon alert-dismissible">
<span><i class="mdi mdi-cogs"></i></span>
<button type="button" class="close-btn absolute right-0 py-5 px-4 top-[-5px] opacity-50 z-[2] dark:text-white"><span><i class="fa-solid fa-xmark scale-[1.4]"></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="alert py-3 px-6 mb-4 sm:text-sm text-xs rounded-md relative border border-primary text-primary alert-dismissible">
<button type="button" class="close-btn absolute right-0 py-5 px-4 top-[-5px] opacity-50 z-[2] dark:text-white"><span><i class="fa-solid fa-xmark scale-[1.4]"></i></span>
</button> Success! Message has been sent.
</div>
<div class="alert py-3 px-6 mb-4 sm:text-sm text-xs rounded-md relative border border-secondary text-secondary dark:text-white alert-dismissible">
<button type="button" class="close-btn absolute right-0 py-5 px-4 top-[-5px] opacity-50 z-[2] dark:text-white"><span><i class="fa-solid fa-xmark scale-[1.4]"></i></span>
</button> Success! Message has been sent.
</div>
<div class="alert py-3 px-6 mb-4 sm:text-sm text-xs rounded-md relative border border-success text-success alert-dismissible">
<button type="button" class="close-btn absolute right-0 py-5 px-4 top-[-5px] opacity-50 z-[2] dark:text-white"><span><i class="fa-solid fa-xmark scale-[1.4]"></i></span>
</button> Success! Message has been sent.
</div>
<div class="alert py-3 px-6 mb-4 sm:text-sm text-xs rounded-md relative border border-info text-info alert-dismissible">
<button type="button" class="close-btn absolute right-0 py-5 px-4 top-[-5px] opacity-50 z-[2] dark:text-white"><span><i class="fa-solid fa-xmark scale-[1.4]"></i></span>
</button> Info! You have got 5 new email.
</div>
<div class="alert py-3 px-6 mb-4 sm:text-sm text-xs rounded-md relative border border-warning text-warning alert-dismissible">
<button type="button" class="close-btn absolute right-0 py-5 px-4 top-[-5px] opacity-50 z-[2] dark:text-white"><span><i class="fa-solid fa-xmark scale-[1.4]"></i></span>
</button>
<strong>Warning!</strong> Something went wrong. Please check.
</div>
<div class="alert py-3 px-6 mb-4 sm:text-sm text-xs rounded-md relative border border-danger text-danger alert-dismissible">
<button type="button" class="close-btn absolute right-0 py-5 px-4 top-[-5px] opacity-50 z-[2] dark:text-white"><span><i class="fa-solid fa-xmark scale-[1.4]"></i></span>
</button>
<strong>Error!</strong> Message Sending failed.
</div>
<div class="alert py-3 px-6 mb-4 sm:text-sm text-xs rounded-md relative border border-dark text-dark dark:text-white alert-dismissible">
<button type="button" class="close-btn absolute right-0 py-5 px-4 top-[-5px] opacity-50 z-[2] dark:text-white"><span><i class="fa-solid fa-xmark scale-[1.4]"></i></span>
</button>
<strong>Error!</strong> Message Sending failed.
</div>
<div class="alert py-3 px-6 mb-4 sm:text-sm text-xs rounded-md relative border border-d-light-2 text-dark alert-dismissible">
<button type="button" class="close-btn absolute right-0 py-5 px-4 top-[-5px] opacity-50 z-[2] dark:text-white"><span><i class="fa-solid fa-xmark scale-[1.4]"></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="xl:w-1/2 w-full">
<div class="alert py-3 px-6 mb-4 sm:text-sm text-xs rounded-md relative border border-transparent text-white bg-facebook alert-dismissible">
<button type="button" class="close-btn absolute right-0 py-5 px-4 top-[-5px] opacity-50 z-[2] dark:text-white"><span><i class="fa-solid fa-xmark scale-[1.4]"></i></span>
</button>
<div class="media flex items-start">
<div class="self-center mr-[0.9375rem] social-icon">
<span><i class="text-[2.625rem] mdi mdi-facebook"></i></span>
</div>
<div class="media-body">
<h5 class="mt-1 mb-2 text-white">Facebook</h5>
<p class="mb-0 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="alert py-3 px-6 mb-4 sm:text-sm text-xs rounded-md relative border border-transparent text-white bg-twitter alert-dismissible">
<button type="button" class="close-btn absolute right-0 py-5 px-4 top-[-5px] opacity-50 z-[2] dark:text-white"><span><i class="fa-solid fa-xmark scale-[1.4]"></i></span>
</button>
<div class="media flex items-start">
<div class="self-center mr-[0.9375rem] social-icon">
<span><i class="text-[2.625rem] mdi mdi-twitter"></i></span>
</div>
<div class="media-body">
<h5 class="mt-1 mb-2 text-white">Twitter</h5>
<p class="mb-0 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="alert py-3 px-6 mb-4 sm:text-sm text-xs rounded-md relative border border-transparent text-white bg-linkedin alert-dismissible">
<button type="button" class="close-btn absolute right-0 py-5 px-4 top-[-5px] opacity-50 z-[2] dark:text-white"><span><i class="fa-solid fa-xmark scale-[1.4]"></i></span>
</button>
<div class="media flex items-start">
<div class="self-center mr-[0.9375rem] social-icon">
<span><i class="text-[2.625rem] mdi mdi-linkedin"></i></span>
</div>
<div class="media-body">
<h5 class="mt-1 mb-2 text-white">Linkedin</h5>
<p class="mb-0 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="alert py-3 px-6 mb-4 sm:text-sm text-xs rounded-md relative border border-transparent text-white bg-google-plus alert-dismissible">
<button type="button" class="close-btn absolute right-0 py-5 px-4 top-[-5px] opacity-50 z-[2] dark:text-white"><span><i class="fa-solid fa-xmark scale-[1.4]"></i></span>
</button>
<div class="media flex items-start">
<div class="self-center mr-[0.9375rem] social-icon">
<span><i class="text-[2.625rem] mdi mdi-google-plus"></i></span>
</div>
<div class="media-body">
<h5 class="mt-1 mb-2 text-white">Google Plus</h5>
<p class="mb-0 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>
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="xl:w-1/2 w-full">
<div class="alert py-3 px-6 mb-4 sm:text-sm text-xs rounded-md relative text-primary bg-primary-light border border-primary-light">
<button type="button" class="close-btn absolute right-0 py-5 px-4 top-[-5px] opacity-50 z-[2] dark:text-white"><span><i class="fa-solid fa-xmark scale-[1.4]"></i></span>
</button>
<div class="media">
<div class="media-body">
<h5 class="mt-1 mb-1">Notifications</h5>
<p class="mb-0 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="alert py-3 px-6 mb-4 sm:text-sm text-xs rounded-md relative border border-transparent bg-badge-secondary dark:text-white">
<button type="button" class="close-btn absolute right-0 py-5 px-4 top-[-5px] opacity-50 z-[2] dark:text-white"><span><i class="fa-solid fa-xmark scale-[1.4]"></i></span>
</button>
<div class="media">
<div class="media-body">
<h5 class="mt-1 mb-1">Notifications</h5>
<p class="mb-0 text-secondary dark: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="alert py-3 px-6 mb-4 sm:text-sm text-xs rounded-md relative border border-transparent text-success bg-success-light">
<button type="button" class="close-btn absolute right-0 py-5 px-4 top-[-5px] opacity-50 z-[2] dark:text-white"><span><i class="fa-solid fa-xmark scale-[1.4]"></i></span>
</button>
<div class="media">
<div class="media-body">
<h5 class="mt-1 mb-1">Notifications</h5>
<p class="mb-0 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="alert py-3 px-6 mb-4 sm:text-sm text-xs rounded-md relative border border-transparent text-info bg-info-light">
<button type="button" class="close-btn absolute right-0 py-5 px-4 top-[-5px] opacity-50 z-[2] dark:text-white"><span><i class="fa-solid fa-xmark scale-[1.4]"></i></span>
</button>
<div class="media">
<div class="media-body">
<h5 class="mt-1 mb-1">Notifications</h5>
<p class="mb-0 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="alert py-3 px-6 mb-4 sm:text-sm text-xs rounded-md relative border border-transparent text-warning bg-warning-light">
<button type="button" class="close-btn absolute right-0 py-5 px-4 top-[-5px] opacity-50 z-[2] dark:text-white"><span><i class="fa-solid fa-xmark scale-[1.4]"></i></span>
</button>
<div class="media">
<div class="media-body">
<h5 class="mt-1 mb-1">Notifications</h5>
<p class="mb-0 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="alert py-3 px-6 mb-4 sm:text-sm text-xs rounded-md relative border border-transparent text-danger bg-danger-light dark:bg-[#ff5e5e26] dark:border-[#ff5e5e26]">
<button type="button" class="close-btn absolute right-0 py-5 px-4 top-[-5px] opacity-50 z-[2] dark:text-white"><span><i class="fa-solid fa-xmark scale-[1.4]"></i></span>
</button>
<div class="media">
<div class="media-body">
<h5 class="mt-1 mb-1">Notifications</h5>
<p class="mb-0 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="alert py-3 px-6 mb-4 sm:text-sm text-xs rounded-md relative border border-transparent text-dark bg-d-light dark:bg-[#6e6e6e59] dark:border-[#6e6e6e59] dark:text-white show">
<button type="button" class="close-btn absolute right-0 py-5 px-4 top-[-5px] opacity-50 z-[2] dark:text-white"><span><i class="fa-solid fa-xmark scale-[1.4]"></i></span>
</button>
<div class="media">
<div class="media-body">
<h5 class="mt-1 mb-1">Notifications</h5>
<p class="mb-0 dark:text-white 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="alert py-3 px-6 mb-4 sm:text-sm text-xs rounded-md relative border border-transparent text-dark bg-d-light-2">
<button type="button" class="close-btn absolute right-0 py-5 px-4 top-[-5px] opacity-50 z-[2] dark:text-white"><span><i class="fa-solid fa-xmark scale-[1.4]"></i></span>
</button>
<div class="media">
<div class="media-body">
<h5 class="mt-1 mb-1">Notifications</h5>
<p class="mb-0 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>
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="xl:w-1/2 w-full">
<div class="alert py-3 px-6 mb-4 sm:text-sm text-xs rounded-md relative border border-transparent bg-primary text-white">
<button type="button" class="close-btn absolute right-0 py-5 px-4 top-[-5px] opacity-50 z-[2] dark:text-white">
<span><i class="fa-solid fa-xmark scale-[1.4]"></i></span>
</button>
<div class="media">
<div class="media-body">
<h5 class="mt-1 mb-2 text-white">Notifications</h5>
<p class="mb-0 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="alert py-3 px-6 mb-4 sm:text-sm text-xs rounded-md relative border border-transparent bg-secondary text-white">
<button type="button" class="close-btn absolute right-0 py-5 px-4 top-[-5px] opacity-50 z-[2] dark:text-white">
<span><i class="fa-solid fa-xmark scale-[1.4]"></i></span>
</button>
<div class="media">
<div class="media-body">
<h5 class="mt-1 mb-2 text-white">Notifications</h5>
<p class="mb-0 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="alert py-3 px-6 mb-4 sm:text-sm text-xs rounded-md relative border border-transparent bg-success text-white">
<button type="button" class="close-btn absolute right-0 py-5 px-4 top-[-5px] opacity-50 z-[2] dark:text-white">
<span><i class="fa-solid fa-xmark scale-[1.4]"></i></span>
</button>
<div class="media">
<div class="media-body">
<h5 class="mt-1 mb-2 text-white">Notifications</h5>
<p class="mb-0 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="alert py-3 px-6 mb-4 sm:text-sm text-xs rounded-md relative border border-transparent text-white bg-info">
<button type="button" class="close-btn absolute right-0 py-5 px-4 top-[-5px] opacity-50 z-[2] dark:text-white">
<span><i class="fa-solid fa-xmark scale-[1.4]"></i></span>
</button>
<div class="media">
<div class="media-body">
<h5 class="mt-1 mb-2 text-white">Notifications</h5>
<p class="mb-0 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="alert py-3 px-6 mb-4 sm:text-sm text-xs rounded-md relative border border-transparent bg-warning text-white">
<button type="button" class="close-btn absolute right-0 py-5 px-4 top-[-5px] opacity-50 z-[2] dark:text-white">
<span><i class="fa-solid fa-xmark scale-[1.4]"></i></span>
</button>
<div class="media">
<div class="media-body">
<h5 class="mt-1 mb-2 text-white">Notifications</h5>
<p class="mb-0 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="alert py-3 px-6 mb-4 sm:text-sm text-xs rounded-md relative border border-transparent bg-danger text-white">
<button type="button" class="close-btn absolute right-0 py-5 px-4 top-[-5px] opacity-50 z-[2] dark:text-white">
<span><i class="fa-solid fa-xmark scale-[1.4]"></i></span>
</button>
<div class="media">
<div class="media-body">
<h5 class="mt-1 mb-2 text-white">Notifications</h5>
<p class="mb-0 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="alert py-3 px-6 mb-4 sm:text-sm text-xs rounded-md relative border border-transparent bg-dark text-white">
<button type="button" class="close-btn absolute right-0 py-5 px-4 top-[-5px] opacity-50 z-[2] dark:text-white">
<span><i class="fa-solid fa-xmark scale-[1.4]"></i></span>
</button>
<div class="media">
<div class="media-body">
<h5 class="mt-1 mb-2 text-white">Notifications</h5>
<p class="mb-0 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="alert py-3 px-6 mb-4 sm:text-sm text-xs rounded-md relative border border-transparent text-dark bg-d-light-2">
<button type="button" class="close-btn absolute right-0 py-5 px-4 top-[-5px] opacity-50 z-[2] dark:text-white">
<span><i class="fa-solid fa-xmark scale-[1.4]"></i></span>
</button>
<div class="media">
<div class="media-body">
<h5 class="mt-1 mb-2 text-white">Notifications</h5>
<p class="mb-0 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>
Alert left icon big
<div class="xl:w-1/2 w-full">
<div class="alert py-3 px-6 mb-4 sm:text-sm text-xs rounded-md relative border border-transparent text-primary bg-primary-light left-icon-big alert-dismissible">
<button type="button" class="close-btn absolute right-0 py-5 px-4 top-[-5px] opacity-50 z-[2] dark:text-white"><span><i class="fa-solid fa-xmark scale-[1.4]"></i></span>
</button>
<div class="flex items-start">
<div class="self-center mr-[0.9375rem] social-icon">
<span><i class="text-[2.1875rem] leading-[1] mdi mdi-email-alert"></i></span>
</div>
<div class="media-body">
<h6 class="mt-1 mb-2">Welcome to your account, Dear user!</h6>
<p class="mb-0 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="alert py-3 px-6 mb-4 sm:text-sm text-xs rounded-md relative border border-transparent text-warning bg-warning-light left-icon-big alert-dismissible">
<button type="button" class="close-btn absolute right-0 py-5 px-4 top-[-5px] opacity-50 z-[2] dark:text-white"><span><i class="fa-solid fa-xmark scale-[1.4]"></i></span>
</button>
<div class="flex items-start">
<div class="self-center mr-[0.9375rem] social-icon">
<span><i class="text-[2.1875rem] leading-[1] mdi mdi-help-circle-outline"></i></span>
</div>
<div class="media-body">
<h5 class="mt-1 mb-2">Pending!</h5>
<p class="mb-0 text-warning">You message sending failed.</p>
</div>
</div>
</div>
</div>
<div class="xl:w-1/2 w-full">
<div class="alert py-3 px-6 mb-4 sm:text-sm text-xs rounded-md relative border border-transparent text-success bg-success-light left-icon-big alert-dismissible">
<button type="button" class="close-btn absolute right-0 py-5 px-4 top-[-5px] opacity-50 z-[2] dark:text-white"><span><i class="fa-solid fa-xmark scale-[1.4]"></i></span>
</button>
<div class="flex items-start">
<div class="self-center mr-[0.9375rem] social-icon">
<span><i class="text-[2.1875rem] leading-[1] mdi mdi-check-circle-outline"></i></span>
</div>
<div class="media-body">
<h5 class="mt-1 mb-2">Congratulations!</h5>
<p class="mb-0 text-success">You have successfully created a account.</p>
</div>
</div>
</div>
</div>
<div class="xl:w-1/2 w-full">
<div class="alert py-3 px-6 mb-4 sm:text-sm text-xs rounded-md relative border border-transparent text-danger bg-danger-light dark:bg-[#ff5e5e26] dark:border-[#ff5e5e26] left-icon-big alert-dismissible">
<button type="button" class="close-btn absolute right-0 py-5 px-4 top-[-5px] opacity-50 z-[2] dark:text-white"><span><i class="fa-solid fa-xmark scale-[1.4]"></i></span>
</button>
<div class="flex items-start">
<div class="self-center mr-[0.9375rem] social-icon">
<span><i class="text-[2.1875rem] leading-[1] mdi mdi-alert"></i></span>
</div>
<div class="media-body">
<h5 class="mt-1 mb-2">Loading failed!</h5>
<p class="mb-0 text-danger">Again upload your server</p>
</div>
</div>
</div>
</div>