Tailwind CSS Alert - Versoly UI

Added in 1.0 JS Required

Examples

This is a alert — check it out!
This is a primary alert — check it out!
This is a secondary alert — check it out!
This is a tertiary alert — check it out!
This is a neutral alert — check it out!
This is a success alert — check it out!
This is a info alert — check it out!
This is a warning alert — check it out!
This is a danger alert — check it out! 
<div class="alert">
  <div class="flex-1">
    <i class="fa fa-question-circle mr-2"></i> This is a  alert — check it out!
  </div>
</div>
<div class="alert alert-primary">
  <div class="flex-1">
    <i class="fa fa-question-circle mr-2"></i> This is a primary alert — check it out!
  </div>
  <div class="flex-none">
    <button class="btn btn-sm btn-ghost btn-primary mr-2" data-dismiss="alert">Cancel</button>
    <button class="btn btn-sm btn-primary" data-dismiss="alert">Apply</button>
  </div>
</div>
<div class="alert alert-secondary">
  <div class="flex-1">
    <i class="fa fa-question-circle mr-2"></i> This is a secondary alert — check it out!
  </div>
  <div class="flex-none">
    <button class="btn btn-sm btn-ghost btn-secondary mr-2" data-dismiss="alert">Cancel</button>
    <button class="btn btn-sm btn-secondary" data-dismiss="alert">Apply</button>
  </div>
</div>
<div class="alert alert-tertiary">
  <div class="flex-1">
    <i class="fa fa-question-circle mr-2"></i> This is a tertiary alert — check it out!
  </div>
  <div class="flex-none">
    <button class="btn btn-sm btn-ghost btn-tertiary mr-2" data-dismiss="alert">Cancel</button>
    <button class="btn btn-sm btn-tertiary" data-dismiss="alert">Apply</button>
  </div>
</div>
<div class="alert alert-neutral">
  <div class="flex-1">
    <i class="fa fa-question-circle mr-2"></i> This is a neutral alert — check it out!
  </div>
  <div class="flex-none">
    <button class="btn btn-sm btn-ghost btn-neutral mr-2" data-dismiss="alert">Cancel</button>
    <button class="btn btn-sm btn-neutral" data-dismiss="alert">Apply</button>
  </div>
</div>
<div class="alert alert-success">
  <div class="flex-1">
    <i class="fa fa-question-circle mr-2"></i> This is a success alert — check it out!
  </div>
  <div class="flex-none">
    <button class="btn btn-sm btn-ghost btn-success mr-2" data-dismiss="alert">Cancel</button>
    <button class="btn btn-sm btn-success" data-dismiss="alert">Apply</button>
  </div>
</div>
<div class="alert alert-info">
  <div class="flex-1">
    <i class="fa fa-question-circle mr-2"></i> This is a info alert — check it out!
  </div>
  <div class="flex-none">
    <button class="btn btn-sm btn-ghost btn-info mr-2" data-dismiss="alert">Cancel</button>
    <button class="btn btn-sm btn-info" data-dismiss="alert">Apply</button>
  </div>
</div>
<div class="alert alert-warning">
  <div class="flex-1">
    <i class="fa fa-question-circle mr-2"></i> This is a warning alert — check it out!
  </div>
  <div class="flex-none">
    <button class="btn btn-sm btn-ghost btn-warning mr-2" data-dismiss="alert">Cancel</button>
    <button class="btn btn-sm btn-warning" data-dismiss="alert">Apply</button>
  </div>
</div>
<div class="alert alert-danger">
  <div class="flex-1">
    <i class="fa fa-question-circle mr-2"></i> This is a danger alert — check it out!
  </div>
  <div class="flex-none">
    <button class="btn btn-sm btn-ghost btn-danger mr-2" data-dismiss="alert">Cancel</button>
    <button class="btn btn-sm btn-danger" data-dismiss="alert">Apply</button>
  </div>
</div>