Home
Conan Hilton
Fixed alert

Fixed alert

fixed top right alert

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

Alert

Author Conan Hilton

12.1k

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.

Author:
Code huit

2 years ago

16.1k
Success alert

Author:
Anonymous

2 years ago

15k
Dismissible alert

Author:
Gopi Yadav

3 years ago

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

Author:
Prashant

2 years ago

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

Author:
Prajwal Hallale

2 years ago

8k
Alert Component

Author:
Prem..

3 years ago

11.6k
Alert mono color
minimal alerts design

Author:
TailwindFlex

3 years ago

10.8k
Alerts
Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.

Author:
Bushobozi Bush Ivan

1 week ago

25
404 Page
The 404 Page is a responsive and customizable error page designed to inform users when they’ve reached a nonexistent or broken link. This component not only improves user experience but also provides a chance to showcase creativity and guide users back to the right path. Key Features: Fully responsive design that works on all devices. Engaging visuals (customizable images, icons, or animations). Includes a message like "Page Not Found" or "Oops! Something went wrong." Provides helpful navigation options such as a "Go Home" button or links to other pages. Easily customizable for themes, styles, and content.

Author:
Abhiraj

1 year ago

2.1k
Alert panel
Alert panel using

Author:
muhittin budak

10 months ago

685
card Alert - icons - glass

Author:
ABDO-SY

1 year ago

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

Author:
John Hutton

5 months ago

244

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components