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.
HTML Code
<div class="fixed bottom-5 right-5 z-50 space-y-4">
<div class="bg-white dark:bg-gray-800 bg-opacity-30 backdrop-blur-md rounded-lg shadow-lg p-4 max-w-xs transition-all duration-300 transform hover:scale-105">
<div class="flex items-center space-x-3">
<img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" />
<div>
<h4 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Notification Title</h4>
<p class="text-gray-600 dark:text-gray-400">This is a brief message for a toast notification.</p>
</div>
</div>
<div class="mt-2 flex justify-between items-center">
<span class="text-sm text-gray-500 dark:text-gray-300">5 mins ago</span>
<button class="text-red-500 hover:text-red-600">Dismiss</button>
</div>
</div>
<div class="bg-white dark:bg-gray-800 bg-opacity-30 backdrop-blur-md rounded-lg shadow-lg p-4 max-w-xs transition-all duration-300 transform hover:scale-105">
<div class="flex items-center space-x-3">
<img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" />
<div>
<h4 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Another Notification</h4>
<p class="text-gray-600 dark:text-gray-400">Here is another message for your consideration.</p>
</div>
</div>
<div class="mt-2 flex justify-between items-center">
<span class="text-sm text-gray-500 dark:text-gray-300">10 mins ago</span>
<button class="text-red-500 hover:text-red-600">Dismiss</button>
</div>
</div>
<div class="bg-white dark:bg-gray-800 bg-opacity-30 backdrop-blur-md rounded-lg shadow-lg p-4 max-w-xs transition-all duration-300 transform hover:scale-105">
<div class="flex items-center space-x-3">
<img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar" />
<div>
<h4 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Important Alert</h4>
<p class="text-gray-600 dark:text-gray-400">This is an important alert that requires your attention.</p>
</div>
</div>
<div class="mt-2 flex justify-between items-center">
<span class="text-sm text-gray-500 dark:text-gray-300">15 mins ago</span>
<button class="text-red-500 hover:text-red-600">Dismiss</button>
</div>
</div>
</div>Related Components
Toast Notifications
A responsive, dark-theme compatible Toast Notifications Component for E-commerce with a Minimalist/Flat Design using a Complementary color scheme.
Toast Notifications Component
A responsive Toast Notifications component with Glassmorphism style and vibrant color scheme, suitable for e-commerce applications. It supports dark theme and has a complex interface with multiple interactive elements.
Art Deco Toast Notifications Component
A simple, high-contrast toast notification component with an Art Deco aesthetic, suitable for news and journalism websites. Features responsive design and dark mode support.