Toast Notifications
Un composant de notifications Toast réactif et compatible avec les thèmes sombres pour le commerce électronique avec un design minimaliste/plat utilisant une palette de couleurs complémentaire.
HTML Code
<div class="fixed bottom-4 right-4 space-y-2">
<!-- Success Toast (Example) -->
<div class="bg-green-500 text-white px-4 py-3 rounded-lg shadow-md dark:bg-green-700">
<div class="flex items-center justify-between">
<div class="flex items-center">
<svg class="h-6 w-6 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<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>
<p class="font-bold">Success!</p>
<p class="text-sm">Item added to cart successfully.</p>
</div>
</div>
</div>
</div>
<!-- Error Toast (Example) -->
<div class="bg-red-500 text-white px-4 py-3 rounded-lg shadow-md dark:bg-red-700">
<div class="flex items-center justify-between">
<div class="flex items-center">
<svg class="h-6 w-6 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l7-7m0 0l7 7m0-7l-7 7m7-7L7 7"></path>
</svg>
<div>
<p class="font-bold">Error!</p>
<p class="text-sm">Failed to add item to cart.</p>
</div>
</div>
</div>
</div>
<!-- Info Toast (Example) -->
<div class="bg-blue-500 text-white px-4 py-3 rounded-lg shadow-md dark:bg-blue-700">
<div class="flex items-center justify-between">
<div class="flex items-center">
<svg class="h-6 w-6 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4H12a9 9 0 007.562-3.438 9 9 0 000-10.124A9 9 0 0012 3a9 9 0 00-7.562 3.438A9 9 0 004.062 12a9 9 0 003.438 7.562z"></path>
</svg>
<div>
<p class="font-bold">Info!</p>
<p class="text-sm">Your item is being processed.</p>
</div>
</div>
</div>
</div>
</div>Composants associés
Composant Toast Notifications
Un composant de notification Toast réactif avec un design skeuomorphique et une prise en charge du mode sombre, construit avec Tailwind CSS.
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.
Toast Notifications
Composant de notifications toast réactives avec style Glassmorphism pour les sites Web d’entreprise/d’entreprise, prenant en charge le thème sombre. Palette de couleurs pastel.