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 notificaciones de notificación del sistema al estilo de Glassmorphism con colores pastel, diseñado para blogs y consumo de contenido. Es compatible con el modo oscuro y cuenta con una interfaz rica con elementos interactivos.
Notificaciones del sistema
Componente de notificaciones del sistema receptivo con estilo Glassmorphism para sitios web comerciales / corporativos, compatible con tema oscuro. Combinación de colores pastel.
Componente de notificaciones del sistema
Un componente de notificaciones de tostadas de estilo brutalista que utiliza Tailwind CSS, diseñado para una cartera que muestra trabajos o productos. El diseño incorpora un esquema de color análogo y admite el modo oscuro con una interfaz compleja.