Componenti Messaggi di avviso Componente Messaggi di avviso

Componente Messaggi di avviso

Un componente di messaggi di avviso in stile brutalista con una combinazione di colori pastello, progettato per siti Web aziendali/aziendali e reattivo con supporto per temi scuri.

Anteprima

Codice HTML

<div class="flex flex-col space-y-4 p-6 bg-white text-black dark:bg-gray-800 dark:text-white">
    <!-- Alert Message Header -->
    <h2 class="text-2xl font-bold">Alert Messages</h2>
    
    <!-- Alert Message Item -->
    <div class="flex items-center p-4 bg-pink-100 border-l-4 border-pink-500 dark:bg-pink-800 dark:border-pink-400">
        <img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
        <div class="flex flex-col">
            <span class="font-semibold">John Doe</span>
            <p>This is an informational alert message to notify you about updates.</p>
        </div>
    </div>
    
    <!-- Alert Message Item -->
    <div class="flex items-center p-4 bg-yellow-100 border-l-4 border-yellow-500 dark:bg-yellow-800 dark:border-yellow-400">
        <img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar">
        <div class="flex flex-col">
            <span class="font-semibold">Jane Smith</span>
            <p>This is a warning alert message to notify you about potential issues.</p>
        </div>
    </div>
    
    <!-- Alert Message Item -->
    <div class="flex items-center p-4 bg-green-100 border-l-4 border-green-500 dark:bg-green-800 dark:border-green-400">
        <img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/3.jpg" alt="User Avatar">
        <div class="flex flex-col">
            <span class="font-semibold">Alex Johnson</span>
            <p>This is a success alert message to confirm your action.</p>
        </div>
    </div>
</div>

Componenti correlati

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

Corporate_Professional_Alert_Messages

Una raccolta di messaggi di avviso puliti e ispirati all'affidabilità, adatti per ambienti aziendali o di portfolio, caratterizzati da colori gioiello e design reattivo con supporto per la modalità scura. Include avvisi informativi, di esito positivo, di avviso e di errore.

Aperto

Componente Messaggi di avviso

Un componente di messaggio di avviso con un design retrò/vintage, incluso il supporto per la modalità oscura e la reattività.

Aperto