Componente de notificaciones de Brutalism Toast
Un conjunto de notificaciones de tostadas de inspiración brutalista con una combinación de colores cálidos y neutros, adecuadas para sistemas de reservas. Presenta contrastes crudos y audaces y un diseño receptivo con soporte para modo oscuro.
Código HTML
<div class="p-4 sm:p-6 lg:p-8 bg-zinc-100 dark:bg-zinc-900 min-h-screen font-sans">
<!-- Container for Toast Notifications -->
<div class="fixed bottom-4 right-4 z-50 flex flex-col space-y-4 w-full max-w-xs sm:max-w-sm lg:max-w-md pointer-events-none">
<!-- Success Toast - Booking Confirmed -->
<div class="relative p-4 sm:p-5 border-4 border-zinc-900 dark:border-zinc-100 bg-amber-200 dark:bg-amber-800 text-zinc-900 dark:text-zinc-100 shadow-[8px_8px_0px_0px_rgba(0,0,0,1)] dark:shadow-[8px_8px_0px_0px_rgba(255,255,255,1)] pointer-events-auto transition-all duration-300 transform hover:-translate-x-1 hover:-translate-y-1">
<div class="flex items-start">
<div class="flex-shrink-0 pt-1">
<svg class="h-6 w-6 text-zinc-900 dark:text-zinc-100" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
<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" />
</svg>
</div>
<div class="ml-3 w-0 flex-1 pt-0.5">
<p class="text-lg sm:text-xl font-extrabold uppercase tracking-wide">Booking Confirmed!</p>
<p class="mt-1 text-sm sm:text-base font-medium leading-tight">Your reservation for Dr. Smith on Feb 14th at 3 PM is all set.</p>
</div>
<div class="ml-4 flex-shrink-0 flex">
<button type="button" class="absolute top-2 right-2 p-1 rounded-full text-zinc-900 dark:text-zinc-100 hover:text-zinc-700 dark:hover:text-zinc-300 focus:outline-none focus:ring-2 focus:ring-zinc-900 dark:focus:ring-zinc-100 focus:ring-offset-2 focus:ring-offset-amber-200 dark:focus:ring-offset-amber-800">
<span class="sr-only">Close</span>
<svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<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" />
</svg>
</button>
</div>
</div>
</div>
<!-- Info Toast - Reminder/Update -->
<div class="relative p-4 sm:p-5 border-4 border-zinc-900 dark:border-zinc-100 bg-stone-200 dark:bg-stone-800 text-zinc-900 dark:text-zinc-100 shadow-[8px_8px_0px_0px_rgba(0,0,0,1)] dark:shadow-[8px_8px_0px_0px_rgba(255,255,255,1)] pointer-events-auto transition-all duration-300 transform hover:-translate-x-1 hover:-translate-y-1">
<div class="flex items-start">
<div class="flex-shrink-0 pt-1">
<svg class="h-6 w-6 text-zinc-900 dark:text-zinc-100" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
<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" />
</svg>
</div>
<div class="ml-3 w-0 flex-1 pt-0.5">
<p class="text-lg sm:text-xl font-extrabold uppercase tracking-wide">Appointment Reminder</p>
<p class="mt-1 text-sm sm:text-base font-medium leading-tight">Just a friendly reminder for your 3 PM booking tomorrow.</p>
</div>
<div class="ml-4 flex-shrink-0 flex">
<button type="button" class="absolute top-2 right-2 p-1 rounded-full text-zinc-900 dark:text-zinc-100 hover:text-zinc-700 dark:hover:text-zinc-300 focus:outline-none focus:ring-2 focus:ring-zinc-900 dark:focus:ring-zinc-100 focus:ring-offset-2 focus:ring-offset-stone-200 dark:focus:ring-offset-stone-800">
<span class="sr-only">Close</span>
<svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<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" />
</svg>
</button>
</div>
</div>
</div>
<!-- Warning Toast - Potential Issue -->
<div class="relative p-4 sm:p-5 border-4 border-zinc-900 dark:border-zinc-100 bg-fuchsia-200 dark:bg-fuchsia-800 text-zinc-900 dark:text-zinc-100 shadow-[8px_8px_0px_0px_rgba(0,0,0,1)] dark:shadow-[8px_8px_0px_0px_rgba(255,255,255,1)] pointer-events-auto transition-all duration-300 transform hover:-translate-x-1 hover:-translate-y-1">
<div class="flex items-start">
<div class="flex-shrink-0 pt-1">
<svg class="h-6 w-6 text-zinc-900 dark:text-zinc-100" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
<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" />
</svg>
</div>
<div class="ml-3 w-0 flex-1 pt-0.5">
<p class="text-lg sm:text-xl font-extrabold uppercase tracking-wide">Action Required!</p>
<p class="mt-1 text-sm sm:text-base font-medium leading-tight">Slot for 4 PM on Feb 15th is now limited. Please confirm soon.</p>
</div>
<div class="ml-4 flex-shrink-0 flex">
<button type="button" class="absolute top-2 right-2 p-1 rounded-full text-zinc-900 dark:text-zinc-100 hover:text-zinc-700 dark:hover:text-zinc-300 focus:outline-none focus:ring-2 focus:ring-zinc-900 dark:focus:ring-zinc-100 focus:ring-offset-2 focus:ring-offset-fuchsia-200 dark:focus:ring-offset-fuchsia-800">
<span class="sr-only">Close</span>
<svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<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" />
</svg>
</button>
</div>
</div>
</div>
<!-- Error Toast - Booking Failed -->
<div class="relative p-4 sm:p-5 border-4 border-zinc-900 dark:border-zinc-100 bg-red-200 dark:bg-red-800 text-zinc-900 dark:text-zinc-100 shadow-[8px_8px_0px_0px_rgba(0,0,0,1)] dark:shadow-[8px_8px_0px_0px_rgba(255,255,255,1)] pointer-events-auto transition-all duration-300 transform hover:-translate-x-1 hover:-translate-y-1">
<div class="flex items-start">
<div class="flex-shrink-0 pt-1">
<svg class="h-6 w-6 text-zinc-900 dark:text-zinc-100" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
<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" />
</svg>
</div>
<div class="ml-3 w-0 flex-1 pt-0.5">
<p class="text-lg sm:text-xl font-extrabold uppercase tracking-wide">Booking Failed!</p>
<p class="mt-1 text-sm sm:text-base font-medium leading-tight">The selected slot is no longer available. Please try again.</p>
</div>
<div class="ml-4 flex-shrink-0 flex">
<button type="button" class="absolute top-2 right-2 p-1 rounded-full text-zinc-900 dark:text-zinc-100 hover:text-zinc-700 dark:hover:text-zinc-300 focus:outline-none focus:ring-2 focus:ring-zinc-900 dark:focus:ring-zinc-100 focus:ring-offset-2 focus:ring-offset-red-200 dark:focus:ring-offset-red-800">
<span class="sr-only">Close</span>
<svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<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" />
</svg>
</button>
</div>
</div>
</div>
</div>
</div>Componentes relacionados
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
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.
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.