Tailwind CSS Alerts - Alert Examples by Creative Tim
by CreativeTim
HTML
<link rel="stylesheet" href="https://gitcdn.link/cdn/creativetimofficial/public-assets/master/tailwind-starter-kit/jsfiddle-style.css">
<div class="p-4">
<h1 class="font-semibold mt-8 mb-8 text-3xl" id="title">Alerts - Alert Examples</h1>
<!-- start snippet -->
<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"></i></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>
<div class="text-white px-6 py-4 border-0 rounded relative mb-4 bg-purple-500">
<span class="text-xl inline-block mr-5 align-middle"><i class="fas fa-bell"></i></span><span class="inline-block align-middle mr-8"><b class="capitalize">purple!</b> This is a purple 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>
<div class="text-white px-6 py-4 border-0 rounded relative mb-4 bg-indigo-500">
<span class="text-xl inline-block mr-5 align-middle"><i class="fas fa-bell"></i></span><span class="inline-block align-middle mr-8"><b class="capitalize">indigo!</b> This is a indigo 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>
<div class="text-white px-6 py-4 border-0 rounded relative mb-4 bg-lightBlue-500">
<span class="text-xl inline-block mr-5 align-middle"><i class="fas fa-bell"></i></span><span class="inline-block align-middle mr-8"><b class="capitalize">lightBlue!</b> This is a lightBlue alert - check it out!</span><button class="absolute bg-transparent...