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 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.
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.
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.