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 complesso di notifica di tipo avviso popup in stile glassmorphism per i dashboard, con elementi traslucidi, effetti di sfocatura e una combinazione di colori analoga. Completamente reattivo con supporto per la modalità oscura.
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.
Notifiche di tipo avviso popup pastello skeuomorfo
Un componente di notifica di tipo avviso popup complesso, scheumorfico e a tema pastello per piattaforme di intrattenimento/multimediali, con più tipi di notifica con supporto della modalità scura e design reattivo.