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!
×
<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>
<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-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-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-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-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-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-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-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-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>
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!
×
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!
×
<script>
let alertOpen = true ;
function closeAlert (){
alertOpen = false ;
}
</script>
{#if alertOpen}
<div v-if= "alertOpen" 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" on:click= {closeAlert} >
<span> ×</span>
</button>
</div>
{/if}
<script>
let alertOpen = true ;
function closeAlert (){
alertOpen = false ;
}
</script>
{#if alertOpen}
<div v-if= "alertOpen" 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" on:click= {closeAlert} >
<span> ×</span>
</button>
</div>
{/if}
<script>
let alertOpen = true ;
function closeAlert (){
alertOpen = false ;
}
</script>
{#if alertOpen}
<div v-if= "alertOpen" 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" on:click= {closeAlert} >
<span> ×</span>
</button>
</div>
{/if}
<script>
let alertOpen = true ;
function closeAlert (){
alertOpen = false ;
}
</script>
{#if alertOpen}
<div v-if= "alertOpen" 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" on:click= {closeAlert} >
<span> ×</span>
</button>
</div>
{/if}
<script>
let alertOpen = true ;
function closeAlert (){
alertOpen = false ;
}
</script>
{#if alertOpen}
<div v-if= "alertOpen" 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" on:click= {closeAlert} >
<span> ×</span>
</button>
</div>
{/if}
<script>
let alertOpen = true ;
function closeAlert (){
alertOpen = false ;
}
</script>
{#if alertOpen}
<div v-if= "alertOpen" 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" on:click= {closeAlert} >
<span> ×</span>
</button>
</div>
{/if}
<script>
let alertOpen = true ;
function closeAlert (){
alertOpen = false ;
}
</script>
{#if alertOpen}
<div v-if= "alertOpen" 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" on:click= {closeAlert} >
<span> ×</span>
</button>
</div>
{/if}
<script>
let alertOpen = true ;
function closeAlert (){
alertOpen = false ;
}
</script>
{#if alertOpen}
<div v-if= "alertOpen" 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" on:click= {closeAlert} >
<span> ×</span>
</button>
</div>
{/if}
<script>
let alertOpen = true ;
function closeAlert (){
alertOpen = false ;
}
</script>
{#if alertOpen}
<div v-if= "alertOpen" 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" on:click= {closeAlert} >
<span> ×</span>
</button>
</div>
{/if}
<script>
let alertOpen = true ;
function closeAlert (){
alertOpen = false ;
}
</script>
{#if alertOpen}
<div v-if= "alertOpen" 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" on:click= {closeAlert} >
<span> ×</span>
</button>
</div>
{/if}