Componente de notificaciones del sistema
Componente de notificación del sistema con estilo Glassmorphism, combinación de colores de tonos tierra y diseño responsivo con soporte para modo oscuro.
Código HTML
<div class="fixed bottom-4 right-4 z-50">
<!-- Toast 1 -->
<div class="bg-white/30 dark:bg-gray-800/30 backdrop-blur-md rounded-lg shadow-lg mb-4 p-4 flex items-center text-gray-800 dark:text-gray-200">
<div class="flex-shrink-0">
<img class="h-10 w-10 rounded-full" src="https://www.picsum.photos/seed/avatar1/40/40" alt="Avatar">
</div>
<div class="ml-3">
<p class="text-sm font-medium">John Doe</p>
<p class="text-xs">New message received.</p>
</div>
<button class="ml-auto text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
</svg>
</button>
</div>
<!-- Toast 2 -->
<div class="bg-white/30 dark:bg-gray-800/30 backdrop-blur-md rounded-lg shadow-lg mb-4 p-4 flex items-center text-gray-800 dark:text-gray-200">
<div class="flex-shrink-0">
<img class="h-10 w-10 rounded-full" src="https://www.picsum.photos/seed/avatar2/40/40" alt="Avatar">
</div>
<div class="ml-3">
<p class="text-sm font-medium">Jane Smith</p>
<p class="text-xs">Your report is ready.</p>
</div>
<button class="ml-auto text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
</svg>
</button>
</div>
<!-- Toast 3 -->
<div class="bg-white/30 dark:bg-gray-800/30 backdrop-blur-md rounded-lg shadow-lg p-4 flex items-center text-gray-800 dark:text-gray-200">
<div class="flex-shrink-0">
<img class="h-10 w-10 rounded-full" src="https://www.picsum.photos/seed/avatar3/40/40" alt="Avatar">
</div>
<div class="ml-3">
<p class="text-sm font-medium">System Update</p>
<p class="text-xs">Security patch applied.</p>
</div>
<button class="ml-auto text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
</svg>
</button>
</div>
</div>
Componentes relacionados
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.
Componente de notificaciones del sistema
Un conjunto de notificaciones de tostadas diseñadas con un estilo de tipografía suizo/internacional limpio y minimalista, con una combinación de colores análoga. Optimizado para sitios web relacionados con la fotografía, que proporciona comentarios claros y concisos a los usuarios. Incluye diseño responsivo y soporte para modo oscuro.
Componente de notificaciones del sistema de Glassmorphism
Un componente de notificación de tostadas receptivo con un diseño de cristal, combinación de colores pastel y compatibilidad con modo oscuro, adecuado para sistemas de reserva y reservas.