Componente Notifiche di tipo avviso popup
Un componente di notifica di tipo avviso popup in modalità scura progettato per le applicazioni dashboard, con una combinazione di colori complementare con vari elementi interattivi.
Codice HTML
<div class="fixed bottom-5 right-5 space-y-4">
<div class="bg-gray-800 dark:bg-gray-900 text-white p-4 rounded-lg shadow-lg flex items-start space-x-3">
<img class="h-12 w-12 rounded-full" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
<div class="flex-1">
<p class="font-semibold">John Doe</p>
<p class="text-sm">Successfully completed the action.</p>
</div>
<button class="text-blue-500 hover:text-blue-400 focus:outline-none">
Dismiss
</button>
</div>
<div class="bg-gray-800 dark:bg-gray-900 text-white p-4 rounded-lg shadow-lg flex items-start space-x-3">
<img class="h-12 w-12 rounded-full" src="https://randomuser.me/api/portraits/women/32.jpg" alt="User Avatar">
<div class="flex-1">
<p class="font-semibold">Jane Smith</p>
<p class="text-sm">You have new messages.</p>
</div>
<button class="text-blue-500 hover:text-blue-400 focus:outline-none">
View
</button>
</div>
<div class="bg-gray-800 dark:bg-gray-900 text-white p-4 rounded-lg shadow-lg flex items-start space-x-3">
<img class="h-12 w-12 rounded-full" src="https://randomuser.me/api/portraits/men/45.jpg" alt="User Avatar">
<div class="flex-1">
<p class="font-semibold">Mike Johnson</p>
<p class="text-sm">Error occurred during processing!</p>
</div>
<button class="text-blue-500 hover:text-blue-400 focus:outline-none">
Retry
</button>
</div>
</div>
Componenti correlati
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 per il neumorfismo
Componente Notifiche di tipo avviso popup per il neumorfismo con effetti reattivi e supporto per temi scuri.
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.