Composant Brutalism Toast Notifications
Un ensemble de notifications de toast d’inspiration brutaliste avec une palette de couleurs neutres chaudes, adaptées aux systèmes de réservation. Présente des contrastes bruts et audacieux et un design réactif avec prise en charge du mode sombre.
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>Composants associés
Composant Toast Notifications
Un composant Toast Notifications réactif conçu avec Glassmorphism, doté d’un schéma de couleurs monochromatique, d’une prise en charge du mode sombre et prêt à être utilisé dans un portefeuille.
Composant Retro Toast Notifications
Un composant de notification toast à thème rétro avec un design réactif et une prise en charge du mode sombre.
Composant Toast Notifications
Un composant de notifications toast de style brutaliste utilisant Tailwind CSS, conçu pour un portefeuille qui présente des travaux ou des produits. La conception intègre une palette de couleurs analogue et prend en charge le mode sombre avec une interface complexe.