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 Notifiche di tipo avviso popup in stile neumorfismo che utilizza Tailwind CSS con supporto per il tema scuro.
Componente Notifiche di tipo avviso popup
Un componente di notifiche di tipo avviso popup in stile brutalista che utilizza Tailwind CSS, progettato per un portfolio che mette in mostra lavori o prodotti. Il design incorpora una combinazione di colori analoga e supporta la modalità oscura con un'interfaccia complessa.
Componente Notifiche di tipo avviso popup
Un componente di notifica di tipo avviso popup neumorfico con colori pastello, design reattivo e supporto per temi scuri, adatto per blog e siti di contenuti.