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 retro/vintage diseñado con tonos tierra e interacciones complejas para mostrar el trabajo del portafolio.
Componente de notificaciones
Un componente de notificaciones responsivo diseñado en modo oscuro usando Tailwind CSS.
Componente de notificaciones
Un componente de notificaciones complejo y receptivo con soporte para modo oscuro, diseñado con principios de Material Design y un esquema de color pastel para un sitio web de blog/contenido.