<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 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-teal-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">teal!</b> This is a teal 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-emerald-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">emerald!</b> This is a emerald 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-amber-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">amber!</b> This is a amber 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-orange-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">orange!</b> This is a orange 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-red-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">red!</b> This is a red 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-blueGray-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">blueGray!</b> This is a blueGray 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>
<!-- end snippet -->
<footer class="relative bg-gray-200 pt-8 pb-6 mt-8">
<div class="container mx-auto px-4">
<div class="flex flex-wrap items-center md:justify-between justify-center">
<div class="w-full md:w-6/12 px-4 mx-auto text-center">
<div class="text-sm text-blueGray-500 font-semibold py-1">
Made with <a href="https://www.creative-tim.com/learning-lab/tailwind-starter-kit/presentation?ref=ct-tsk-jsfiddle" class="text-blueGray-500 hover:text-gray-800" target="_blank">Tailwind Starter Kit</a> by <a href="https://www.creative-tim.com" class="text-blueGray-500 hover:text-blueGray-800" target="_blank"> Creative Tim</a>.
</div>
</div>
</div>
</div>
</footer>
</div>