Composant Toast Notifications
Un composant de notification de toast propre et minimaliste avec un style de typographie suisse/international, une palette de couleurs violette/violette, conçu pour les systèmes de réservation. Entièrement réactif avec prise en charge du mode sombre.
HTML Code
<div class="fixed inset-x-0 bottom-4 z-50 flex flex-col items-center justify-center space-y-3 px-4 sm:items-end sm:px-6">
<!-- Success Notification -->
<div class="shadow-lg dark:shadow-purple-900/50 w-full max-w-sm rounded-lg bg-white p-4 transition-all duration-300 ease-out dark:bg-gray-800 sm:max-w-md md:p-5">
<div class="flex items-start">
<div class="flex-shrink-0">
<svg class="h-6 w-6 text-purple-600 dark:text-purple-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true">
<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-gray-900 dark:text-gray-100 md:text-base">Booking Confirmed!</p>
<p class="mt-1 text-xs text-gray-500 dark:text-gray-400 md:text-sm">Your appointment for 'Dental Check-up' on Nov 15th at 10:00 AM has been successfully reserved.</p>
<div class="mt-3 flex space-x-2">
<button type="button" class="inline-flex items-center rounded-md border border-transparent bg-purple-100 px-2.5 py-1.5 text-xs font-medium text-purple-800 hover:bg-purple-200 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 dark:bg-purple-700 dark:text-purple-100 dark:hover:bg-purple-600 dark:focus:ring-offset-gray-800">
View Details
</button>
<button type="button" class="inline-flex items-center rounded-md border border-gray-300 bg-white px-2.5 py-1.5 text-xs font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 dark:hover:bg-gray-600 dark:focus:ring-offset-gray-800">
Dismiss
</button>
</div>
</div>
<div class="ml-4 flex flex-shrink-0">
<button type="button" class="inline-flex rounded-md bg-white text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 dark:bg-gray-800 dark:text-gray-500 dark:hover:text-gray-400 dark:focus:ring-offset-gray-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 d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z" />
</svg>
</button>
</div>
</div>
</div>
<!-- Error/Warning Notification -->
<div class="shadow-lg dark:shadow-purple-900/50 w-full max-w-sm rounded-lg bg-white p-4 transition-all duration-300 ease-out dark:bg-gray-800 sm:max-w-md md:p-5">
<div class="flex items-start">
<div class="flex-shrink-0">
<svg class="h-6 w-6 text-red-600 dark:text-red-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.174 3.35 1.9 3.35h13.713c1.726 0 2.76-1.85 1.9-3.35L13.743 3.373c-.866-1.5-3.032-1.5-3.898 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-gray-900 dark:text-gray-100 md:text-base">Booking Failed</p>
<p class="mt-1 text-xs text-gray-500 dark:text-gray-400 md:text-sm">The selected time slot for 'Haircut' on Dec 1st at 3:00 PM is no longer available. Please choose another time.</p>
<div class="mt-3 flex space-x-2">
<button type="button" class="inline-flex items-center rounded-md border border-transparent bg-purple-100 px-2.5 py-1.5 text-xs font-medium text-purple-800 hover:bg-purple-200 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 dark:bg-purple-700 dark:text-purple-100 dark:hover:bg-purple-600 dark:focus:ring-offset-gray-800">
Browse Slots
</button>
<button type="button" class="inline-flex items-center rounded-md border border-gray-300 bg-white px-2.5 py-1.5 text-xs font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 dark:hover:bg-gray-600 dark:focus:ring-offset-gray-800">
Dismiss
</button>
</div>
</div>
<div class="ml-4 flex flex-shrink-0">
<button type="button" class="inline-flex rounded-md bg-white text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 dark:bg-gray-800 dark:text-gray-500 dark:hover:text-gray-400 dark:focus:ring-offset-gray-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 d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z" />
</svg>
</button>
</div>
</div>
</div>
</div>Composants associés
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.
Composant Toast Notifications
Un composant de notification toast réactif avec des transitions de dégradé de tons, conçu pour les sites Web gouvernementaux/de services publics, prenant en charge les modes clair et sombre.
Composant Toast Notifications
Un composant de notification toast neumorphique avec des couleurs pastel, un design réactif et une prise en charge du thème sombre, adapté aux blogs et aux sites de contenu.