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
Un componente de notificaciones receptivo con diseño 3D, diseño simple en escala de grises y soporte de tema oscuro, adecuado para sitios web comerciales.
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
Un componente de notificaciones complejo y receptivo diseñado con los principios de Material Design, colores neutros fríos y compatibilidad con el modo oscuro, adecuado para que un portafolio muestre elementos interactivos y efectos de profundidad.