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 reattivo per le notifiche di tipo avviso popup progettato con Glassmorphism, con una combinazione di colori monocromatica, supporto per la modalità oscura e pronto per l'uso in un portfolio.
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.
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.