Tailwind CSS Alerts

Get started on your web projects with our Tailwind CSS alert which provides contextual feedback messages for typical user actions.

An alert displays a short and important message attracting the user's attention without interrupting the user's task. Use this element when you need to show highly-important messages to users or when you need a persistent static container that is closable by user actions.

Below we are presenting examples of alerts that you can use in your Tailwind CSS project. The examples come in different colors and styles so you can adapt them easily to your needs.


Alert primary
<div class="alert alert-pink w-full">Alert primary</div>

Simple Alert

Use this example to create a simple and versatile alert component.

Alert primary
Alert secondary
Alert success
Alert danger
Alert warning
Alert info
Alert Dark
<div class="alert alert-pink w-full">Alert primary</div>
<div class="alert alert-secondary w-full">Alert secondary</div>
<div class="alert alert-green w-full">Alert success</div>
<div class="alert alert-red w-full">Alert danger</div>
<div class="alert alert-orange w-full">Alert warning</div>
<div class="alert alert-blue w-full">Alert info</div>
<div class="alert alert-dark w-full">Alert Dark</div>

Alert with gradient

Use this example to create a beautiful alert with gradients.

Alert primary
Alert secondary
Alert success
Alert danger
Alert warning
Alert info
Alert light
Alert dark
<div class="alert alert-pink alert-gradient w-full">Alert primary</div>
<div class="alert alert-gradient alert-secondary w-full">Alert secondary</div>
<div class="alert alert-gradient alert-green w-full">Alert success</div>
<div class="alert alert-gradient alert-red w-full">Alert danger</div>
<div class="alert alert-gradient alert-orange w-full">Alert warning</div>
<div class="alert alert-gradient alert-blue w-full">Alert info</div>
<div class="alert alert-gradient alert-light w-full text-dark-500">
  Alert Light
</div>
<div class="alert alert-gradient alert-dark w-full">Alert Dark</div>
Edit this page on Github