Componente de notificaciones del sistema
Un componente de notificaciones del sistema con capacidad de respuesta diseñado con Glassmorphism, con una combinación de colores monocromática, compatibilidad con el modo oscuro y listo para usar en una cartera.
Código HTML
<div class="fixed bottom-5 right-5 space-y-4 z-50">
<!-- Toast Notification 1 -->
<div class="bg-white/30 backdrop-blur-md border border-white/20 rounded-lg shadow-lg p-4 transition-all duration-300 dark:bg-gray-800/30 dark:border-gray-700/20">
<div class="flex items-center space-x-3">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar" class="w-10 h-10 rounded-full" />
<div class="flex-1">
<h2 class="text-gray-900 dark:text-gray-100 font-semibold">New Project Alert</h2>
<p class="text-gray-700 dark:text-gray-300">You have successfully created a new project!</p>
<span class="text-sm text-gray-500 dark:text-gray-400">Just now</span>
</div>
<button class="text-gray-500 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" /></svg>
</button>
</div>
</div>
<!-- Toast Notification 2 -->
<div class="bg-white/30 backdrop-blur-md border border-white/20 rounded-lg shadow-lg p-4 transition-all duration-300 dark:bg-gray-800/30 dark:border-gray-700/20">
<div class="flex items-center space-x-3">
<img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Avatar" class="w-10 h-10 rounded-full" />
<div class="flex-1">
<h2 class="text-gray-900 dark:text-gray-100 font-semibold">Portfolio Updated</h2>
<p class="text-gray-700 dark:text-gray-300">Your portfolio has been successfully updated!</p>
<span class="text-sm text-gray-500 dark:text-gray-400">5 mins ago</span>
</div>
<button class="text-gray-500 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" /></svg>
</button>
</div>
</div>
</div>Componentes relacionados
Componente de notificaciones del sistema
Un componente de notificaciones del sistema receptivo con estilo Glassmorphism y combinación de colores vibrantes, adecuado para aplicaciones de comercio electrónico. Es compatible con el tema oscuro y tiene una interfaz compleja con múltiples elementos interactivos.
Notificaciones del sistema
Componente de notificaciones del sistema con estilo Glassmorphism, efectos responsivos y compatibilidad con temas oscuros mediante Tailwind CSS
Componente de notificaciones del sistema
Un componente de notificaciones del sistema diseñado con el estilo Glassmorphism, con efectos responsivos y compatibilidad con temas oscuros. Utiliza Tailwind CSS para el estilo, junto con imágenes de marcador de posición de picsum.photos para las imágenes y randomuser.me para los avatares.