Elements that provide contextual feedback messages for user actions. The notification is a simple colored block meant to draw the attention to the user about something.
Alerts can have how many words you want, as well as an optional close button. For styling, use one of the color classes presented below. (e.g., .bg-red-500).
<div class="text-white px-6 py-4 border-0 rounded relative mb-4 bg-pink-500">
<span class="text-xl inline-block mr-5 align-middle">
<i class="fas fa-bell" />
</span>
<span class="inline-block align-middle mr-8">
<b class="capitalize">pink!</b> This is a pink alert - check it out!
</span>
<button class="absolute bg-transparent text-2xl font-semibold leading-none right-0 top-0 mt-4 mr-6 outline-none focus:outline-none">
<span>×</span>
</button>
</div>