Componente de notificaciones del sistema
Un componente de notificación del sistema en modo oscuro diseñado para aplicaciones de panel, con un esquema de color complementario con varios elementos interactivos.
Código HTML
<div class="fixed bottom-5 right-5 space-y-4">
<div class="bg-gray-800 dark:bg-gray-900 text-white p-4 rounded-lg shadow-lg flex items-start space-x-3">
<img class="h-12 w-12 rounded-full" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
<div class="flex-1">
<p class="font-semibold">John Doe</p>
<p class="text-sm">Successfully completed the action.</p>
</div>
<button class="text-blue-500 hover:text-blue-400 focus:outline-none">
Dismiss
</button>
</div>
<div class="bg-gray-800 dark:bg-gray-900 text-white p-4 rounded-lg shadow-lg flex items-start space-x-3">
<img class="h-12 w-12 rounded-full" src="https://randomuser.me/api/portraits/women/32.jpg" alt="User Avatar">
<div class="flex-1">
<p class="font-semibold">Jane Smith</p>
<p class="text-sm">You have new messages.</p>
</div>
<button class="text-blue-500 hover:text-blue-400 focus:outline-none">
View
</button>
</div>
<div class="bg-gray-800 dark:bg-gray-900 text-white p-4 rounded-lg shadow-lg flex items-start space-x-3">
<img class="h-12 w-12 rounded-full" src="https://randomuser.me/api/portraits/men/45.jpg" alt="User Avatar">
<div class="flex-1">
<p class="font-semibold">Mike Johnson</p>
<p class="text-sm">Error occurred during processing!</p>
</div>
<button class="text-blue-500 hover:text-blue-400 focus:outline-none">
Retry
</button>
</div>
</div>
Componentes relacionados
Componente de notificaciones del sistema
Un componente de notificación de tostadas limpio y minimalista con estilo de tipografía suiza / internacional, combinación de colores púrpura / violeta, diseñado para sistemas de reserva / reserva. Totalmente receptivo con soporte para modo oscuro.
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.
Retro_Vintage_Toast_Notifications_Component
Un componente de notificación de tostadas simple, de temática retro / vintage para herramientas comerciales / CRM, con neutros cálidos, diseño receptivo y soporte de modo oscuro.