Notifiche di tipo avviso popup
Un componente di notifiche di tipo avviso popup reattivo e compatibile con il tema scuro per l'e-commerce con un design minimalista/piatto che utilizza una combinazione di colori complementari.
Codice HTML
<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>Componenti correlati
Componente Notifiche di tipo avviso popup
Un componente reattivo per le notifiche di tipo avviso popup progettato con Glassmorphism, con una combinazione di colori monocromatica, supporto per la modalità oscura e pronto per l'uso in un portfolio.
Componente Notifiche di tipo avviso popup
Un componente di notifiche di tipo avviso popup in stile brutalista che utilizza Tailwind CSS, progettato per un portfolio che mette in mostra lavori o prodotti. Il design incorpora una combinazione di colori analoga e supporta la modalità oscura con un'interfaccia complessa.
Componente Notifiche di tipo avviso popup retrò
Un componente di notifica di tipo avviso popup a tema retrò con design reattivo e supporto per la modalità oscura.