Brutalism Toast Notifications Component
A set of brutalist-inspired toast notifications with a warm neutral color scheme, suitable for booking/reservation systems. Features raw, bold contrasts and responsive design with dark mode support.
HTML Code
<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>Related Components
Retro Toast Notifications Component
A retro-themed toast notification component with responsive design and dark mode support.
Toast Notifications
Toast Notifications Component with Glassmorphism style, responsive effects, and dark theme support using Tailwind CSS
Neumorphism Toast Notifications Component
Neumorphism Toast Notifications Component with responsive effects and dark theme support.