Notifiche di tipo avviso popup
Componente di notifiche popup reattive con stile Glassmorphism per siti Web aziendali/aziendali, che supporta il tema scuro. Combinazione di colori pastello.
Codice HTML
<div class="fixed bottom-5 right-5 space-y-4 z-50">
<!-- Success Toast -->
<div class="bg-white bg-opacity-30 backdrop-filter backdrop-blur-lg rounded-lg shadow-lg p-4 pr-10 max-w-sm mx-auto dark:bg-gray-800 dark:bg-opacity-30">
<div class="flex items-center space-x-3">
<div class="flex-shrink-0">
<svg class="h-6 w-6 text-green-500" 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="flex-1">
<p class="text-sm font-medium text-gray-900 dark:text-white">Success Message</p>
<p class="mt-1 text-sm text-gray-500 dark:text-gray-300">Your action was successful.</p>
</div>
</div>
</div>
<!-- Info Toast -->
<div class="bg-white bg-opacity-30 backdrop-filter backdrop-blur-lg rounded-lg shadow-lg p-4 pr-10 max-w-sm mx-auto dark:bg-gray-800 dark:bg-opacity-30">
<div class="flex items-center space-x-3">
<div class="flex-shrink-0">
<svg class="h-6 w-6 text-blue-500" 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="flex-1">
<p class="text-sm font-medium text-gray-900 dark:text-white">Information</p>
<p class="mt-1 text-sm text-gray-500 dark:text-gray-300">This is an informational message.</p>
</div>
</div>
</div>
<!-- Warning Toast -->
<div class="bg-white bg-opacity-30 backdrop-filter backdrop-blur-lg rounded-lg shadow-lg p-4 pr-10 max-w-sm mx-auto dark:bg-gray-800 dark:bg-opacity-30">
<div class="flex items-center space-x-3">
<div class="flex-shrink-0">
<svg class="h-6 w-6 text-yellow-500" 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 4H21a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path></svg>
</div>
<div class="flex-1">
<p class="text-sm font-medium text-gray-900 dark:text-white">Warning</p>
<p class="mt-1 text-sm text-gray-500 dark:text-gray-300">Something might be wrong.</p>
</div>
</div>
</div>
<!-- Error Toast -->
<div class="bg-white bg-opacity-30 backdrop-filter backdrop-blur-lg rounded-lg shadow-lg p-4 pr-10 max-w-sm mx-auto dark:bg-gray-800 dark:bg-opacity-30">
<div class="flex items-center space-x-3">
<div class="flex-shrink-0">
<svg class="h-6 w-6 text-red-500" 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="flex-1">
<p class="text-sm font-medium text-gray-900 dark:text-white">Error</p>
<p class="mt-1 text-sm text-gray-500 dark:text-gray-300">An error occurred.</p>
</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.
Componente Notifiche di tipo avviso popup per il neumorfismo
Componente Notifiche di tipo avviso popup per il neumorfismo con effetti reattivi e supporto per temi scuri.
Componente Notifiche di tipo avviso popup
Un componente Notifiche avviso popup in stile Glassmorphism con colori pastello, progettato per blog e consumo di contenuti. Supporta la modalità oscura e presenta una ricca interfaccia con elementi interattivi.