Composant Toast Notifications
Composant de notification Toast avec style Glassmorphism, palette de couleurs Earth tones et conception réactive avec prise en charge du mode sombre.
HTML Code
<div class="fixed bottom-4 right-4 z-50">
<!-- Toast 1 -->
<div class="bg-white/30 dark:bg-gray-800/30 backdrop-blur-md rounded-lg shadow-lg mb-4 p-4 flex items-center text-gray-800 dark:text-gray-200">
<div class="flex-shrink-0">
<img class="h-10 w-10 rounded-full" src="https://www.picsum.photos/seed/avatar1/40/40" alt="Avatar">
</div>
<div class="ml-3">
<p class="text-sm font-medium">John Doe</p>
<p class="text-xs">New message received.</p>
</div>
<button class="ml-auto text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
</svg>
</button>
</div>
<!-- Toast 2 -->
<div class="bg-white/30 dark:bg-gray-800/30 backdrop-blur-md rounded-lg shadow-lg mb-4 p-4 flex items-center text-gray-800 dark:text-gray-200">
<div class="flex-shrink-0">
<img class="h-10 w-10 rounded-full" src="https://www.picsum.photos/seed/avatar2/40/40" alt="Avatar">
</div>
<div class="ml-3">
<p class="text-sm font-medium">Jane Smith</p>
<p class="text-xs">Your report is ready.</p>
</div>
<button class="ml-auto text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
</svg>
</button>
</div>
<!-- Toast 3 -->
<div class="bg-white/30 dark:bg-gray-800/30 backdrop-blur-md rounded-lg shadow-lg p-4 flex items-center text-gray-800 dark:text-gray-200">
<div class="flex-shrink-0">
<img class="h-10 w-10 rounded-full" src="https://www.picsum.photos/seed/avatar3/40/40" alt="Avatar">
</div>
<div class="ml-3">
<p class="text-sm font-medium">System Update</p>
<p class="text-xs">Security patch applied.</p>
</div>
<button class="ml-auto text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
</svg>
</button>
</div>
</div>
Composants associés
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.
Retro_Vintage_Toast_Notifications_Component
Un composant de notification de toast simple, sur le thème rétro/vintage, pour les outils CRM/professionnels, avec des neutres chauds, un design réactif et la prise en charge du mode sombre.
Toast Notifications
Composant de notifications Toast de conception minimaliste / plate avec schéma de couleurs analogue, complexité simple, à des fins de portefeuille. Réactif avec prise en charge du thème sombre.