Notificaciones del sistema
Componente de notificaciones de tostadas de diseño minimalista / plano con esquema de color análogo, complejidad simple, para fines de cartera. Responsivo con soporte para temas oscuros.
Código HTML
<div class="fixed bottom-4 right-4 space-y-2">
<!-- Success Toast -->
<div class="bg-green-500 dark:bg-green-700 text-white px-4 py-3 rounded-md shadow-md flex items-center">
<div class="mr-2">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
</svg>
</div>
<div>
<p class="font-bold">Success!</p>
<p>Your action was completed successfully.</p>
</div>
</div>
<!-- Error Toast -->
<div class="bg-red-500 dark:bg-red-700 text-white px-4 py-3 rounded-md shadow-md flex items-center">
<div class="mr-2">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586l-1.293-1.293z" clip-rule="evenodd" />
</svg>
</div>
<div>
<p class="font-bold">Error!</p>
<p>Something went wrong. Please try again.</p>
</div>
</div>
<!-- Info Toast -->
<div class="bg-blue-500 dark:bg-blue-700 text-white px-4 py-3 rounded-md shadow-md flex items-center">
<div class="mr-2">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd" />
</svg>
</div>
<div>
<p class="font-bold">Information</p>
<p>This is an informational message.</p>
</div>
</div>
</div>Componentes relacionados
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.
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.
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.