Componenti Notifiche di tipo avviso popup Componente Notifiche di tipo avviso popup

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.

Anteprima

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

Notifiche di tipo avviso popup

Componente Notifiche di tipo avviso popup con stile Glassmorphism, effetti reattivi e supporto per temi scuri utilizzando Tailwind CSS

Aperto

Componente Notifiche di tipo avviso popup retrò

Un componente di notifica di tipo avviso popup a tema retrò con design reattivo e supporto per la modalità oscura.

Aperto

Notifiche di tipo avviso popup

Un componente di notifiche di tipo avviso popup reattivo e compatibile con il tema scuro per l'e-commerce con un design minimalista/piatto che utilizza una combinazione di colori complementari.

Aperto