Notifications Component
Skeuomorphism styled notifications component with responsive effects and dark theme support, built using Tailwind CSS.
HTML Code
<div class="flex flex-col items-center p-4">
<!-- Notification 1 -->
<div class="bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded-lg shadow-lg p-4 mb-4 w-full max-w-sm">
<div class="flex items-center">
<img src="https://randomuser.me/api/portraits/thumb/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
<div>
<h4 class="text-lg font-semibold text-gray-800 dark:text-gray-200">John Doe</h4>
<p class="text-sm text-gray-600 dark:text-gray-400">Just joined the platform.</p>
</div>
</div>
<img src="https://picsum.photos/200/100" alt="Notification Image" class="mt-2 rounded-md shadow-sm">
</div>
<!-- Notification 2 -->
<div class="bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded-lg shadow-lg p-4 mb-4 w-full max-w-sm">
<div class="flex items-center">
<img src="https://randomuser.me/api/portraits/thumb/women/2.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
<div>
<h4 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Jane Smith</h4>
<p class="text-sm text-gray-600 dark:text-gray-400">Liked your post.</p>
</div>
</div>
<img src="https://picsum.photos/200/100" alt="Notification Image" class="mt-2 rounded-md shadow-sm">
</div>
<!-- Notification 3 -->
<div class="bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded-lg shadow-lg p-4 w-full max-w-sm">
<div class="flex items-center">
<img src="https://randomuser.me/api/portraits/thumb/men/3.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
<div>
<h4 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Mark Johnson</h4>
<p class="text-sm text-gray-600 dark:text-gray-400">Commented on your photo.</p>
</div>
</div>
<img src="https://picsum.photos/200/100" alt="Notification Image" class="mt-2 rounded-md shadow-sm">
</div>
</div>Related Components
Notifications Component
A Neumorphic Notifications Component with a grayscale color scheme and moderate complexity, designed for blog/content consumption. It is responsive and supports dark theme.
Notifications Component
A simple, responsive notifications component with dark mode support, designed in a Skeuomorphic style with a grayscale color scheme. Ideal for a portfolio to showcase minimal design skills.
Notifications Component
A complex, responsive notifications component designed with Material Design principles, cool neutral colors, and dark mode support, suitable for a portfolio to showcase interactive elements and depth effects.