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.
Codice HTML
<div class="fixed bottom-4 right-4 space-y-2">
<!-- Success Toast -->
<div class="bg-green-500 dark:bg-green-700 text-white px-4 py-3 rounded-md shadow-md flex items-center">
<div class="mr-2">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
</svg>
</div>
<div>
<p class="font-bold">Success!</p>
<p>Your action was completed successfully.</p>
</div>
</div>
<!-- Error Toast -->
<div class="bg-red-500 dark:bg-red-700 text-white px-4 py-3 rounded-md shadow-md flex items-center">
<div class="mr-2">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586l-1.293-1.293z" clip-rule="evenodd" />
</svg>
</div>
<div>
<p class="font-bold">Error!</p>
<p>Something went wrong. Please try again.</p>
</div>
</div>
<!-- Info Toast -->
<div class="bg-blue-500 dark:bg-blue-700 text-white px-4 py-3 rounded-md shadow-md flex items-center">
<div class="mr-2">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd" />
</svg>
</div>
<div>
<p class="font-bold">Information</p>
<p>This is an informational message.</p>
</div>
</div>
</div>Componenti correlati
Componente Notifiche di tipo avviso popup
Componente di notifica di tipo avviso popup con stile Glassmorphism, combinazione di colori dei toni della terra e design reattivo con supporto della modalità oscura.
Componente Notifiche di tipo avviso popup
Un componente di notifica di tipo avviso popup reattivo con transizioni sfumate di tono gioiello, progettato per siti Web governativi/di servizio pubblico, che supporta le modalità chiara e scura.
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.