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.4k

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.5k
Basic alert (Success, Info, Warning, Error)

Author:
Prashant

2 years ago

13.7k
Success alert

Author:
Anonymous

2 years ago

14.2k
Fixed alert
fixed top right alert

Author:
Conan Hilton

3 years ago

11.8k
Dismissible alert

Author:
Gopi Yadav

3 years ago

11.2k
Responsive card grid

Author:
TailwindFlex

3 years ago

10.3k
Alert with big logo

Author:
_Amar_

3 years ago

10.9k
Confirmation modal/card

Author:
Sophia Baker

2 years ago

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

9 months ago

832
Subcribe Card - Alert - Notification

Author:
ABDO-SY

8 months ago

622
Confirmation model

Author:
Mr Robot

3 years ago

13k
alert
html , css

Author:
Hacker Development

5 months ago

885

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components