Notifiche di tipo avviso popup
Componente Notifiche di tipo avviso popup con stile Glassmorphism, effetti reattivi e supporto per temi scuri utilizzando Tailwind CSS
Codice HTML
<div class="fixed bottom-0 right-0 mb-4 mr-4">
<div class="bg-white dark:bg-gray-800 bg-opacity-20 dark:bg-opacity-20 backdrop-filter backdrop-blur-lg rounded-lg shadow-lg overflow-hidden mx-auto" style="max-width: 300px;">
<div class="flex items-center justify-between px-4 py-2">
<div class="flex items-center">
<img class="h-8 w-8 rounded-full object-cover" src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar">
<p class="text-gray-700 dark:text-gray-200 text-sm font-semibold ml-2">User Name</p>
</div>
<button class="text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 focus:outline-none">
<svg class="h-4 w-4" 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="M6 18L18 6M6 6l12 12"></path>
</svg>
</button>
</div>
<div class="px-4 py-2">
<p class="text-gray-600 dark:text-gray-300 text-sm">This is a toast notification.</p>
</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 notifica di tipo avviso popup neumorfico con colori pastello, design reattivo e supporto per temi scuri, adatto per blog e siti di contenuti.
Componente Notifiche di tipo avviso popup
Un componente di notifica di tipo avviso popup semplice, artistico e colorato per l'e-commerce, con texture morbide simili ad acquerelli e una sfumatura arcobaleno. Completamente reattivo con supporto per la modalità oscura.