Toast Notifications Component
A Neumorphism-style Toast Notifications component using Tailwind CSS with dark theme support.
HTML Code
<div class="fixed top-5 right-5 space-y-4">
<!-- Success Toast -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300 p-4 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 class="flex-1">
<p class="text-gray-800 dark:text-gray-200 font-semibold">Success!</p>
<p class="text-gray-600 dark:text-gray-400">Your changes have been saved successfully.</p>
</div>
<button class="text-gray-500 dark:text-gray-300 hover:text-gray-700 dark:hover:text-gray-200 focus:outline-none">
<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>
<!-- Error Toast -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300 p-4 flex items-center space-x-3">
<img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar">
<div class="flex-1">
<p class="text-red-600 dark:text-red-400 font-semibold">Error!</p>
<p class="text-gray-600 dark:text-gray-400">There was an issue processing your request.</p>
</div>
<button class="text-gray-500 dark:text-gray-300 hover:text-gray-700 dark:hover:text-gray-200 focus:outline-none">
<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>
<!-- Info Toast -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300 p-4 flex items-center space-x-3">
<img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/3.jpg" alt="User Avatar">
<div class="flex-1">
<p class="text-blue-600 dark:text-blue-400 font-semibold">Info!</p>
<p class="text-gray-600 dark:text-gray-400">This is an informational message.</p>
</div>
<button class="text-gray-500 dark:text-gray-300 hover:text-gray-700 dark:hover:text-gray-200 focus:outline-none">
<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>
<style>
/* Neumorphism Styles */
.bg-white {
box-shadow: 8px 8px 15px rgba(0, 0, 0, 0.1),
-8px -8px 15px rgba(255, 255, 255, 0.9);
}
.dark .bg-gray-800 {
box-shadow: inset 8px 8px 15px rgba(0, 0, 0, 0.5),
inset -8px -8px 15px rgba(255, 255, 255, 0.1);
}
</style>Related Components
Toast Notifications Component
A dark mode toast notification component designed for dashboard applications, featuring a complementary color scheme with various interactive elements.
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 Brutalist styled toast notifications component using Tailwind CSS, designed for a portfolio that showcases work or products. The design incorporates an analogous color scheme and supports dark mode with a complex interface.