Alerts
Regular
Notice! Message saved!
Success! Message sent!
Warning! Message truncated!
Danger! Message delivery failed!
Info! Message saved in draft!
Info! Message saved in sent items!
<div class="bg-blue-700 px-6 py-4 my-1 rounded-sm text-gray-400"><span class="font-bold">Notice!</span> Message saved!</div>
<div class="bg-green-700 px-6 py-4 my-1 rounded-sm text-gray-400"><span class="font-bold">Success!</span> Message sent!</div>
<div class="bg-orange-700 px-6 py-4 my-1 rounded-sm text-gray-400"><span class="font-bold">Warning!</span> Message truncated!</div>
<div class="bg-red-700 px-6 py-4 my-1 rounded-sm text-gray-400"><span class="font-bold">Danger!</span> Message delivery failed!</div>
<div class="bg-gray-900 px-6 py-4 my-1 rounded-sm text-gray-400"><span class="font-bold">Info!</span> Message saved in draft!</div>
<div class="bg-gray-300 px-6 py-4 my-1 rounded-sm text-gray-900"><span class="font-bold">Info!</span> Message saved in sent items!</div>
Outline
Notice! Message saved!
Success! Message sent!
Warning! Message truncated!
Danger! Message delivery failed!
Info! Message saved in draft!
Info! Message saved in sent items!
<div class="border border-blue-700 px-6 py-4 my-1 rounded-sm text-blue-700"><span class="font-bold">Notice!</span> Message saved!</div>
<div class="border border-green-700 px-6 py-4 my-1 rounded-sm text-green-700"><span class="font-bold">Success!</span> Message sent!</div>
<div class="border border-orange-700 px-6 py-4 my-1 rounded-sm text-orange-700"><span class="font-bold">Warning!</span> Message truncated!</div>
<div class="border border-red-700 px-6 py-4 my-1 rounded-sm text-red-700"><span class="font-bold">Danger!</span> Message delivery failed!</div>
<div class="border border-gray-900 px-6 py-4 my-1 rounded-sm text-gray-900"><span class="font-bold">Info!</span> Message saved in draft!</div>
<div class="border border-gray-300 px-6 py-4 my-1 rounded-sm text-gray-300"><span class="font-bold">Info!</span> Message saved in sent items!</div>
Rounded
Notice! Message saved!
Success! Message sent!
Warning! Message truncated!
Danger! Message delivery failed!
Info! Message saved in draft!
Info! Message saved in sent items!
<div class="bg-blue-700 px-6 py-4 my-1 rounded-full text-gray-400"><span class="font-bold">Notice!</span> Message saved!</div>
<div class="bg-green-700 px-6 py-4 my-1 rounded-full text-gray-400"><span class="font-bold">Success!</span> Message sent!</div>
<div class="bg-orange-700 px-6 py-4 my-1 rounded-full text-gray-400"><span class="font-bold">Warning!</span> Message truncated!</div>
<div class="bg-red-700 px-6 py-4 my-1 rounded-full text-gray-400"><span class="font-bold">Danger!</span> Message delivery failed!</div>
<div class="bg-gray-900 px-6 py-4 my-1 rounded-full text-gray-400"><span class="font-bold">Info!</span> Message saved in draft!</div>
<div class="bg-gray-300 px-6 py-4 my-1 rounded-full text-gray-900"><span class="font-bold">Info!</span> Message saved in sent items!</div>
Outline
Notice! Message saved!
Success! Message sent!
Warning! Message truncated!
Danger! Message delivery failed!
Info! Message saved in draft!
Info! Message saved in sent items!
<div class="border border-blue-700 px-6 py-4 my-1 rounded-full text-blue-700"><span class="font-bold">Notice!</span> Message saved!</div>
<div class="border border-green-700 px-6 py-4 my-1 rounded-full text-green-700"><span class="font-bold">Success!</span> Message sent!</div>
<div class="border border-orange-700 px-6 py-4 my-1 rounded-full text-orange-700"><span class="font-bold">Warning!</span> Message truncated!</div>
<div class="border border-red-700 px-6 py-4 my-1 rounded-full text-red-700"><span class="font-bold">Danger!</span> Message delivery failed!</div>
<div class="border border-gray-900 px-6 py-4 my-1 rounded-full text-gray-900"><span class="font-bold">Info!</span> Message saved in draft!</div>
<div class="border border-gray-300 px-6 py-4 my-1 rounded-full text-gray-300"><span class="font-bold">Info!</span> Message saved in sent items!</div>