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.
Código HTML
<div class="flex flex-col items-center justify-center p-8 bg-gray-900 text-white min-h-screen">
<div class="bg-gray-800 backdrop-blur-md bg-opacity-30 rounded-lg shadow-lg p-6 max-w-md w-full">
<h2 class="text-2xl font-bold mb-4">Notifications</h2>
<!-- Notification Item -->
<div class="flex items-start mb-4 p-4 bg-gray-700 rounded-lg hover:bg-gray-600 transition duration-300 ease-in-out">
<img src="https://randomuser.me/api/portraits/men/10.jpg" alt="Avatar" class="w-12 h-12 rounded-full mr-4">
<div class="flex-1">
<p class="font-semibold">John Doe</p>
<p class="text-sm">You have a meeting scheduled at 3 PM.</p>
<span class="text-xs text-gray-400">10 minutes ago</span>
</div>
</div>
<!-- Notification Item -->
<div class="flex items-start mb-4 p-4 bg-gray-700 rounded-lg hover:bg-gray-600 transition duration-300 ease-in-out">
<img src="https://randomuser.me/api/portraits/women/12.jpg" alt="Avatar" class="w-12 h-12 rounded-full mr-4">
<div class="flex-1">
<p class="font-semibold">Jane Smith</p>
<p class="text-sm">Your invoice has been paid.</p>
<span class="text-xs text-gray-400">15 minutes ago</span>
</div>
</div>
<!-- Notification Item -->
<div class="flex items-start mb-4 p-4 bg-gray-700 rounded-lg hover:bg-gray-600 transition duration-300 ease-in-out">
<img src="https://randomuser.me/api/portraits/men/13.jpg" alt="Avatar" class="w-12 h-12 rounded-full mr-4">
<div class="flex-1">
<p class="font-semibold">Mike Johnson</p>
<p class="text-sm">New comment on your post.</p>
<span class="text-xs text-gray-400">30 minutes ago</span>
</div>
</div>
<!-- Notification Item -->
<div class="flex items-start mb-4 p-4 bg-gray-700 rounded-lg hover:bg-gray-600 transition duration-300 ease-in-out">
<img src="https://randomuser.me/api/portraits/women/14.jpg" alt="Avatar" class="w-12 h-12 rounded-full mr-4">
<div class="flex-1">
<p class="font-semibold">Emily Davis</p>
<p class="text-sm">Project deadline is approaching.</p>
<span class="text-xs text-gray-400">1 hour ago</span>
</div>
</div>
<div class="mt-4 text-center">
<button class="bg-blue-500 hover:bg-blue-400 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">
View All Notifications
</button>
</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.
Componente de notificaciones - Música/Audio industrial
Un componente de notificaciones responsivo con una estética industrial y cruda, colores de alto contraste y soporte para modo oscuro, adecuado para plataformas de música y audio. Cuenta con estados no leídos/leídos y elementos interactivos.
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.