Componente de notificaciones del sistema
Un componente de notificaciones de Toast minimalista y vibrante que usa Tailwind CSS. El componente está diseñado con un diseño simple para carteras, admite el modo oscuro y responde sin JavaScript.
Código HTML
<div class="fixed bottom-5 right-5 space-y-4">
<!-- Toast Notification -->
<div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-md flex items-center justify-between">
<div class="flex items-center">
<div class="flex-shrink-0 bg-green-500 rounded-full p-1">
<svg class="h-4 w-4 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
</div>
<div class="ml-3">
<p class="text-sm font-medium text-gray-800 dark:text-white">Success!</p>
<p class="text-sm text-gray-500 dark:text-gray-400">Your action was successful.</p>
</div>
</div>
<button class="ml-4 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300">
<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
</svg>
</button>
</div>
<!-- Another Toast Notification (Example) -->
<div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-md flex items-center justify-between">
<div class="flex items-center">
<div class="flex-shrink-0 bg-blue-500 rounded-full p-1">
<svg class="h-4 w-4 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path>
</svg>
</div>
<div class="ml-3">
<p class="text-sm font-medium text-gray-800 dark:text-white">Info</p>
<p class="text-sm text-gray-500 dark:text-gray-400">This is an informational message.</p>
</div>
</div>
<button class="ml-4 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300">
<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
</svg>
</button>
</div>
</div>Componentes relacionados
Notificaciones del sistema
Un componente de notificaciones del sistema receptivo y compatible con temas oscuros para comercio electrónico con un diseño minimalista / plano que utiliza un esquema de color complementario.
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.
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.