Home
TailwindFlex
Alert mono color

Alert mono color

minimal alerts design

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

Alert

Author TailwindFlex

10.6k

Fork Fullscreen

<div class="flex flex-col max-w-lg mt-20 mx-auto">
    <div class="flex inline-flex justify-between bg-teal-100 border border-teal-400 text-teal-700 px-4 py-3 my-2 rounded "
        role="alert">
        <span class="block sm:inline pl-2">
            <strong class="font-bold">Success</strong>
            Your message
        </span>
        <span class="inline" onclick="return this.parentNode.remove();">
            <svg class="fill-current h-6 w-6" role="button" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
                <title>Close</title>
                <path
                    d="M14.348 14.849a1.2 1.2 0 0 1-1.697 0L10 11.819l-2.651 3.029a1.2 1.2 0 1 1-1.697-1.697l2.758-3.15-2.759-3.152a1.2 1.2 0 1 1 1.697-1.697L10 8.183l2.651-3.031a1.2 1.2 0 1 1 1.697 1.697l-2.758 3.152 2.758 3.15a1.2 1.2 0 0 1 0 1.698z" />
            </svg>
        </span>
    </div>
    <div class="flex inline-flex justify-between bg-yellow-100 border border-yellow-400 text-yellow-700 px-4 py-3 my-2 rounded  "
        role="alert">
        <span class="block sm:inline pl-2">
            <strong class="font-bold">Success</strong>
            Your message
        </span>
        <span class="inline" onclick="return this.parentNode.remove();">
            <svg class="fill-current h-6 w-6" role="button" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
                <title>Close</title>
                <path
                    d="M14.348 14.849a1.2 1.2 0 0 1-1.697 0L10 11.819l-2.651 3.029a1.2 1.2 0 1 1-1.697-1.697l2.758-3.15-2.759-3.152a1.2 1.2 0 1 1 1.697-1.697L10 8.183l2.651-3.031a1.2 1.2 0 1 1 1.697 1.697l-2.758 3.152 2.758 3.15a1.2 1.2 0 0 1 0 1.698z" />
            </svg>
        </span>
    </div>
    <div class="flex inline-flex justify-between bg-red-100 border border-red-400 text-red-700 px-4 py-3 my-2 rounded  "
        role="alert">
        <span class="block sm:inline pl-2">
            <strong class="font-bold">Success</strong>
            Your message
        </span>
        <span class="inline" onclick="return this.parentNode.remove();">
            <svg class="fill-current h-6 w-6" role="button" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
                <title>Close</title>
                <path
                    d="M14.348 14.849a1.2 1.2 0 0 1-1.697 0L10 11.819l-2.651 3.029a1.2 1.2 0 1 1-1.697-1.697l2.758-3.15-2.759-3.152a1.2 1.2 0 1 1 1.697-1.697L10 8.183l2.651-3.031a1.2 1.2 0 1 1 1.697 1.697l-2.758 3.152 2.758 3.15a1.2 1.2 0 0 1 0 1.698z" />
            </svg>
        </span>
    </div>
</div>

Related Examples

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

Author:
Code huit

2 years ago

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

Author:
Prashant

2 years ago

14.1k
Success alert

Author:
Anonymous

2 years ago

14.8k
Fixed alert
fixed top right alert

Author:
Conan Hilton

3 years ago

12.1k
Dismissible alert

Author:
Gopi Yadav

3 years ago

11.6k
Responsive card grid

Author:
TailwindFlex

3 years ago

10.5k
Alert with big logo

Author:
_Amar_

3 years ago

11.2k
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
Closable toast message
show notification toast message at the bottom right corner

Author:
Prajwal Hallale

2 years ago

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

1 year ago

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

Author:
John Hutton

4 months ago

222
Alert

Author:
МОЙДОЫР

4 months ago

431

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components