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
Componente de notificaciones de estilo Skeuomorphism con efectos responsivos y soporte para temas oscuros, construido con Tailwind CSS.
Componente de notificaciones
Un componente de notificaciones skeuomórfico para comercio electrónico con una combinación de colores vibrantes, una interfaz compleja, un diseño receptivo y compatibilidad con temas oscuros, creado con Tailwind CSS.
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.