SkeuomorphicNotificationsComponent
A simple, responsive notifications component inspired by Skeuomorphism, featuring an analogous color scheme suitable for business/corporate websites. It includes dark theme support and uses Tailwind CSS for styling. Images are sourced from picsum.photos and avatars from randomuser.me.
HTML Code
<div class="container mx-auto p-4 bg-gray-100 dark:bg-gray-800 rounded-lg shadow-xl">
<div class="flex items-center space-x-4">
<img class="w-12 h-12 rounded-full ring-2 ring-blue-300" src="https://randomuser.me/api/portraits/men/85.jpg" alt="User Avatar">
<div>
<div class="text-lg font-semibold text-gray-800 dark:text-gray-200">New Notification</div>
<p class="text-sm text-gray-600 dark:text-gray-400">You have a new message from John Doe.</p>
</div>
</div>
<div class="mt-4 flex justify-end">
<button class="px-4 py-2 bg-blue-500 text-white rounded-full shadow hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-50 dark:bg-blue-700 dark:hover:bg-blue-800">
View
</button>
</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
Responsive Notifications Component with Dark Mode support for Dashboard
Notifications Component
A simple, clean, and high-contrast notifications component suitable for corporate/professional booking and reservation systems, with full responsiveness and dark mode support.