Componenti Messaggi di avviso Componente Messaggi di avviso

Componente Messaggi di avviso

Un componente di messaggi di avviso in stile Glassmorphism per la visualizzazione dei dati del cruscotto, con effetti di vetro smerigliato, colori complementari e design reattivo con supporto per temi scuri.

Anteprima

Codice HTML

<div class="flex flex-col space-y-4 p-6">
    <div class="bg-white bg-opacity-40 backdrop-blur-md rounded-lg border border-white border-opacity-20 p-4 dark:bg-gray-800 dark:bg-opacity-60">
        <div class="flex items-center space-x-4">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="h-10 w-10 rounded-full">
            <div class="flex-1">
                <p class="text-lg font-semibold text-black dark:text-white">Alert Title</p>
                <p class="text-gray-700 dark:text-gray-300">This is an alert message describing the issue at hand.</p>
            </div>
            <button class="bg-red-600 text-white p-2 rounded-md hover:bg-red-500 dark:bg-red-700 dark:hover:bg-red-600">Dismiss</button>
        </div>
    </div>

    <div class="bg-white bg-opacity-40 backdrop-blur-md rounded-lg border border-white border-opacity-20 p-4 dark:bg-gray-800 dark:bg-opacity-60">
        <div class="flex items-center space-x-4">
            <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar" class="h-10 w-10 rounded-full">
            <div class="flex-1">
                <p class="text-lg font-semibold text-black dark:text-white">Information Alert</p>
                <p class="text-gray-700 dark:text-gray-300">This is a piece of information to keep you updated.</p>
            </div>
            <button class="bg-blue-600 text-white p-2 rounded-md hover:bg-blue-500 dark:bg-blue-700 dark:hover:bg-blue-600">Okay</button>
        </div>
    </div>

    <div class="bg-white bg-opacity-40 backdrop-blur-md rounded-lg border border-white border-opacity-20 p-4 dark:bg-gray-800 dark:bg-opacity-60">
        <div class="flex items-center space-x-4">
            <img src="https://randomuser.me/api/portraits/men/3.jpg" alt="Avatar" class="h-10 w-10 rounded-full">
            <div class="flex-1">
                <p class="text-lg font-semibold text-black dark:text-white">Success Alert</p>
                <p class="text-gray-700 dark:text-gray-300">Your operation was successful! Great job!</p>
            </div>
            <button class="bg-green-600 text-white p-2 rounded-md hover:bg-green-500 dark:bg-green-700 dark:hover:bg-green-600">Close</button>
        </div>
    </div>
</div>

Componenti correlati

Componente Messaggi di avviso

Componente messaggio di avviso reattivo con microinterazioni, combinazione di colori pastello, design complesso, scopo aziendale/aziendale, supporto per la modalità oscura e nessun JavaScript.

Aperto

Retro_Alert_Messages_Component

Un componente di messaggi di avviso semplice e reattivo con una combinazione di colori retrò/vintage in nero, bianco e neon, adatto per un cruscotto. Include il supporto per la modalità oscura.

Aperto

Componente Messaggi di avviso del Marketplace

Un componente di messaggi di avviso ispirato al Material Design con colori autunnali, adatto per piattaforme di marketplace. Presenta vari tipi di avviso (successo, avviso, errore, informazioni) con opzioni ignorabili e supporto per la modalità oscura.

Aperto