Alerts

An alert displays a short, important message in a way that attracts the user's attention without interrupting the user's task.

Examples

                   
 
<div class="alert-box bg-cyan-200 text-cyan-800">
    A primary alert example with a text link
    <a class="link-text">Text Link</a>
</div>

 
<div class="alert-box bg-sky-300 text-sky-800">
    A secondary alert example!!!!
</div>

 
<div class="alert-box bg-green-200 text-green-800">
    <span><i class="alert-icon fas fa-check-circle"></i></span>
    A success alert example: order placed
</div>

 
<div class="alert-box bg-red-200 text-red-800">
    <span><i class="alert-icon fas fa-exclamation-triangle"></i></span>
    A danger alert example: Are you sure you want to delete the account
    permanently?
</div>

 
<div class="alert-box bg-yellow-200 text-yellow-800">
    <span><i class="alert-icon fas fa-exclamation-triangle"></i></span>
    A warning alert example: Fill all the fields before submitting
</div>

 
<div class="alert-box bg-orange-200 text-orange-800" id="alert-example-close">
  <span>
      <i class="alert-icon fas fa-exclamation-triangle"></i> 
  </span>
   A warning alert example!!!
  <button type="button" class="btn-close" id="alert-example-close-btn"></button>
</div>