Notifiche di tipo avviso popup retrò
Un componente reattivo per le notifiche di tipo avviso popup con design retrò/vintage, combinazione di colori triadica e supporto per la modalità oscura, costruito con Tailwind CSS per l'uso in portafoglio.
Codice HTML
<div class="fixed bottom-5 right-5 space-y-4">
<!-- Success Toast -->
<div class="bg-teal-200 dark:bg-teal-700 text-teal-800 dark:text-teal-200 p-4 rounded-lg shadow-md flex items-center space-x-3 transform transition-all duration-300 ease-out hover:scale-105">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><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>
<div class="font-bold">Success!</div>
<div class="text-sm">Item successfully added.</div>
</div>
</div>
<!-- Info Toast -->
<div class="bg-blue-200 dark:bg-blue-700 text-blue-800 dark:text-blue-200 p-4 rounded-lg shadow-md flex items-center space-x-3 transform transition-all duration-300 ease-out hover:scale-105">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
<div>
<div class="font-bold">Information</div>
<div class="text-sm">Your request is being processed.</div>
</div>
</div>
<!-- Warning Toast -->
<div class="bg-yellow-200 dark:bg-yellow-700 text-yellow-800 dark:text-yellow-200 p-4 rounded-lg shadow-md flex items-center space-x-3 transform transition-all duration-300 ease-out hover:scale-105">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path></svg>
<div>
<div class="font-bold">Warning!</div>
<div class="text-sm">Some issues were found.</div>
</div>
</div>
<!-- Error Toast -->
<div class="bg-red-200 dark:bg-red-700 text-red-800 dark:text-red-200 p-4 rounded-lg shadow-md flex items-center space-x-3 transform transition-all duration-300 ease-out hover:scale-105">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
<div>
<div class="font-bold">Error!</div>
<div class="text-sm">Action could not be completed.</div>
</div>
</div>
</div>Componenti correlati
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.
Notifiche di tipo avviso popup
Componente di notifiche toast dal design minimalista/piatto con combinazione di colori analoga, complessità semplice, per scopi di portfolio. Reattivo con supporto per il tema scuro.
Componente Notifiche di tipo avviso popup
Un componente Notifiche Toast reattivo con stile Glassmorphism e combinazione di colori vivaci, adatto per applicazioni di e-commerce. Supporta il tema scuro e ha un'interfaccia complessa con più elementi interattivi.