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
Responsive Toast Notifications Component with Glassmorphism style for Business/Corporate websites, supporting dark theme. Pastel color scheme.
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 Component
A dark mode toast notification component designed for dashboard applications, featuring a complementary color scheme with various interactive elements.