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

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

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

Author:
Prashant

2 years ago

14.3k
Success alert

Author:
Anonymous

2 years ago

14.9k
Fixed alert
fixed top right alert

Author:
Conan Hilton

3 years ago

12.1k
Dismissible alert

Author:
Gopi Yadav

3 years ago

11.7k
Responsive card grid

Author:
TailwindFlex

3 years ago

10.6k
Alert with big logo

Author:
_Amar_

3 years ago

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

1.2k
Tailwind CSS Alert

Author:
Krishna Gudpalle

3 years ago

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

1 year ago

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

Author:
John Hutton

4 months ago

242
Alert panel
Alert panel using

Author:
muhittin budak

10 months ago

656

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components