Componente Notifiche di tipo avviso popup
Componente di notifica di tipo avviso popup con stile Glassmorphism, combinazione di colori dei toni della terra e design reattivo con supporto della modalità oscura.
Codice HTML
<div class="fixed bottom-4 right-4 z-50">
<!-- Toast 1 -->
<div class="bg-white/30 dark:bg-gray-800/30 backdrop-blur-md rounded-lg shadow-lg mb-4 p-4 flex items-center text-gray-800 dark:text-gray-200">
<div class="flex-shrink-0">
<img class="h-10 w-10 rounded-full" src="https://www.picsum.photos/seed/avatar1/40/40" alt="Avatar">
</div>
<div class="ml-3">
<p class="text-sm font-medium">John Doe</p>
<p class="text-xs">New message received.</p>
</div>
<button class="ml-auto text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200">
<svg class="w-4 h-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>
<!-- Toast 2 -->
<div class="bg-white/30 dark:bg-gray-800/30 backdrop-blur-md rounded-lg shadow-lg mb-4 p-4 flex items-center text-gray-800 dark:text-gray-200">
<div class="flex-shrink-0">
<img class="h-10 w-10 rounded-full" src="https://www.picsum.photos/seed/avatar2/40/40" alt="Avatar">
</div>
<div class="ml-3">
<p class="text-sm font-medium">Jane Smith</p>
<p class="text-xs">Your report is ready.</p>
</div>
<button class="ml-auto text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200">
<svg class="w-4 h-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>
<!-- Toast 3 -->
<div class="bg-white/30 dark:bg-gray-800/30 backdrop-blur-md rounded-lg shadow-lg p-4 flex items-center text-gray-800 dark:text-gray-200">
<div class="flex-shrink-0">
<img class="h-10 w-10 rounded-full" src="https://www.picsum.photos/seed/avatar3/40/40" alt="Avatar">
</div>
<div class="ml-3">
<p class="text-sm font-medium">System Update</p>
<p class="text-xs">Security patch applied.</p>
</div>
<button class="ml-auto text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200">
<svg class="w-4 h-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>
Componenti correlati
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.
Componente Notifiche toast Art Déco
Un componente di notifica di tipo avviso popup semplice e ad alto contrasto con un'estetica Art Déco, adatto per siti Web di notizie e giornalismo. Presenta un design reattivo e il supporto per la modalità oscura.
Componente Notifiche di tipo avviso popup Glassmorphism
Un componente di notifica di tipo avviso popup reattivo con un design glassmorphism, una combinazione di colori pastello e il supporto della modalità scura, adatto per i sistemi di prenotazione e prenotazione.