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

Componente Notifiche di tipo avviso popup

Un componente Notifiche di tipo avviso popup progettato con lo stile Glassmorphism, con effetti reattivi e supporto per temi scuri. Utilizza Tailwind CSS per lo stile, insieme a immagini segnaposto da picsum.photos per le immagini e randomuser.me per gli avatar.

Anteprima

Codice HTML

<div class="fixed bottom-5 right-5 space-y-3">
    <div class="bg-white bg-opacity-20 backdrop-blur-lg rounded-lg border border-white border-opacity-30 shadow-lg p-4 w-80 transition transform duration-300 scale-100 hover:scale-105">
        <div class="flex items-center">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
            <div class="flex-grow">
                <p class="text-white font-semibold">Notification Title</p>
                <p class="text-white text-sm">This is a toast notification message to inform you about something important.</p>
            </div>
        </div>
        <div class="flex justify-end mt-2">
            <button class="bg-blue-600 text-white px-4 py-1 rounded-full hover:bg-blue-700 focus:outline-none">Action</button>
        </div>
    </div>

    <div class="bg-white bg-opacity-20 backdrop-blur-lg rounded-lg border border-white border-opacity-30 shadow-lg p-4 w-80 transition transform duration-300 scale-100 hover:scale-105">
        <div class="flex items-center">
            <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
            <div class="flex-grow">
                <p class="text-white font-semibold">Another Notification</p>
                <p class="text-white text-sm">This is another toast notification message for your consideration.</p>
            </div>
        </div>
        <div class="flex justify-end mt-2">
            <button class="bg-blue-600 text-white px-4 py-1 rounded-full hover:bg-blue-700 focus:outline-none">Dismiss</button>
        </div>
    </div>
</div>

<style>
@media (prefers-color-scheme: dark) {
    .bg-white {
        background-color: rgba(255, 255, 255, 0.1);
    }
    .text-white {
        color: white;
    }
    .border-white {
        border-color: rgba(255, 255, 255, 0.3);
    }
}
</style>

Componenti correlati

Notifiche di tipo avviso popup

Componente di notifiche popup reattive con stile Glassmorphism per siti Web aziendali/aziendali, che supporta il tema scuro. Combinazione di colori pastello.

Aperto

Componente Notifiche toast Brutalism

Un set di notifiche toast di ispirazione brutalista con una combinazione di colori neutri caldi, adatta per i sistemi di prenotazione. Presenta contrasti grezzi e audaci e un design reattivo con supporto per la modalità scura.

Aperto

Notifiche di tipo avviso popup pastello skeuomorfo

Un componente di notifica di tipo avviso popup complesso, scheumorfico e a tema pastello per piattaforme di intrattenimento/multimediali, con più tipi di notifica con supporto della modalità scura e design reattivo.

Aperto