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.
HTML Code
<div class="p-4 max-w-sm mx-auto bg-white rounded-xl shadow-md space-y-4 dark:bg-gray-800">
<h2 class="text-xl font-bold text-gray-900 dark:text-white">Notifications</h2>
<!-- Notification 1 -->
<div class="flex items-center space-x-4 p-4 bg-gradient-to-br from-gray-100 to-gray-200 rounded-lg shadow-inner dark:from-gray-700 dark:to-gray-900">
<img class="w-12 h-12 rounded-full ring-2 ring-gray-300 dark:ring-gray-600" src="https://randomuser.me/api/portraits/thumb/women/68.jpg" alt="Avatar">
<div class="flex-1">
<p class="text-sm font-medium text-gray-900 dark:text-gray-200">New message from <span class="font-semibold">Alice</span></p>
<p class="text-sm text-gray-500 dark:text-gray-400">Hey, are you free to chat?</p>
</div>
</div>
<!-- Notification 2 -->
<div class="flex items-center space-x-4 p-4 bg-gradient-to-br from-gray-100 to-gray-200 rounded-lg shadow-inner dark:from-gray-700 dark:to-gray-900">
<img class="w-12 h-12 rounded-full ring-2 ring-gray-300 dark:ring-gray-600" src="https://randomuser.me/api/portraits/thumb/men/75.jpg" alt="Avatar">
<div class="flex-1">
<p class="text-sm font-medium text-gray-900 dark:text-gray-200">You have a new follower: <span class="font-semibold">Bob</span></p>
<p class="text-sm text-gray-500 dark:text-gray-400">Started following you 5m ago.</p>
</div>
</div>
<!-- Notification 3 -->
<div class="flex items-center space-x-4 p-4 bg-gradient-to-br from-gray-100 to-gray-200 rounded-lg shadow-inner dark:from-gray-700 dark:to-gray-900">
<img class="w-12 h-12 rounded-full ring-2 ring-gray-300 dark:ring-gray-600" src="https://picsum.photos/id/237/80/80" alt="Event Image">
<div class="flex-1">
<p class="text-sm font-medium text-gray-900 dark:text-gray-200">Event Reminder: <span class="font-semibold">Team Meeting</span></p>
<p class="text-sm text-gray-500 dark:text-gray-400">Tomorrow at 10:00 AM.</p>
</div>
</div>
</div>Related Components
Notifications Component
A responsive notifications component designed in dark mode using Tailwind CSS.
Notifications Component
A complex, responsive notifications component with dark mode support, designed with Material Design principles and a pastel color scheme for a blog/content website.
Notifications Component
Skeuomorphism styled notifications component with responsive effects and dark theme support, built using Tailwind CSS.