Toast Notifications Component
A responsive Toast Notifications component designed with Glassmorphism, featuring a monochromatic color scheme, dark mode support, and ready for use in a portfolio.
HTML Code
<div class="fixed bottom-5 right-5 space-y-4 z-50">
<!-- Toast Notification 1 -->
<div class="bg-white/30 backdrop-blur-md border border-white/20 rounded-lg shadow-lg p-4 transition-all duration-300 dark:bg-gray-800/30 dark:border-gray-700/20">
<div class="flex items-center space-x-3">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar" class="w-10 h-10 rounded-full" />
<div class="flex-1">
<h2 class="text-gray-900 dark:text-gray-100 font-semibold">New Project Alert</h2>
<p class="text-gray-700 dark:text-gray-300">You have successfully created a new project!</p>
<span class="text-sm text-gray-500 dark:text-gray-400">Just now</span>
</div>
<button class="text-gray-500 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" /></svg>
</button>
</div>
</div>
<!-- Toast Notification 2 -->
<div class="bg-white/30 backdrop-blur-md border border-white/20 rounded-lg shadow-lg p-4 transition-all duration-300 dark:bg-gray-800/30 dark:border-gray-700/20">
<div class="flex items-center space-x-3">
<img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Avatar" class="w-10 h-10 rounded-full" />
<div class="flex-1">
<h2 class="text-gray-900 dark:text-gray-100 font-semibold">Portfolio Updated</h2>
<p class="text-gray-700 dark:text-gray-300">Your portfolio has been successfully updated!</p>
<span class="text-sm text-gray-500 dark:text-gray-400">5 mins ago</span>
</div>
<button class="text-gray-500 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" /></svg>
</button>
</div>
</div>
</div>Related Components
Retro Toast Notifications Component
A retro-themed toast notification component with responsive design and dark mode support.
Toast Notifications Component
A Toast Notifications component designed with Glassmorphism style, featuring responsive effects and dark theme support. It uses Tailwind CSS for styling, along with placeholder images from picsum.photos for visuals and randomuser.me for avatars.
Toast Notifications
A responsive, dark-theme compatible Toast Notifications Component for E-commerce with a Minimalist/Flat Design using a Complementary color scheme.