Alert

An alert helps us display short, important messages in a way that attracts the attention of the user without interrupting the user's task.

Examples

           

<div class="alert bg-indigo-300 text-indigo-800">This is an alert!!!</div>


<div class="alert bg-green-200 text-green-800"> <span><i class="fas
fa-check-circle"></i></span> Success alert: order placed </div>


<div class="alert bg-red-200 text-red-800"> <span><i class="fas
fa-exclamation-triangle"></i></span> Danger alert: This file will be
permanentaly deleted. Are you sure you want to proceed? </div>


<div class="alert bg-yellow-200 text-yellow-800"> <span><i class="fas
fa-exclamation-triangle"></i></span> Warning alert: Low storage </div>


<div class="alert alert-with-btn bg-orange-300 text-orange-800"> <span>
<i class="alert-icon fas fa-exclamation-triangle"></i> Warning alert!!!
</span> <button type="button" class="alert-btn"
id="alert-example-close-btn"> <i class="fa-solid fa-x"></i> </button>
</div>