Components
Tailwind CSS Toasts - Madhuranjan UI
A collection of modern, responsive toast notifications built with Tailwind CSS. Easily adaptable to light/dark themes, perfect for alerts, feedback, and user messaging.
Success Toast
Display success messages with green accent icons and background. Best used for confirmations.
Success!
Your changes have been saved successfully.
1<!-- Toast Notification Container (Place it near the end of your body) -->
2<div class="fixed top-5 right-5 z-50 space-y-4">
3 <!-- Toast Notification -->
4 <div class="flex items-start p-4 bg-white dark:bg-gray-800 rounded-lg shadow-lg ring-1 ring-black ring-opacity-5 transform transition ease-in-out duration-300">
5 <!-- Icon Section -->
6 <div class="flex-shrink-0">
7 <svg class="w-6 h-6 text-green-500" fill="none" stroke="currentColor" stroke-width="2"
8 viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round">
9 <path d="M5 13l4 4L19 7"></path>
10 </svg>Variant Toasts
Showcase success, error, and warning toasts, each with dismiss functionality.
Success!
Your changes have been saved successfully.
Error!
There was an error processing your request.
Deleted!
The item has been deleted successfully.
1<div class="fixed top-5 right-5 z-50 space-y-4">
2 <!-- Success Toast -->
3 <div class="relative">
4 <!-- Hidden checkbox to control visibility -->
5 <input type="checkbox" id="toast-success" class="peer hidden" />
6 <!-- Toast container; hides when the checkbox is checked -->
7 <div class="ring-opacity-5 flex items-start rounded-lg bg-white p-4 shadow-lg ring-1 ring-black transition duration-300 peer-checked:hidden dark:bg-gray-800">
8 <div class="flex-shrink-0">
9 <svg class="h-6 w-6 text-green-500" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round">
10 <path d="M5 13l4 4L19 7" />Message Toast
A card-style toast layout that includes actions like reply and dismiss.
Toast Message
You’ve received a new message. Please check your inbox and reply accordingly.
1 <div class="flex items-center justify-center bg-gray-100 p-4 dark:bg-gray-900">
2 <div class="relative w-full max-w-sm">
3 <input type="checkbox" id="toast-toggle" class="peer hidden" />
4
5 <div class="rounded-2xl border border-gray-200 bg-white p-6 shadow-xl transition-all duration-300 peer-checked:hidden dark:border-gray-700 dark:bg-gray-800">
6 <div class="mb-2 flex items-center justify-between">
7 <h2 class="text-base font-semibold text-gray-900 dark:text-white">Toast Message</h2>
8 <label for="toast-toggle" class="cursor-pointer text-gray-400 transition hover:text-gray-600 dark:hover:text-gray-300">
9 <svg class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
10 <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />Notification Toast
Designed for app notifications, alerts users with badges, icons, and action buttons.
App Notifications
Stay in the loop — we’ll alert you with sounds, badges, and banners.
1<div class="flex items-center justify-center bg-gray-100 p-4 dark:bg-gray-900">
2 <div class="w-full max-w-sm rounded-lg border border-gray-200 bg-white/70 p-5 shadow-2xl backdrop-blur-md transition-all duration-300 dark:border-gray-700 dark:bg-gray-800/70">
3 <!-- Header Section -->
4 <div class="flex items-start gap-4">
5 <!-- Icon -->
6 <div class="mt-1.5">
7 <div class="flex h-10 w-10 items-center justify-center rounded-full bg-blue-100 dark:bg-blue-900/40">
8 <svg class="h-5 w-5 text-blue-600 dark:text-blue-300" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
9 <path stroke-linecap="round" stroke-linejoin="round" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V4a2 2 0 10-4 0v1.341C8.67 6.165 8 7.388 8 9v5.159c0 .538-.214 1.055-.595 1.436L6 17h5m0 0v1a3 3 0 006 0v-1m-6 0h6" />
10 </svg>Toast with Avatar
Show user avatars along with messages for personalized notifications.
Alex Johnson sent you a message
“Hey, just checking in — available for a quick call?”
1<div class="flex items-center justify-center bg-gray-100 p-4 dark:bg-gray-900">
2 <div class="relative w-full max-w-sm">
3 <input type="checkbox" id="toast-avatar" class="peer hidden" />
4
5 <div class="flex items-center gap-4 rounded-xs border border-gray-200 bg-white p-5 shadow-lg transition-all duration-300 peer-checked:hidden dark:border-gray-700 dark:bg-gray-800">
6 <img src="https://i.pravatar.cc/100?img=12" alt="Avatar" class="h-12 w-12 rounded-full border-2 border-white object-cover shadow-sm dark:border-gray-700" />
7
8 <div class="flex-1">
9 <p class="text-sm font-medium text-gray-900 dark:text-white">Alex Johnson <span class="font-normal text-gray-500 dark:text-gray-400">sent you a message</span></p>
10 <p class="mt-1 text-sm text-gray-600 dark:text-gray-300">“Hey, just checking in — available for a quick call?”</p>Toast with Borders
Use colored left borders to quickly indicate toast type (success, error, info, warning).
Success!
Your changes were saved successfully.
Error!
Something went wrong. Please try again later.
Info
We’ve updated our privacy policy. Please review it.
Warning
Your subscription is about to expire.
1<div class="flex flex-col items-center justify-center gap-6 bg-gray-100 p-6 dark:bg-gray-900">
2 <!-- Success Toast -->
3 <div class="relative w-full max-w-md">
4 <input type="checkbox" id="toast-success" class="peer hidden" />
5 <div class="flex items-start gap-4 rounded-xl border-l-4 border-green-500 bg-white p-5 shadow-lg peer-checked:hidden dark:bg-gray-800">
6 <div class="mt-1.5">
7 <svg class="h-5 w-5 text-green-500" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
8 <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
9 </svg>
10 </div>Toast with Toggle Switch
Includes interactive elements like switches to activate or deactivate features.
New Feature Access
Emma invited you to try real-time collaboration tools in Beta.
1 <div class=" flex items-center justify-center bg-gray-100 dark:bg-gray-900 p-6">
2 <div class="relative w-full max-w-md">
3
4 <input type="checkbox" id="toast-interactive" class="peer hidden" />
5
6 <div class="peer-checked:hidden flex flex-col sm:flex-row items-start sm:items-center gap-4 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-2xl shadow-2xl p-5 transition-all duration-300 backdrop-blur-md">
7
8 <img src="https://i.pravatar.cc/100?img=5" alt="Avatar"
9 class="w-12 h-12 rounded-full object-cover border-2 border-white dark:border-gray-700 shadow-md" />
10Toast with Label & Buttons
Combine tags, user avatars, and CTA buttons in a flexible layout.
Louis invited you to join the Design Board workspace.
You can preview the workspace or accept to join immediately.
1<div class="min-h-screen flex items-center justify-center bg-gray-100 dark:bg-gray-900 p-6">
2 <div class="relative w-full max-w-sm">
3
4 <!-- Hidden checkbox for close -->
5 <input type="checkbox" id="toast-variant2" class="peer hidden" />
6
7 <!-- Toast Card -->
8 <div class="peer-checked:hidden flex flex-col gap-4 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-xl shadow-lg p-5 transition-all duration-300">
9
10 <!-- Header: Avatar + Tag + Close -->