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

294

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

11.8k
Floating dismissible notification
bottom right floating alert

Author:
Prashant

2 years ago

12.7k
Tailwind CSS Alert

Author:
Krishna Gudpalle

2 years ago

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

Author:
Arya

2 years ago

10k
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.1k
Succes Warning Error Toast Designs.
Succes Warning Error Toast Designs.

Author:
Sedat Kumcu

5 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

446
Subcribe Card - Alert - Notification

Author:
ABDO-SY

2 months ago

224
Cookie consent banner

Author:
Leif99

2 years ago

16k
Toast
Fully Responsive Toast

Author:
AKASH GANDHAR

9 months ago

1.6k

Explore components by Tags

Didn't find component you were looking for?

Search from 2100+ components