Tailwind Alert | Bootstrap Alert using Tailwind CSS


Info Alert

Here is a simple bootrstap like alert example using Tailwindcss.

A simple info alert—check it out!
<div class="bg-teal-200 relative text-teal-600 py-3 px-3 rounded-lg">
    A simple info alert—check it out!
</div>

Secondary Alert

Here is a simple bootrstap like secondary alert example using Tailwindcss.

A simple secondary alert—check it out!
<div class="bg-gray-200 relative text-gray-600 py-3 px-3 rounded-lg">
    A simple secondary alert—check it out!
</div>

Warning Alert

Here is a simple bootrstap like warning alert example using Tailwindcss.

A simple warning alert—check it out!
<div class="bg-yellow-200 relative text-yellow-600 py-3 px-3 rounded-lg">
    A simple warning alert—check it out!
</div>

Danger Alert

Here is a simple bootrstap like Danger alert example using Tailwindcss.

A simple danger alert—check it out!
<div class="bg-red-200 relative text-red-500 py-3 px-3 rounded-lg">
    A simple danger alert—check it out!
</div>

Alert example with dismissing button

Here is a simple Alert example with dismissing button using Tailwindcss.

Bummer !!! A simple warning alert—check it out!
<div class="flex justify-between items-center bg-yellow-200 relative text-yellow-600 py-3 px-3 rounded-lg">
    <div>
        <span class="font-semibold text-yellow-700">Bummer !!!</span>
        A simple warning alert—check it out!
    </div>
    <div>
        <button type="button" class=" text-yellow-700">
            <span class="text-2xl">&times;</span>
        </button>
    </div>
</div>

Javascript behavior using alpine js

Javascript behaviour can achieve using Alpinejs. It is a rugged, minimal framework for composing JavaScript behavior in your markup.

Bummer !!! A simple warning alert—check it out!
<div x-data="{ show: true }" x-show="show"
    class="flex justify-between items-center bg-yellow-200 relative text-yellow-600 py-3 px-3 rounded-lg">
    <div>
        <span class="font-semibold text-yellow-700">Bummer !!!</span>
        A simple warning alert—check it out!
    </div>
    <div>
        <button type="button" @click="show = false" class=" text-yellow-700">
            <span class="text-2xl">&times;</span>
        </button>
    </div>
</div>

Tailwind Alert with left side icons

Tailwindcss alert with left side icons is presented here.

Well done!

You successfully read this important alert message.

<div x-data="{ show: true }" x-show="show" class="w-11/12 md:w-3/5 bg-white my-2 rounded-r-md px-6 border-l-4 -ml-4 border-blue-500">
    <div class="flex items-center py-4">
        <i class="fas fa-info-circle fill-current text-4xl text-gray-700"></i>
        <div class="ml-5">
            <h1 class="text-lg font-bold">Well done!</h1>
            <p class="text-gray-700 my-0">You made your awesome tailwind css alert.</p>
        </div>
        <div>
            <button type="button" @click="show = false"  class=" text-yellow-700 outline-none">
                <span class="text-2xl">&times;</span>
            </button>
        </div>
    </div>
</div>

Tailwind success Alert with left side icons

Tailwindcss success alert with left side icons is presented here.

Well done!

You successfully read this important alert message.

 <div x-data="{ show: true }" x-show="show" class="w-11/12 md:w-3/5 bg-white my-2 rounded-r-md px-6 border-l-4 -ml-4 border-gray-100 bg-green-500">
    <div class="flex items-center py-4">
        <i class="fas fa-check border-2 border-gray-200 px-2 rounded-full fill-current text-4xl font-light text-gray-200"></i>
        <div class="ml-5">
            <h1 class="text-lg font-bold text-gray-200">Well done!</h1>
            <p class="text-gray-300 my-0">You successfully read this important alert message.</p>
        </div>
        <div>
            <button type="button"  @click="show = false"  class=" text-yellow-100">
                <span class="text-2xl">&times;</span>
            </button>
        </div>
    </div>
</div>

Tailwind danger Alert with left side icons

Tailwindcss danger alert with left side icons is presented here.

Warning !!!

Warning! Better check yourself, you're not looking too good.

<div x-data="{ show: true }" x-show="show" class="w-11/12 md:w-3/5 bg-white my-2 rounded-r-md px-6 border-l-4 -ml-4 border-gray-100 bg-yellow-400">
    <div class="flex items-center py-4">
        <i class="fas fa-exclamation-circle rounded-full fill-current text-4xl text-gray-800"></i>
        <div class="ml-5">
            <h1 class="font-bold text-gray-800 text-lg">Warning !!!</h1>
            <p class="text-gray-800 my-0 ">Warning! Better check yourself, you're not looking too good.</p>
        </div>
        <div>
            <button type="button" @click="show = false"  class=" text-yellow-100">
                <span class="text-2xl text-gray-800">&times;</span>
            </button>
        </div>
    </div>
</div>