Notifications Component
A complex notifications component designed with retro/vintage aesthetics and vibrant colors for e-commerce, supporting dark mode.
HTML Code
<div class="relative z-10">
<div class="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-lg p-5 max-w-md mx-auto">
<h2 class="text-2xl font-bold text-blue-600 dark:text-blue-400 mb-4">Notifications</h2>
<div class="space-y-4">
<div class="flex items-center bg-yellow-200 dark:bg-yellow-800 p-4 rounded-lg shadow">
<img src="https://picsum.photos/40" alt="Avatar" class="rounded-full mr-3 border-2 border-yellow-600 dark:border-yellow-400" />
<div class="flex-1">
<h3 class="text-lg font-semibold text-black dark:text-white">New Order Placed!</h3>
<p class="text-sm text-gray-700 dark:text-gray-300">Order #12345 has been successfully placed.</p>
<span class="text-xs text-gray-500 dark:text-gray-400">Just now</span>
</div>
</div>
<div class="flex items-center bg-green-200 dark:bg-green-800 p-4 rounded-lg shadow">
<img src="https://picsum.photos/40" alt="Avatar" class="rounded-full mr-3 border-2 border-green-600 dark:border-green-400" />
<div class="flex-1">
<h3 class="text-lg font-semibold text-black dark:text-white">Item Shipped!</h3>
<p class="text-sm text-gray-700 dark:text-gray-300">Your order #12345 is on its way!</p>
<span class="text-xs text-gray-500 dark:text-gray-400">2 hours ago</span>
</div>
</div>
<div class="flex items-center bg-red-200 dark:bg-red-800 p-4 rounded-lg shadow">
<img src="https://picsum.photos/40" alt="Avatar" class="rounded-full mr-3 border-2 border-red-600 dark:border-red-400" />
<div class="flex-1">
<h3 class="text-lg font-semibold text-black dark:text-white">Payment Failed!</h3>
<p class="text-sm text-gray-700 dark:text-gray-300">There was an issue with your payment for order #12345.</p>
<span class="text-xs text-gray-500 dark:text-gray-400">5 hours ago</span>
</div>
</div>
<div class="flex items-center bg-purple-200 dark:bg-purple-800 p-4 rounded-lg shadow">
<img src="https://picsum.photos/40" alt="Avatar" class="rounded-full mr-3 border-2 border-purple-600 dark:border-purple-400" />
<div class="flex-1">
<h3 class="text-lg font-semibold text-black dark:text-white">Review Reminder!</h3>
<p class="text-sm text-gray-700 dark:text-gray-300">Don’t forget to review your recent purchase.</p>
<span class="text-xs text-gray-500 dark:text-gray-400">1 day ago</span>
</div>
</div>
</div>
</div>
</div>Related Components
Notifications Component
Skeuomorphism-styled Notifications Component with responsive design and dark theme support. This component features a realistic, embossed look for notifications, including a subtle shadow and gleam effect. It is fully responsive and includes distinct styles for dark mode, ensuring readability and aesthetic appeal in all lighting conditions. Uses placeholder images for avatars.
Notifications Component
A Notifications Component designed with Material Design principles and a monochromatic color scheme for e-commerce applications, featuring a responsive design and dark theme support.