Default Alert
Use these examples of Tailwind Alert for creating clear and informative feedback messages tailored to your specific user interactions.
Attention Required!
For your reference, please ensure you have reviewed the information below.
Attention Required!
For your reference, please ensure you have reviewed the information below.
Attention Required!
For your reference, please ensure you have reviewed the information below.
Attention Required!
For your reference, please ensure you have reviewed the information below.
Attention Required!
For your reference, please ensure you have reviewed the information below.
Attention Required!
For your reference, please ensure you have reviewed the information below.
<div class="flex flex-col gap-4">
<!--begin:: Alert-->
<div class="flex flex-col justify-center gap-1 rounded-lg p-4 bg-primary-light">
<h3 class="text-md leading-none font-semibold text-gray-900">
Attention Required!
</h3>
<p class="text-gray-700 text-2sm font-normal">
For your reference, please ensure you have reviewed the information below.
</p>
</div>
<!--end:: Alert-->
<!--begin:: Alert-->
<div class="flex flex-col justify-center gap-1 rounded-lg p-4 bg-success-light">
<h3 class="text-md leading-none font-semibold text-gray-900">
Attention Required!
</h3>
<p class="text-gray-700 text-2sm font-normal">
For your reference, please ensure you have reviewed the information below.
</p>
</div>
<!--end:: Alert-->
<!--begin:: Alert-->
<div class="flex flex-col justify-center gap-1 rounded-lg p-4 bg-danger-light">
<h3 class="text-md leading-none font-semibold text-gray-900">
Attention Required!
</h3>
<p class="text-gray-700 text-2sm font-normal">
For your reference, please ensure you have reviewed the information below.
</p>
</div>
<!--end:: Alert-->
<!--begin:: Alert-->
<div class="flex flex-col justify-center gap-1 rounded-lg p-4 bg-warning-light">
<h3 class="text-md leading-none font-semibold text-gray-900">
Attention Required!
</h3>
<p class="text-gray-700 text-2sm font-normal">
For your reference, please ensure you have reviewed the information below.
</p>
</div>
<!--end:: Alert-->
<!--begin:: Alert-->
<div class="flex flex-col justify-center gap-1 rounded-lg p-4 bg-info-light">
<h3 class="text-md leading-none font-semibold text-gray-900">
Attention Required!
</h3>
<p class="text-gray-700 text-2sm font-normal">
For your reference, please ensure you have reviewed the information below.
</p>
</div>
<!--end:: Alert-->
<!--begin:: Alert-->
<div class="flex flex-col justify-center gap-1 rounded-lg p-4 bg-dark-light">
<h3 class="text-md leading-none font-semibold text-gray-900">
Attention Required!
</h3>
<p class="text-gray-700 text-2sm font-normal">
For your reference, please ensure you have reviewed the information below.
</p>
</div>
<!--end:: Alert-->
</div>
