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

16k
Success alert

Author:
Anonymous

2 years ago

14.8k
Dismissible alert

Author:
Gopi Yadav

3 years ago

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

Author:
Prashant

2 years ago

14.2k
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.5k
Alert mono color
minimal alerts design

Author:
TailwindFlex

3 years ago

10.7k
alert
html , css

Author:
Hacker Development

9 months ago

1.1k
cards
html , css ,

Author:
Hacker Development

9 months ago

851
Tailwind Css Alert

Author:
Prashant

3 years ago

11.5k
Alert

Author:
МОЙДОЫР

4 months ago

433
Otp-code template
This is an OTP code template that contains the one-time password, which can be sent to the user's email either when they are signing up for the first time or for multi-factor authentication (MFA) during the login process.

Author:
anandu ap

1 year ago

2.5k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components