Home
Rajesh Maheshwari
Toast Notifications

Toast Notifications

Visually appealing toast notification component designed with Tailwind CSS

This tailwind example is contributed by Rajesh Maheshwari, on 28-Feb-2025. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are caution,Toast, Snackbar

Alert Notification

Author Rajesh Maheshwari

344

Fork Fullscreen

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.tailwindcss.com"></script>
    <title>Modern Toast Notifications</title>
    <style>
        /* Smooth Fade Animations */
        .fade-in {
            animation: fadeIn 0.4s ease-out forwards;
        }
        .fade-out {
            animation: fadeOut 0.4s ease-in forwards;
        }
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(-10px); }
            to { opacity: 1; transform: translateY(0); }
        }
        @keyframes fadeOut {
            from { opacity: 1; transform: translateY(0); }
            to { opacity: 0; transform: translateY(-10px); }
        }
    </style>
</head>
<body class="bg-gray-100 dark:bg-gray-900 flex flex-col items-center justify-center min-h-screen">

<div id="notificationContainer" class="fixed top-5 right-5 space-y-4 z-50"></div>

<div class="flex space-x-4">
        <button onclick="showNotification('success', 'Success!', 'Your action was successful.')"
            class="px-6 py-3 bg-green-600 text-white font-semibold rounded-lg shadow-lg hover:bg-green-700 transition">Success</button>
        <button onclick="showNotification('error', 'Error!', 'Something went wrong. Try again.')"
            class="px-6 py-3 bg-red-600 text-white font-semibold rounded-lg shadow-lg hover:bg-red-700 transition">Error</button>
        <button onclick="showNotification('warning', 'Warning!', 'Check your inputs and try again.')"
            class="px-6 py-3 bg-yellow-500 text-white font-semibold rounded-lg shadow-lg hover:bg-yellow-600 transition">Warning</button>
        <button onclick="showNotification('info', 'Info', 'This is an important update.')"
            class="px-6 py-3 bg-blue-500 text-white font-semibold rounded-lg shadow-lg hover:bg-blue-600 transition">Info</button>
    </div>

// Icon Mapping
            const icons = {
                success: "✔️",
                error: "❌",
                warning: "⚠️",
                info: "ℹ️"
            };

// Color Mapping
            const colors = {
                success: "bg-green-500",
                error: "bg-red-500",
                warning: "bg-yellow-500",
                info: "bg-blue-500"
            };

// Create Notification Element
            const notification = document.createElement("div");
            notification.className = `relative flex items-center gap-4 backdrop-blur-xl bg-white/10 dark:bg-gray-800/30 border border-gray-200 dark:border-gray-700 text-white px-5 py-4 rounded-xl shadow-lg fade-in`;
            notification.innerHTML = `
                <span class="text-xl">${icons[type]}</span>
                <div>
                    <p class="font-semibold text-lg">${title}</p>
                    <p class="text-sm">${message}</p>
                </div>
                <button onclick="this.parentElement.classList.add('fade-out'); setTimeout(() => this.parentElement.remove(), 400)" 
                    class="ml-auto text-white text-lg font-bold">&times;</button>
                <div class="absolute bottom-0 left-0 h-1 w-full ${colors[type]} progress-bar"></div>
            `;

// Append Notification
            container.appendChild(notification);
            setTimeout(() => notification.classList.add("fade-in"), 50);

// Auto Remove After 3 Seconds with Fade-out
            setTimeout(() => {
                notification.classList.add("fade-out");
                setTimeout(() => notification.remove(), 400);
            }, 3000);
        }
    </script>

</body>
</html>

Related Examples

Notification Alert Section
Notification card with close button

Author:
Prashant

2 years ago

12k
Floating dismissible notification
bottom right floating alert

Author:
Prashant

2 years ago

12.7k
Tailwind CSS Alert

Author:
Krishna Gudpalle

2 years ago

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

Author:
Arya

2 years ago

10.1k
Dismissible alert bar

Author:
Simon Scheffer

2 years ago

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

Author:
Prajwal Hallale

2 years ago

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

Author:
Code huit

1 year ago

14.3k
Succes Warning Error Toast Designs.
Succes Warning Error Toast Designs.

Author:
Sedat Kumcu

6 months ago

1.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

3 months ago

466
Subcribe Card - Alert - Notification

Author:
ABDO-SY

2 months ago

297
Alert panel
Alert panel using

Author:
muhittin budak

3 weeks ago

75
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

6 months ago

1.1k

Explore components by Tags

Didn't find component you were looking for?

Search from 2100+ components