Tailwind CSS Alert

This tailwind example is contributed by Krishna Gudpalle, on 11-Oct-2022. Component is made with Tailwind v3.4. It is responsive. It supports dark mode. similar terms for this example are caution,Toast, Snackbar

Alert Notification

Author Krishna Gudpalle

Tailwind v3.4 11.8k 13

Fork Fullscreen

<div class="flex flex-col gap-3">
    <div
        class="flex bg-white dark:bg-gray-900 items-center px-6 py-4 text-sm border-t-2 rounded-b shadow-sm border-green-500">
        <svg xmlns="http://www.w3.org/2000/svg" class="w-8 h-8 text-green-500 stroke-current" fill="none"
            viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
        </svg>
        <div class="ml-3">
            <div class="font-bold text-left text-black dark:text-gray-50">Your entry has been saved</div>
            <div class="w-full text-gray-900 dark:text-gray-300 mt-1">You can continue browsing.</div>
        </div>
    </div>

<div
        class="flex bg-white dark:bg-gray-900 items-center px-6 py-4 text-sm border-t-2 rounded-b shadow-sm border-red-500">
        <svg viewBox="0 0 24 24" class="w-8 h-8 text-red-500 stroke-current" fill="none"
            xmlns="http://www.w3.org/2000/svg">
            <path
                d="M12 8V12V8ZM12 16H12.01H12ZM21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z"
                stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
        </svg>
        <div class="ml-3">
            <div class="font-bold text-left text-black dark:text-gray-50">Access denied</div>
            <div class="w-full text-gray-900 dark:text-gray-300 mt-1">You don&#x27;t have access to this page.</div>
        </div>
    </div>
</div>

Related Examples

Success alert

Anonymous

3 years ago

16.1k
Toast
mensajes de alerta a los visitantes de su sitio web.

Code huit

3 years ago

16.6k
Snackbar with button
Show and close snackbar on button click with default timeout

Amit Pachange

2 years ago

11.2k
Tailwind Css Alert

Prashant

4 years ago

12.1k
Floating dismissible notification
bottom right floating alert

Prashant

4 years ago

14.4k
Basic alert (Success, Info, Warning, Error)

Prashant

3 years ago

15.4k
Notification alert section
Show info, success, or error messages

Arya

4 years ago

11.5k
Notification Alert Section
Notification card with close button

Prashant

3 years ago

13.8k
Closable toast message
show notification toast message at the bottom right corner

Prajwal Hallale

3 years ago

8.1k
Alert with big logo

_Amar_

4 years ago

11.9k
Alert Component

Prem..

4 years ago

12.2k
Dismissible alert bar

Simon Scheffer

3 years ago

10.5k