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>
