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 de estilo Neumorphism que utiliza CSS de Tailwind con compatibilidad con temas oscuros.
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.
Retro_Vintage_Pastel_Finance_Toast_Notifications
Un componente de notificaciones de tostadas complejo y receptivo con una estética retro / vintage, combinación de colores pastel, diseñado para interfaces financieras / bancarias. Incluye soporte para modo oscuro y múltiples tipos de notificaciones.