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.
HTML Code
<div class="fixed inset-x-0 bottom-4 z-50 flex items-center justify-center p-4 sm:p-6 lg:p-8">
<div class="flex w-full max-w-sm flex-col space-y-3">
<!-- Success Notification -->
<div class="relative flex items-center justify-between rounded-xl bg-gradient-to-br from-indigo-200 via-purple-200 to-pink-200 p-4 shadow-lg dark:from-indigo-800 dark:via-purple-800 dark:to-pink-800 overflow-hidden transform transition-all duration-300 ease-out hover:scale-[1.02]">
<!-- Watercolor Effect Background -->
<div class="absolute inset-0 opacity-40 dark:opacity-20" style="background-image: url('https://picsum.photos/id/1053/600/400?blur=5'); background-size: cover; background-position: center;"></div>
<div class="relative z-10 flex items-center space-x-3">
<div class="flex-shrink-0 text-green-700 dark:text-green-300">
<svg class="h-6 w-6 sm:h-7 sm:w-7" 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="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
</div>
<div class="font-medium text-gray-800 dark:text-gray-100 text-sm sm:text-base font-serif tracking-wide">
Item Added to Cart!
</div>
</div>
<button type="button" class="relative z-10 flex-shrink-0 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 transition-colors duration-200">
<span class="sr-only">Close notification</span>
<svg class="h-5 w-5 sm:h-6 sm:w-6" 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>
<!-- Info Notification -->
<div class="relative flex items-center justify-between rounded-xl bg-gradient-to-br from-teal-200 via-cyan-200 to-blue-200 p-4 shadow-lg dark:from-teal-800 dark:via-cyan-800 dark:to-blue-800 overflow-hidden transform transition-all duration-300 ease-out hover:scale-[1.02]">
<!-- Watercolor Effect Background -->
<div class="absolute inset-0 opacity-40 dark:opacity-20" style="background-image: url('https://picsum.photos/id/1060/600/400?blur=5'); background-size: cover; background-position: center;"></div>
<div class="relative z-10 flex items-center space-x-3">
<div class="flex-shrink-0 text-blue-700 dark:text-blue-300">
<svg class="h-6 w-6 sm:h-7 sm:w-7" 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="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
</div>
<div class="font-medium text-gray-800 dark:text-gray-100 text-sm sm:text-base font-serif tracking-wide">
Free shipping on orders over $50!
</div>
</div>
<button type="button" class="relative z-10 flex-shrink-0 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 transition-colors duration-200">
<span class="sr-only">Close notification</span>
<svg class="h-5 w-5 sm:h-6 sm:w-6" 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>
<!-- Warning Notification (Placeholder, not primary for e-commerce success/info) -->
<div class="relative flex items-center justify-between rounded-xl bg-gradient-to-br from-yellow-200 via-orange-200 to-red-200 p-4 shadow-lg dark:from-yellow-800 dark:via-orange-800 dark:to-red-800 overflow-hidden transform transition-all duration-300 ease-out hover:scale-[1.02]">
<!-- Watercolor Effect Background -->
<div class="absolute inset-0 opacity-40 dark:opacity-20" style="background-image: url('https://picsum.photos/id/1069/600/400?blur=5'); background-size: cover; background-position: center;"></div>
<div class="relative z-10 flex items-center space-x-3">
<div class="flex-shrink-0 text-orange-700 dark:text-orange-300">
<svg class="h-6 w-6 sm:h-7 sm:w-7" 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="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"></path>
</svg>
</div>
<div class="font-medium text-gray-800 dark:text-gray-100 text-sm sm:text-base font-serif tracking-wide">
Quantities are limited!
</div>
</div>
<button type="button" class="relative z-10 flex-shrink-0 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 transition-colors duration-200">
<span class="sr-only">Close notification</span>
<svg class="h-5 w-5 sm:h-6 sm:w-6" 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>
</div>Composants associés
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 ensemble de notifications toast conçues avec un style de typographie suisse/international épuré et minimaliste, avec une palette de couleurs analogue. Optimisé pour les sites Web liés à la photographie, fournissant des commentaires clairs et concis aux utilisateurs. Comprend la conception réactive et la prise en charge du mode sombre.
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.