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.
Código HTML
<div class="fixed bottom-5 right-5 space-y-4 z-50">
<!-- Success Toast -->
<div class="bg-white bg-opacity-30 backdrop-filter backdrop-blur-lg rounded-lg shadow-lg p-4 pr-10 max-w-sm mx-auto dark:bg-gray-800 dark:bg-opacity-30">
<div class="flex items-center space-x-3">
<div class="flex-shrink-0">
<svg class="h-6 w-6 text-green-500" 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="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
</div>
<div class="flex-1">
<p class="text-sm font-medium text-gray-900 dark:text-white">Success Message</p>
<p class="mt-1 text-sm text-gray-500 dark:text-gray-300">Your action was successful.</p>
</div>
</div>
</div>
<!-- Info Toast -->
<div class="bg-white bg-opacity-30 backdrop-filter backdrop-blur-lg rounded-lg shadow-lg p-4 pr-10 max-w-sm mx-auto dark:bg-gray-800 dark:bg-opacity-30">
<div class="flex items-center space-x-3">
<div class="flex-shrink-0">
<svg class="h-6 w-6 text-blue-500" 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="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
</div>
<div class="flex-1">
<p class="text-sm font-medium text-gray-900 dark:text-white">Information</p>
<p class="mt-1 text-sm text-gray-500 dark:text-gray-300">This is an informational message.</p>
</div>
</div>
</div>
<!-- Warning Toast -->
<div class="bg-white bg-opacity-30 backdrop-filter backdrop-blur-lg rounded-lg shadow-lg p-4 pr-10 max-w-sm mx-auto dark:bg-gray-800 dark:bg-opacity-30">
<div class="flex items-center space-x-3">
<div class="flex-shrink-0">
<svg class="h-6 w-6 text-yellow-500" 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="M12 9v2m0 4h.01m-6.938 4H21a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path></svg>
</div>
<div class="flex-1">
<p class="text-sm font-medium text-gray-900 dark:text-white">Warning</p>
<p class="mt-1 text-sm text-gray-500 dark:text-gray-300">Something might be wrong.</p>
</div>
</div>
</div>
<!-- Error Toast -->
<div class="bg-white bg-opacity-30 backdrop-filter backdrop-blur-lg rounded-lg shadow-lg p-4 pr-10 max-w-sm mx-auto dark:bg-gray-800 dark:bg-opacity-30">
<div class="flex items-center space-x-3">
<div class="flex-shrink-0">
<svg class="h-6 w-6 text-red-500" 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="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
</div>
<div class="flex-1">
<p class="text-sm font-medium text-gray-900 dark:text-white">Error</p>
<p class="mt-1 text-sm text-gray-500 dark:text-gray-300">An error occurred.</p>
</div>
</div>
</div>
</div>Componentes relacionados
Componente de notificaciones del sistema de Glassmorphism
Un componente de notificación de tostadas receptivo con un diseño de cristal, combinación de colores pastel y compatibilidad con modo oscuro, adecuado para sistemas de reserva y reservas.
Componente de notificaciones de tostadas Art Deco
Un componente de notificación de tostadas simple y de alto contraste con una estética Art Deco, adecuado para sitios web de noticias y periodismo. Cuenta con diseño responsivo y 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.