Made with Tailwind CSS, they are elements that provide contextual feedback messages for user actions. The notification is a simple colored block meant to draw the attention to the user about something.
Examples
Static Alert
blueGray! This is a blueGray alert - check it out!
red! This is a red alert - check it out!
orange! This is a orange alert - check it out!
amber! This is a amber alert - check it out!
emerald! This is a emerald alert - check it out!
teal! This is a teal alert - check it out!
lightBlue! This is a lightBlue alert - check it out!
indigo! This is a indigo alert - check it out!
purple! This is a purple alert - check it out!
pink! This is a pink alert - check it out!
<divclassName="text-white px-6 py-4 border-0 rounded relative mb-4 bg-blueGray-500"><spanclassName="text-xl inline-block mr-5 align-middle"><iclassName="fas fa-bell"></i></span><spanclassName="inline-block align-middle mr-8"><bclassName="capitalize">blueGray!</b> This is a blueGray alert - check it out!
</span><buttonclassName="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>
<divclassName="text-white px-6 py-4 border-0 rounded relative mb-4 bg-red-500"><spanclassName="text-xl inline-block mr-5 align-middle"><iclassName="fas fa-bell"></i></span><spanclassName="inline-block align-middle mr-8"><bclassName="capitalize">red!</b> This is a red alert - check it out!
</span><buttonclassName="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>
<divclassName="text-white px-6 py-4 border-0 rounded relative mb-4 bg-orange-500"><spanclassName="text-xl inline-block mr-5 align-middle"><iclassName="fas fa-bell"></i></span><spanclassName="inline-block align-middle mr-8"><bclassName="capitalize">orange!</b> This is a orange alert - check it out!
</span><buttonclassName="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>
<divclassName="text-white px-6 py-4 border-0 rounded relative mb-4 bg-amber-500"><spanclassName="text-xl inline-block mr-5 align-middle"><iclassName="fas fa-bell"></i></span><spanclassName="inline-block align-middle mr-8"><bclassName="capitalize">amber!</b> This is a amber alert - check it out!
</span><buttonclassName="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>
<divclassName="text-white px-6 py-4 border-0 rounded relative mb-4 bg-emerald-500"><spanclassName="text-xl inline-block mr-5 align-middle"><iclassName="fas fa-bell"></i></span><spanclassName="inline-block align-middle mr-8"><bclassName="capitalize">emerald!</b> This is a emerald alert - check it out!
</span><buttonclassName="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>
<divclassName="text-white px-6 py-4 border-0 rounded relative mb-4 bg-teal-500"><spanclassName="text-xl inline-block mr-5 align-middle"><iclassName="fas fa-bell"></i></span><spanclassName="inline-block align-middle mr-8"><bclassName="capitalize">teal!</b> This is a teal alert - check it out!
</span><buttonclassName="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>
<divclassName="text-white px-6 py-4 border-0 rounded relative mb-4 bg-lightBlue-500"><spanclassName="text-xl inline-block mr-5 align-middle"><iclassName="fas fa-bell"></i></span><spanclassName="inline-block align-middle mr-8"><bclassName="capitalize">lightBlue!</b> This is a lightBlue alert - check it out!
</span><buttonclassName="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>
<divclassName="text-white px-6 py-4 border-0 rounded relative mb-4 bg-indigo-500"><spanclassName="text-xl inline-block mr-5 align-middle"><iclassName="fas fa-bell"></i></span><spanclassName="inline-block align-middle mr-8"><bclassName="capitalize">indigo!</b> This is a indigo alert - check it out!
</span><buttonclassName="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>
<divclassName="text-white px-6 py-4 border-0 rounded relative mb-4 bg-purple-500"><spanclassName="text-xl inline-block mr-5 align-middle"><iclassName="fas fa-bell"></i></span><spanclassName="inline-block align-middle mr-8"><bclassName="capitalize">purple!</b> This is a purple alert - check it out!
</span><buttonclassName="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>
<divclassName="text-white px-6 py-4 border-0 rounded relative mb-4 bg-pink-500"><spanclassName="text-xl inline-block mr-5 align-middle"><iclassName="fas fa-bell"></i></span><spanclassName="inline-block align-middle mr-8"><bclassName="capitalize">pink!</b> This is a pink alert - check it out!
</span><buttonclassName="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>
Closing (Dynamic) Alert
blueGray! This is a blueGray alert - check it out!
red! This is a red alert - check it out!
orange! This is a orange alert - check it out!
amber! This is a amber alert - check it out!
emerald! This is a emerald alert - check it out!
teal! This is a teal alert - check it out!
lightBlue! This is a lightBlue alert - check it out!