Home
Abhiraj
Notifications

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.

This tailwind example is contributed by Abhiraj, on 11-Jan-2025. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are popup,dialog,caution,Toast, Snackbar

Modal Other Badge Alert Notification

Author Abhiraj

120

Fork Fullscreen

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Toast Notifications</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css"></script>
    <style>
        .toast-container {
            position: fixed;
            right: 20px;
            bottom: 20px;
            z-index: 50;
        }

.toast {
            animation: slideIn 0.5s ease-out forwards;
        }

.toast.hide {
            animation: slideOut 0.5s ease-in forwards;
        }

@keyframes slideIn {
            from {
                transform: translateX(100%);
                opacity: 0;
            }
            to {
                transform: translateX(0);
                opacity: 1;
            }
        }

@keyframes slideOut {
            from {
                transform: translateX(0);
                opacity: 1;
            }
            to {
                transform: translateX(100%);
                opacity: 0;
            }
        }

.progress-bar {
            position: absolute;
            bottom: 0;
            left: 0;
            height: 3px;
            background: rgba(255, 255, 255, 0.3);
            animation: progress 3s linear forwards;
        }

@keyframes progress {
            from { width: 100%; }
            to { width: 0%; }
        }
    </style>
</head>
<body class="bg-gray-100 min-h-screen flex items-center justify-center">
    
    <div class="toast-container space-y-4"></div>

<div class="space-y-4">
        <button onclick="showToast('success', 'Success!', 'Operation completed successfully.')" 
                class="bg-green-500 text-white px-6 py-2 rounded-lg hover:bg-green-600 transition block w-full">
            Show Success Toast
        </button>
        <button onclick="showToast('error', 'Error!', 'Something went wrong.')" 
                class="bg-red-500 text-white px-6 py-2 rounded-lg hover:bg-red-600 transition block w-full">
            Show Error Toast
        </button>
        <button onclick="showToast('warning', 'Warning!', 'Please proceed with caution.')" 
                class="bg-yellow-500 text-white px-6 py-2 rounded-lg hover:bg-yellow-600 transition block w-full">
            Show Warning Toast
        </button>
        <button onclick="showToast('info', 'Info!', 'Here is some information.')" 
                class="bg-blue-500 text-white px-6 py-2 rounded-lg hover:bg-blue-600 transition block w-full">
            Show Info Toast
        </button>
    </div>

const icons = {
                success: `<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
                         </svg>`,
                error: `<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
                       </svg>`,
                warning: `<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/>
                         </svg>`,
                info: `<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                      </svg>`
            };

toast.className = `toast ${colors[type]} text-white p-4 rounded-lg shadow-lg flex items-start space-x-4 relative overflow-hidden`;
            toast.innerHTML = `
                <div class="flex-shrink-0">
                    ${icons[type]}
                </div>
                <div class="flex-1">
                    <h3 class="font-bold">${title}</h3>
                    <p class="text-sm opacity-90">${message}</p>
                </div>
                <button onclick="this.parentElement.remove()" class="flex-shrink-0 hover:opacity-75">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
                    </svg>
                </button>
                <div class="progress-bar"></div>
            `;

container.appendChild(toast);

setTimeout(() => {
                toast.classList.add('hide');
                setTimeout(() => toast.remove(), 500);
            }, 3000);
        }
    </script>
</body>
</html>

Related Examples