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
Toast Notifications Component
A Neumorphism-style Toast Notifications component using Tailwind CSS with dark theme support.
Toast Notifications Component
A Glassmorphism styled Toast Notifications component with pastel colors, designed for blogs and content consumption. It supports dark mode and features a rich interface with interactive elements.
Toast Notifications Component
A neumorphic toast notification component with pastel colors, responsive design, and dark theme support, suitable for blogs and content sites.