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.
<div class="alert alert-pink w-full">Alert primary</div>Use this example to create a simple and versatile alert component.
<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>Use this example to create a beautiful alert with gradients.
<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>