Componente de notificaciones del sistema
Un conjunto de notificaciones de tostadas diseñadas con un estilo de tipografía suizo/internacional limpio y minimalista, con una combinación de colores análoga. Optimizado para sitios web relacionados con la fotografía, que proporciona comentarios claros y concisos a los usuarios. Incluye diseño responsivo y soporte para modo oscuro.
Código HTML
<div class="fixed bottom-4 right-4 z-50 w-full max-w-sm overflow-hidden p-2 sm:max-w-md">
<!-- Success Toast -->
<div class="mb-3 flex items-center rounded-lg bg-green-500/90 p-4 font-sans text-sm text-white shadow-lg backdrop-blur-sm transition-all duration-300 ease-out hover:scale-[1.01] dark:bg-green-600/90 md:p-5" role="alert">
<div class="flex flex-shrink-0 items-center justify-center">
<svg class="h-5 w-5 text-white" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<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"></path>
</svg>
</div>
<div class="ml-3 flex-1">
<h3 class="font-semibold uppercase tracking-wide">Success</h3>
<p class="mt-1 text-xs sm:text-sm">Photo 'Parisian Sunset.jpg' uploaded successfully.</p>
</div>
<button type="button" class="ml-auto h-6 w-6 flex-shrink-0 text-white opacity-70 transition-opacity duration-300 hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-white focus:ring-opacity-50">
<span class="sr-only">Close</span>
<svg class="h-4 w-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
</button>
</div>
<!-- Warning Toast -->
<div class="mb-3 flex items-center rounded-lg bg-orange-500/90 p-4 font-sans text-sm text-white shadow-lg backdrop-blur-sm transition-all duration-300 ease-out hover:scale-[1.01] dark:bg-orange-600/90 md:p-5" role="alert">
<div class="flex flex-shrink-0 items-center justify-center">
<svg class="h-5 w-5 text-white" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.487 0L14.803 12c.765 1.36-.2 3-1.743 3H6.94c-1.543 0-2.508-1.64-1.743-3L8.257 3.099zM10 10a1 1 0 100-2 1 1 0 000 2zm0 4a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd"></path>
</svg>
</div>
<div class="ml-3 flex-1">
<h3 class="font-semibold uppercase tracking-wide">Warning</h3>
<p class="mt-1 text-xs sm:text-sm">Some images may exceed recommended resolution for web.</p>
</div>
<button type="button" class="ml-auto h-6 w-6 flex-shrink-0 text-white opacity-70 transition-opacity duration-300 hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-white focus:ring-opacity-50">
<span class="sr-only">Close</span>
<svg class="h-4 w-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
</button>
</div>
<!-- Error Toast -->
<div class="flex items-center rounded-lg bg-red-500/90 p-4 font-sans text-sm text-white shadow-lg backdrop-blur-sm transition-all duration-300 ease-out hover:scale-[1.01] dark:bg-red-600/90 md:p-5" role="alert">
<div class="flex flex-shrink-0 items-center justify-center">
<svg class="h-5 w-5 text-white" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<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.586 8.707 7.293z" clip-rule="evenodd"></path>
</svg>
</div>
<div class="ml-3 flex-1">
<h3 class="font-semibold uppercase tracking-wide">Error</h3>
<p class="mt-1 text-xs sm:text-sm">Failed to connect to image server. Please try again.</p>
</div>
<button type="button" class="ml-auto h-6 w-6 flex-shrink-0 text-white opacity-70 transition-opacity duration-300 hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-white focus:ring-opacity-50">
<span class="sr-only">Close</span>
<svg class="h-4 w-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
</button>
</div>
</div>Componentes relacionados
Componente de notificaciones del sistema
Un componente de notificación de notificaciones neumórficas con colores pastel, diseño receptivo y soporte de temas oscuros, adecuado para blogs y sitios de contenido.
Notificaciones de Retro Toast
Un componente de notificaciones de toast receptivo con diseño retro / vintage, combinación de colores triádica y compatibilidad con modo oscuro, construido con Tailwind CSS para uso de cartera.
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.