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 di notifiche Toast minimalista e vibrante che utilizza Tailwind CSS. Il componente è progettato con un layout semplice per i portfolio, supporta la modalità oscura ed è reattivo senza JavaScript.
Componente Notifiche toast Art Déco
Un componente di notifica di tipo avviso popup semplice e ad alto contrasto con un'estetica Art Déco, adatto per siti Web di notizie e giornalismo. Presenta un design reattivo e il supporto per la modalità oscura.
Componente Notifiche di tipo avviso popup
Un componente di notifica di tipo avviso popup in modalità scura progettato per le applicazioni dashboard, con una combinazione di colori complementare con vari elementi interattivi.