Home
Sedat Kumcu
Succes Warning Error Toast Designs.

Succes Warning Error Toast Designs.

This tailwind example is contributed by Sedat Kumcu, on 08-Nov-2024. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are caution,Toast, Snackbar

Alert Notification

Author Sedat Kumcu

1.9k

Fork Fullscreen

<div class="flex-1">
        <p class="font-bold">Success</p>
        <p class="text-sm">Your action was successful!</p>
    </div>

<button class="text-white hover:text-gray-300 focus:outline-none">
        <svg xmlns="http://www.w3.org/2000/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 011.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 class="fixed top-4 left-4 max-w-xs w-full bg-yellow-500 text-white shadow-lg rounded-lg p-4 flex items-center space-x-3 transition-transform transform hover:scale-105">
    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-white" viewBox="0 0 20 20" fill="currentColor">
        <path fill-rule="evenodd" d="M8.257 3.099c.366-.446.976-.446 1.342 0l6 7.5a1 1 0 01-.671 1.601H3.07a1 1 0 01-.671-1.601l6-7.5zM10 13a1.5 1.5 0 100 3 1.5 1.5 0 000-3z" clip-rule="evenodd" />
    </svg>
    <div class="flex-1">
        <p class="font-bold">Warning</p>
        <p class="text-sm">Be cautious with this action.</p>
    </div>
    <button class="text-white hover:text-gray-300 focus:outline-none">
        <svg xmlns="http://www.w3.org/2000/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 011.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 class="fixed top-40 right-4 max-w-xs w-full bg-red-500 text-white shadow-lg rounded-lg p-4 flex items-center space-x-3 transition-transform transform hover:scale-105">
    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-white" viewBox="0 0 20 20" fill="currentColor">
        <path fill-rule="evenodd" d="M8.257 3.099c.366-.446.976-.446 1.342 0l6 7.5a1 1 0 01-.671 1.601H3.07a1 1 0 01-.671-1.601l6-7.5zM10 13a1.5 1.5 0 100 3 1.5 1.5 0 000-3z" clip-rule="evenodd" />
    </svg>
    <div class="flex-1">
        <p class="font-bold">Error</p>
        <p class="text-sm">An error occurred. Please try again.</p>
    </div>
    <button class="text-white hover:text-gray-300 focus:outline-none">
        <svg xmlns="http://www.w3.org/2000/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 011.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>

Related Examples

Notification Alert Section
Notification card with close button

Author:
Prashant

3 years ago

12.9k
Floating dismissible notification
bottom right floating alert

Author:
Prashant

3 years ago

13.4k
Tailwind CSS Alert

Author:
Krishna Gudpalle

3 years ago

11.1k
Notification alert section
Show info, success, or error messages

Author:
Arya

3 years ago

10.6k
Dismissible alert bar

Author:
Simon Scheffer

2 years ago

9.8k
Closable toast message
show notification toast message at the bottom right corner

Author:
Prajwal Hallale

2 years ago

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

Author:
Code huit

2 years ago

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

836
Subcribe Card - Alert - Notification

Author:
ABDO-SY

8 months ago

623
Toast Notifications
Visually appealing toast notification component designed with Tailwind CSS

Author:
Rajesh Maheshwari

8 months ago

1k
Confirmation Modal for Critical Actions
A clean and responsive warning dialog component built with Tailwind CSS. Includes a title, descriptive text, and action buttons for confirmation or cancellation of critical actions.

Author:
Indra

2 months ago

207
macOS Style Webpage – macOS Design in the Browser
A simple webpage inspired by the macOS interface. It recreates the clean design, dock, and desktop look of macOS using only HTML, tailwind CSS, and JavaScript. This project focuses on front-end styling and layout to bring the visual feel of macOS to the web — not a full simulation, just the look and vibe.

Author:
Hamza Atig

1 week ago

167

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components