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

11.2k

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

1 year ago

14.5k
Success alert

Author:
Anonymous

1 year ago

13.3k
Dismissible alert

Author:
Gopi Yadav

2 years ago

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

Author:
Prashant

2 years ago

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

Author:
Prajwal Hallale

2 years ago

7.8k
Alert Component

Author:
Prem..

2 years ago

10.5k
Alert mono color
minimal alerts design

Author:
TailwindFlex

2 years ago

9.8k
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

4 months ago

689
Alert with big logo

Author:
_Amar_

2 years ago

10.7k
Beautiful Info card
Info card with info type section on the corner.

Author:
TailwindFlex

2 years ago

9.5k
Notifications
Toast Notifications are lightweight and customizable components for displaying short messages or alerts. They are perfect for feedback on user actions, such as form submissions or system updates. Supports different types of notifications (success, error, warning, info). Automatically hides after a specified timeout. Option to include action buttons or close icons. Customizable styles, animation, and position on the screen.

Author:
Abhiraj

4 months ago

481
cards
html , css ,

Author:
Hacker Development

1 week ago

56

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components