Tailwind CSS – Tailwind Alerts component

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

Basic Code of Tailwind Alerts Components

<div class="bg-blue-100 rounded-lg py-5 px-6 mb-4 text-base text-blue-700 mb-3" role="alert">
  A simple primary alert - check it out!
</div>
<div class="bg-purple-100 rounded-lg py-5 px-6 mb-4 text-base text-purple-700 mb-3" role="alert">
  A simple secondary alert - check it out!
</div>
<div class="bg-green-100 rounded-lg py-5 px-6 mb-4 text-base text-green-700 mb-3" role="alert">
  A simple success alert - check it out!
</div>
<div class="bg-red-100 rounded-lg py-5 px-6 mb-4 text-base text-red-700 mb-3" role="alert">
  A simple danger alert - check it out!
</div>
<div class="bg-yellow-100 rounded-lg py-5 px-6 mb-4 text-base text-yellow-700 mb-3" role="alert">
  A simple warning alert - check it out!
</div>
<div class="bg-indigo-100 rounded-lg py-5 px-6 mb-4 text-base text-indigo-700 mb-3" role="alert">
  A simple indigo alert - check it out!
</div>
<div class="bg-gray-50 rounded-lg py-5 px-6 mb-4 text-base text-gray-500 mb-3" role="alert">
  A simple light alert - check it out!
</div>
<div class="bg-gray-300 rounded-lg py-5 px-6 mb-4 text-base text-gray-800 mb-3" role="alert">
  A simple dark alert - check it out!
</div>

Link color

<div class="bg-blue-100 rounded-lg py-5 px-6 mb-4 text-base text-blue-700 mb-3" role="alert">
  A simple primary alert with <a href="#" class="font-bold text-blue-800">an example link</a>. Give it a click if you like.
</div>
<div class="bg-purple-100 rounded-lg py-5 px-6 mb-4 text-base text-purple-700 mb-3" role="alert">
  A simple secondary alert with <a href="#" class="font-bold text-purple-800">an example link</a>. Give it a click if you like.
</div>
<div class="bg-green-100 rounded-lg py-5 px-6 mb-4 text-base text-green-700 mb-3" role="alert">
  A simple success alert with <a href="#" class="font-bold text-green-800">an example link</a>. Give it a click if you like.
</div>
<div class="bg-red-100 rounded-lg py-5 px-6 mb-4 text-base text-red-700 mb-3" role="alert">
  A simple danger alert with <a href="#" class="font-bold text-red-800">an example link</a>. Give it a click if you like.
</div>
<div class="bg-yellow-100 rounded-lg py-5 px-6 mb-4 text-base text-yellow-700 mb-3" role="alert">
  A simple warning alert with <a href="#" class="font-bold text-yellow-800">an example link</a>. Give it a click if you like.
</div>
<div class="bg-indigo-100 rounded-lg py-5 px-6 mb-4 text-base text-indigo-700 mb-3" role="alert">
  A simple indigo alert with <a href="#" class="font-bold text-indigo-800">an example link</a>. Give it a click if you like.
</div>
<div class="bg-gray-50 rounded-lg py-5 px-6 mb-4 text-base text-gray-500 mb-3" role="alert">
  A simple light alert with <a href="#" class="font-bold text-gray-600">an example link</a>. Give it a click if you like.
</div>
<div class="bg-gray-300 rounded-lg py-5 px-6 mb-4 text-base text-gray-800 mb-3" role="alert">
  A simple dark alert with <a href="#" class="font-bold text-gray-900">an example link</a>. Give it a click if you like.
</div>

Leave a Comment