Glassmorphism Toast Notifications Component
Un composant de notification de toast réactif avec un design glassmorphism, une palette de couleurs pastel et une prise en charge du mode sombre, adapté aux systèmes de réservation et de réservation.
HTML Code
<div class="relative min-h-screen bg-gradient-to-br from-blue-50 to-purple-100 p-4 dark:from-gray-900 dark:to-black sm:p-6 lg:p-8">
<div class="absolute inset-0 bg-no-repeat bg-cover opacity-10 dark:opacity-5" style="background-image: url('https://picsum.photos/1920/1080?blur=5&grayscale'); background-attachment: fixed;"></div>
<div class="relative z-10 flex flex-col items-center justify-center p-4">
<!-- Toast Notifications Container (example, these would typically be inserted dynamically) -->
<div class="space-y-4 w-full max-w-sm">
<!-- Success Toast -->
<div class="relative p-4 rounded-xl shadow-lg backdrop-blur-md bg-white/30 dark:bg-gray-800/30 ring-1 ring-white/20 dark:ring-gray-700/30 transform transition-all duration-300 hover:scale-[1.01] flex items-start space-x-3">
<div class="flex-shrink-0">
<svg class="h-6 w-6 text-green-600 dark:text-green-400" 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 18 01-9 9 9 9 01-9-9 9 9 01-9-9 9 9 019-9 9 9 019 9z" />
</svg>
</div>
<div class="flex-1">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-100">Success! Your reservation is confirmed.</h3>
<p class="mt-1 text-sm text-gray-600 dark:text-gray-300">See you on <strong>2024-08-15 at 10:00 AM</strong> for your 'Dental Check-up'.</p>
<div class="mt-3 flex space-x-2">
<button class="px-3 py-1 text-sm font-medium rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 bg-blue-100 text-blue-800 hover:bg-blue-200 dark:bg-blue-900 dark:text-blue-100 dark:hover:bg-blue-800 focus:ring-blue-500">
View Details
</button>
<button class="px-3 py-1 text-sm font-medium rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 text-gray-700 hover:text-gray-900 dark:text-gray-300 dark:hover:text-gray-100 focus:ring-gray-500">
Dismiss
</button>
</div>
</div>
<button type="button" class="absolute top-2 right-2 text-gray-400 hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-white dark:focus:ring-gray-800 rounded-md p-1">
<span class="sr-only">Dismiss</span>
<svg class="h-5 w-5" 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>
<!-- Info Toast -->
<div class="relative p-4 rounded-xl shadow-lg backdrop-blur-md bg-white/30 dark:bg-gray-800/30 ring-1 ring-white/20 dark:ring-gray-700/30 transform transition-all duration-300 hover:scale-[1.01] flex items-start space-x-3">
<div class="flex-shrink-0">
<svg class="h-6 w-6 text-blue-600 dark:text-blue-400" 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 01-9 9 9 9 01-9-9 9 9 019-9 9 9 019 9z" />
</svg>
</div>
<div class="flex-1">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-100">Reminder: Booking details updated.</h3>
<p class="mt-1 text-sm text-gray-600 dark:text-gray-300">Your reservation for 'Yoga Class' at <strong>11:00 AM (changed from 10:30 AM)</strong> on August 10th has been adjusted.</p>
<div class="mt-3 flex space-x-2">
<button class="px-3 py-1 text-sm font-medium rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 bg-green-100 text-green-800 hover:bg-green-200 dark:bg-green-900 dark:text-green-100 dark:hover:bg-green-800 focus:ring-green-500">
Acknowledge
</button>
<button class="px-3 py-1 text-sm font-medium rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 text-gray-700 hover:text-gray-900 dark:text-gray-300 dark:hover:text-gray-100 focus:ring-gray-500">
Call Support
</button>
</div>
</div>
<button type="button" class="absolute top-2 right-2 text-gray-400 hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-white dark:focus:ring-gray-800 rounded-md p-1">
<span class="sr-only">Dismiss</span>
<svg class="h-5 w-5" 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>
<!-- Warning Toast -->
<div class="relative p-4 rounded-xl shadow-lg backdrop-blur-md bg-white/30 dark:bg-gray-800/30 ring-1 ring-white/20 dark:ring-gray-700/30 transform transition-all duration-300 hover:scale-[1.01] flex items-start space-x-3">
<div class="flex-shrink-0">
<svg class="h-6 w-6 text-yellow-600 dark:text-yellow-400" 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="flex-1">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-100">Heads Up! Slot for 'Haircut' is limited.</h3>
<p class="mt-1 text-sm text-gray-600 dark:text-gray-300">Only <strong>2 slots remaining</strong> on <strong>2024-08-20</strong>. Book now to secure your spot!</p>
<div class="mt-3 flex space-x-2">
<button class="px-3 py-1 text-sm font-medium rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 bg-red-100 text-red-800 hover:bg-red-200 dark:bg-red-900 dark:text-red-100 dark:hover:bg-red-800 focus:ring-red-500">
Book Now
</button>
<button class="px-3 py-1 text-sm font-medium rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 text-gray-700 hover:text-gray-900 dark:text-gray-300 dark:hover:text-gray-100 focus:ring-gray-500">
Check Calendar
</button>
</div>
</div>
<button type="button" class="absolute top-2 right-2 text-gray-400 hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-white dark:focus:ring-gray-800 rounded-md p-1">
<span class="sr-only">Dismiss</span>
<svg class="h-5 w-5" 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>
<!-- Error Toast -->
<div class="relative p-4 rounded-xl shadow-lg backdrop-blur-md bg-white/30 dark:bg-gray-800/30 ring-1 ring-white/20 dark:ring-gray-700/30 transform transition-all duration-300 hover:scale-[1.01] flex items-start space-x-3">
<div class="flex-shrink-0">
<svg class="h-6 w-6 text-red-600 dark:text-red-400" 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 01-9 9 9 9 01-9-9 9 9 019-9 9 9 019 9z" />
</svg>
</div>
<div class="flex-1">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-100">Error: Reservation failed.</h3>
<p class="mt-1 text-sm text-gray-600 dark:text-gray-300">The requested time slot for <strong>'Consultation'</strong> on <strong>2024-08-18</strong> is no longer available.</p>
<div class="mt-3 flex space-x-2">
<button class="px-3 py-1 text-sm font-medium rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 bg-blue-100 text-blue-800 hover:bg-blue-200 dark:bg-blue-900 dark:text-blue-100 dark:hover:bg-blue-800 focus:ring-blue-500">
Find Another Time
</button>
<button class="px-3 py-1 text-sm font-medium rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 text-gray-700 hover:text-gray-900 dark:text-gray-300 dark:hover:text-gray-100 focus:ring-gray-500">
Contact Support
</button>
</div>
</div>
<button type="button" class="absolute top-2 right-2 text-gray-400 hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-white dark:focus:ring-gray-800 rounded-md p-1">
<span class="sr-only">Dismiss</span>
<svg class="h-5 w-5" 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>Composants associés
Notifications Toast rétro
Un composant de notifications Toast réactif avec un design rétro/vintage, une palette de couleurs triadique et une prise en charge du mode sombre, construit avec Tailwind CSS pour une utilisation en portefeuille.
Composant Toast Notifications
Un composant Toast Notifications conçu avec le style Glassmorphism, avec des effets réactifs et la prise en charge des thèmes sombres. Il utilise Tailwind CSS pour le style, ainsi que des images de remplacement de picsum.photos pour les visuels et randomuser.me pour les avatars.
Composant Toast Notifications
Un composant Toast Notifications de style Glassmorphism avec des couleurs pastel, conçu pour les blogs et la consommation de contenu. Il prend en charge le mode sombre et dispose d’une interface riche avec des éléments interactifs.