Alert mono color

minimal alerts design

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

Alert

Author TailwindFlex

Tailwind v3.4 11.6k 16

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.

Code huit

3 years ago

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

Prashant

3 years ago

15.6k
Success alert

Anonymous

3 years ago

16.3k
Fixed alert
fixed top right alert

Conan Hilton

4 years ago

12.8k
Dismissible alert

Gopi Yadav

4 years ago

12.5k
Responsive card grid

TailwindFlex

4 years ago

11.3k
Alert with big logo

_Amar_

4 years ago

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

Bushobozi Bush Ivan

8 months ago

640
Alert Component

Prem..

4 years ago

12.2k
Alerts - Htmlwind
Simple alerts

Htmlwind

1 year ago

1.1k
Alert

МОЙДОЫР

1 year ago

1.4k
card Alert - icons - glass

ABDO-SY

1 year ago

1.6k