Fixed alert

fixed top right alert

This tailwind example is contributed by Conan Hilton, on 14-Jul-2022. Component is made with Tailwind v3.4. It is responsive. similar terms for this example is caution

Alert

Author Conan Hilton

Tailwind v3.4 12.8k 13

Fork Fullscreen

<div class="fixed inset-x-0 top-0 flex items-end justify-right px-4 py-6 justify-end">
    <div
        class="max-w-sm w-full shadow-lg rounded px-4 py-3 rounded relative bg-green-400 border-l-4 border-green-700 text-white">
        <div class="p-2">
            <div class="flex items-start">
                <div class="ml-3 w-0 flex-1 pt-0.5">
                    <p class="text-sm leading-5 font-medium">
                        Success
                    </p>
                </div>
                <div class="ml-4 flex-shrink-0 flex">
                    <button class="inline-flex text-white transition ease-in-out duration-150"
                    onclick="return this.parentNode.parentNode.parentNode.parentNode.remove()"
                    >
                       <svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                         <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"/>
                       </svg>
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

Related Examples

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

Code huit

3 years ago

16.7k
Success alert

Anonymous

3 years ago

16.3k
Dismissible alert

Gopi Yadav

4 years ago

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

Prashant

3 years ago

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

Prajwal Hallale

3 years ago

8.1k
Alert Component

Prem..

4 years ago

12.2k
Alert mono color
minimal alerts design

TailwindFlex

4 years ago

11.6k
Alert Component

Conan Hilton

4 years ago

12.2k
Toast Notifications
Visually appealing toast notification component designed with Tailwind CSS

Rajesh Maheshwari

1 year ago

2.1k
Succes Warning Error Toast Designs.
Succes Warning Error Toast Designs.

Sedat Kumcu

2 years ago

2.7k
Dismissible alert bar

Simon Scheffer

3 years ago

10.5k
Confirmation Modal for Critical Actions
A clean and responsive warning dialog component built with Tailwind CSS. Includes a title, descriptive text, and action buttons for confirmation or cancellation of critical actions.

Indra

1 year ago

1.1k