Componente de notificaciones 26
Un componente de notificaciones minimalista diseñado con Tailwind CSS, con efectos responsivos y soporte para temas oscuros, que muestra una lista de notificaciones con avatares e imágenes.
Código HTML
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg max-w-md mx-auto p-6">
<h2 class="text-xl font-semibold mb-4">Notifications</h2>
<div class="space-y-3">
<!-- Notification Item -->
<div class="flex items-start bg-gray-100 dark:bg-gray-700 p-4 rounded-lg">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3">
<div class="flex-1">
<p class="text-gray-800 dark:text-gray-200 font-medium">John Doe liked your post</p>
<p class="text-gray-600 dark:text-gray-400 text-sm">Just now</p>
</div>
<img src="https://picsum.photos/40/40" alt="Image" class="w-10 h-10 rounded-lg ml-2">
</div>
<!-- Notification Item -->
<div class="flex items-start bg-gray-100 dark:bg-gray-700 p-4 rounded-lg">
<img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3">
<div class="flex-1">
<p class="text-gray-800 dark:text-gray-200 font-medium">Jane Smith commented on your photo</p>
<p class="text-gray-600 dark:text-gray-400 text-sm">5 minutes ago</p>
</div>
<img src="https://picsum.photos/40/41" alt="Image" class="w-10 h-10 rounded-lg ml-2">
</div>
<!-- Notification Item -->
<div class="flex items-start bg-gray-100 dark:bg-gray-700 p-4 rounded-lg">
<img src="https://randomuser.me/api/portraits/men/3.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3">
<div class="flex-1">
<p class="text-gray-800 dark:text-gray-200 font-medium">Mark Wilson started following you</p>
<p class="text-gray-600 dark:text-gray-400 text-sm">10 minutes ago</p>
</div>
<img src="https://picsum.photos/40/42" alt="Image" class="w-10 h-10 rounded-lg ml-2">
</div>
</div>
</div>Componentes relacionados
Componente de notificaciones
Un componente de notificaciones simple y receptivo con soporte para modo oscuro, diseñado en un estilo Skeuomorphic con un esquema de color en escala de grises. Ideal para un portafolio para mostrar habilidades de diseño mínimas.
Memphis_Gaming_Notification_Simple_Forest_Green
Un componente de notificación de juegos simple y receptivo con una influencia de diseño de Memphis que utiliza una paleta de colores verde bosque, incluida la compatibilidad con el modo oscuro.
Componente de notificaciones
Componente de notificaciones de estilo skeuomorphism con diseño responsivo y soporte de tema oscuro. Este componente presenta un aspecto realista y en relieve para las notificaciones, que incluye un sutil efecto de sombra y brillo. Es totalmente sensible e incluye estilos distintos para el modo oscuro, lo que garantiza la legibilidad y el atractivo estético en todas las condiciones de iluminación. Utiliza imágenes de marcador de posición para avatares.