Componente de notificaciones del sistema
Un componente complejo de notificación del sistema de estilo glassmorphism para paneles, con elementos translúcidos, efectos de desenfoque y un esquema de color análogo. Totalmente receptivo con soporte para modo oscuro.
Código HTML
<div class="fixed inset-0 z-50 flex flex-col items-end justify-start p-4 space-y-4 pointer-events-none sm:p-6 md:p-8">
<!-- Success Toast -->
<div class="max-w-sm w-full bg-slate-100/30 dark:bg-slate-800/30 backdrop-blur-lg rounded-xl shadow-xl flex p-4 ring-1 ring-slate-200/50 dark:ring-slate-700/50 transition-all duration-300 ease-out transform translate-y-0 opacity-100 pointer-events-auto">
<div class="flex-shrink-0">
<svg class="h-6 w-6 text-emerald-500 dark:text-emerald-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
</div>
<div class="ml-3 w-0 flex-1 pt-0.5">
<p class="text-sm font-semibold text-slate-800 dark:text-slate-200">Success!</p>
<p class="mt-1 text-sm text-slate-600 dark:text-slate-400">Your changes have been saved successfully.</p>
<div class="mt-4 flex space-x-7">
<button type="button" class="rounded-md bg-transparent p-1.5 text-sm font-medium text-emerald-600 dark:text-emerald-400 hover:text-emerald-500 dark:hover:text-emerald-300 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-offset-2 dark:focus:ring-offset-slate-900">
View Changes
</button>
<button type="button" class="rounded-md bg-transparent p-1.5 text-sm font-medium text-slate-600 dark:text-slate-400 hover:text-slate-500 dark:hover:text-slate-300 focus:outline-none focus:ring-2 focus:ring-slate-500 focus:ring-offset-2 dark:focus:ring-offset-slate-900">
Dismiss
</button>
</div>
</div>
<div class="ml-4 flex flex-shrink-0">
<button type="button" class="inline-flex rounded-md p-1.5 text-slate-500 dark:text-slate-400 hover:text-slate-600 dark:hover:text-slate-300 focus:outline-none focus:ring-2 focus:ring-slate-500 focus:ring-offset-2 dark:focus:ring-offset-slate-900">
<span class="sr-only">Close</span>
<svg class="h-5 w-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
</div>
<!-- Warning Toast -->
<div class="max-w-sm w-full bg-slate-100/30 dark:bg-slate-800/30 backdrop-blur-lg rounded-xl shadow-xl flex p-4 ring-1 ring-slate-200/50 dark:ring-slate-700/50 transition-all duration-300 ease-out transform translate-y-0 opacity-100 pointer-events-auto">
<div class="flex-shrink-0">
<svg class="h-6 w-6 text-amber-500 dark:text-amber-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.021 3.373 1.865 3.373h14.47c1.844 0 2.733-1.873 1.865-3.373L13.723 3.535c-.863-1.5-2.913-1.5-3.776 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z" />
</svg>
</div>
<div class="ml-3 w-0 flex-1 pt-0.5">
<p class="text-sm font-semibold text-slate-800 dark:text-slate-200">Heads up!</p>
<p class="mt-1 text-sm text-slate-600 dark:text-slate-400">Your session is about to expire. Please re-authenticate.</p>
<div class="mt-4 flex space-x-7">
<button type="button" class="rounded-md bg-transparent p-1.5 text-sm font-medium text-amber-600 dark:text-amber-400 hover:text-amber-500 dark:hover:text-amber-300 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-offset-2 dark:focus:ring-offset-slate-900">
Renew Session
</button>
<button type="button" class="rounded-md bg-transparent p-1.5 text-sm font-medium text-slate-600 dark:text-slate-400 hover:text-slate-500 dark:hover:text-slate-300 focus:outline-none focus:ring-2 focus:ring-slate-500 focus:ring-offset-2 dark:focus:ring-offset-slate-900">
Later
</button>
</div>
</div>
<div class="ml-4 flex flex-shrink-0">
<button type="button" class="inline-flex rounded-md p-1.5 text-slate-500 dark:text-slate-400 hover:text-slate-600 dark:hover:text-slate-300 focus:outline-none focus:ring-2 focus:ring-slate-500 focus:ring-offset-2 dark:focus:ring-offset-slate-900">
<span class="sr-only">Close</span>
<svg class="h-5 w-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
</div>
<!-- Error Toast -->
<div class="max-w-sm w-full bg-slate-100/30 dark:bg-slate-800/30 backdrop-blur-lg rounded-xl shadow-xl flex p-4 ring-1 ring-slate-200/50 dark:ring-slate-700/50 transition-all duration-300 ease-out transform translate-y-0 opacity-100 pointer-events-auto">
<div class="flex-shrink-0">
<svg class="h-6 w-6 text-rose-500 dark:text-rose-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m9.303-9.303a2.25 2.25 0 00-3.182 0l-10.101 10.101a2.25 2.25 0 000 3.182L10.96 21.04a2.25 2.25 0 003.182 0L21.04 10.96a2.25 2.25 0 000-3.182zM15.75 14.75h.007v.008H15.75v-.008z" />
</svg>
</div>
<div class="ml-3 w-0 flex-1 pt-0.5">
<p class="text-sm font-semibold text-slate-800 dark:text-slate-200">Error!</p>
<p class="mt-1 text-sm text-slate-600 dark:text-slate-400">Failed to load data. Please try again later.</p>
<div class="mt-4 flex space-x-7">
<button type="button" class="rounded-md bg-transparent p-1.5 text-sm font-medium text-rose-600 dark:text-rose-400 hover:text-rose-500 dark:hover:text-rose-300 focus:outline-none focus:ring-2 focus:ring-rose-500 focus:ring-offset-2 dark:focus:ring-offset-slate-900">
Retry
</button>
<button type="button" class="rounded-md bg-transparent p-1.5 text-sm font-medium text-slate-600 dark:text-slate-400 hover:text-slate-500 dark:hover:text-slate-300 focus:outline-none focus:ring-2 focus:ring-slate-500 focus:ring-offset-2 dark:focus:ring-offset-slate-900">
Support
</button>
</div>
</div>
<div class="ml-4 flex flex-shrink-0">
<button type="button" class="inline-flex rounded-md p-1.5 text-slate-500 dark:text-slate-400 hover:text-slate-600 dark:hover:text-slate-300 focus:outline-none focus:ring-2 focus:ring-slate-500 focus:ring-offset-2 dark:focus:ring-offset-slate-900">
<span class="sr-only">Close</span>
<svg class="h-5 w-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
</div>
</div>Componentes relacionados
Componente de notificaciones del sistema
Un componente de notificaciones del sistema diseñado con el estilo Glassmorphism, con efectos responsivos y compatibilidad con temas oscuros. Utiliza Tailwind CSS para el estilo, junto con imágenes de marcador de posición de picsum.photos para las imágenes y randomuser.me para los avatares.
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.
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.