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.
Código HTML
<div class="min-h-screen bg-gray-100 dark:bg-gray-900 flex items-center justify-center p-4">
<div class="w-full max-w-md bg-white dark:bg-gray-800 rounded-lg shadow-xl border border-gray-200 dark:border-gray-700 overflow-hidden transform duration-300 hover:scale-105">
<div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-700 flex items-center justify-between">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-100">Notifications</h3>
<span class="text-sm text-gray-500 dark:text-gray-400">3 New</span>
</div>
<div class="p-4 space-y-4">
<!-- Notification Item 1 -->
<div class="flex items-start space-x-3 p-3 rounded-md bg-gray-100 dark:bg-gray-750 shadow-md border border-gray-200 dark:border-gray-700 transform duration-200 hover:shadow-lg">
<img class="h-10 w-10 rounded-full object-cover border-2 border-gray-300 dark:border-gray-600" src="https://randomuser.me/api/portraits/thumb/men/1.jpg" alt="Avatar">
<div class="flex-1">
<p class="text-sm font-medium text-gray-800 dark:text-gray-200">John Doe commented on your post.</p>
<p class="text-xs text-gray-500 dark:text-gray-400">2 hours ago</p>
</div>
</div>
<!-- Notification Item 2 -->
<div class="flex items-start space-x-3 p-3 rounded-md bg-gray-100 dark:bg-gray-750 shadow-md border border-gray-200 dark:border-gray-700 transform duration-200 hover:shadow-lg">
<img class="h-10 w-10 rounded-full object-cover border-2 border-gray-300 dark:border-gray-600" src="https://randomuser.me/api/portraits/thumb/women/2.jpg" alt="Avatar">
<div class="flex-1">
<p class="text-sm font-medium text-gray-800 dark:text-gray-200">Jane Smith liked your photo.</p>
<p class="text-xs text-gray-500 dark:text-gray-400">5 hours ago</p>
</div>
</div>
<!-- Notification Item 3 -->
<div class="flex items-start space-x-3 p-3 rounded-md bg-gray-100 dark:bg-gray-750 shadow-md border border-gray-200 dark:border-gray-700 transform duration-200 hover:shadow-lg">
<img class="h-10 w-10 rounded-full object-cover border-2 border-gray-300 dark:border-gray-600" src="https://randomuser.me/api/portraits/thumb/men/3.jpg" alt="Avatar">
<div class="flex-1">
<p class="text-sm font-medium text-gray-800 dark:text-gray-200">You have a new message from Bob Johnson.</p>
<p class="text-xs text-gray-500 dark:text-gray-400">1 day ago</p>
</div>
</div>
</div>
<div class="px-6 py-3 border-t border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-700 text-right">
<a href="#" class="text-sm font-medium text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 transform duration-200 hover:underline">View All Notifications</a>
</div>
</div>
</div>
Componentes relacionados
Componente de notificaciones minimalista (escala de grises)
Un componente de notificaciones simple y minimalista en escala de grises para carteras, con soporte de modo responsivo y oscuro usando Tailwind CSS. Utiliza picsum.photos para las imágenes y randomuser.me para los avatares.
Componente de notificaciones
Un componente de notificaciones con un diseño de cristal con un esquema de color monocromático, adaptado para aplicaciones web empresariales/corporativas. El componente incluye varios elementos interactivos y es compatible con el modo oscuro.
Componente de notificaciones
Un componente de notificaciones retro/vintage diseñado con tonos tierra e interacciones complejas para mostrar el trabajo del portafolio.