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 Toast Notifications de style Neumorphism utilisant Tailwind CSS avec prise en charge du thème sombre.
Composant Toast Notifications
Un composant de notifications Toast minimaliste et dynamique utilisant Tailwind CSS. Le composant est conçu avec une mise en page simple pour les portfolios, prend en charge le mode sombre et est réactif sans JavaScript.
Composant Retro Toast Notifications
Un composant de notification toast à thème rétro avec un design réactif et une prise en charge du mode sombre.