SkeuomorphicNotificationsComponent
Un componente de notificaciones simple y receptivo inspirado en el Skeuomorphism, con un esquema de color análogo adecuado para sitios web comerciales / corporativos. Incluye soporte para temas oscuros y utiliza Tailwind CSS para el estilo. Las imágenes provienen de picsum.photos y los avatares de randomuser.me.
Código HTML
<div class="container mx-auto p-4 bg-gray-100 dark:bg-gray-800 rounded-lg shadow-xl">
<div class="flex items-center space-x-4">
<img class="w-12 h-12 rounded-full ring-2 ring-blue-300" src="https://randomuser.me/api/portraits/men/85.jpg" alt="User Avatar">
<div>
<div class="text-lg font-semibold text-gray-800 dark:text-gray-200">New Notification</div>
<p class="text-sm text-gray-600 dark:text-gray-400">You have a new message from John Doe.</p>
</div>
</div>
<div class="mt-4 flex justify-end">
<button class="px-4 py-2 bg-blue-500 text-white rounded-full shadow hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-50 dark:bg-blue-700 dark:hover:bg-blue-800">
View
</button>
</div>
</div>Componentes relacionados
Componente de notificaciones
Un componente de notificaciones responsivo diseñado en modo oscuro usando Tailwind CSS.
Componente de notificaciones
Un componente de notificaciones responsivo con microinteracciones, combinación de colores triádica y compatibilidad con temas oscuros, diseñado para mostrar trabajos o productos.
LuxuryNotificationsComponent
Un componente de notificaciones simple y elegante para aplicaciones de redes sociales, con un estilo de diseño de lujo/premium con colores apagados y capacidad de respuesta completa, incluida la compatibilidad con el modo oscuro.