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
Composant Notifications Toast Art Déco
Un composant de notification toast simple et contrasté avec une esthétique Art déco, adapté aux sites d’information et de journalisme. Dispose d’un design réactif et d’une prise en charge du mode sombre.
Composant Toast Notifications
Un composant de notification toast en mode sombre conçu pour les applications de tableau de bord, avec une palette de couleurs complémentaire avec divers éléments interactifs.
Composant Toast Notifications
Un composant de notification de toast simple, artistique et coloré pour le commerce électronique, avec des textures douces semblables à de l’aquarelle et un dégradé arc-en-ciel. Entièrement réactif avec prise en charge du mode sombre.