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

Messaggio di avviso Glassmorphism

Componente Glassmorphism Alert Message reattivo per un sito di e-commerce, con supporto alla modalità scura e una combinazione di colori analoga, costruito con Tailwind CSS.

Aperto

Componente Messaggi di avviso

Un componente di messaggi di avviso reattivi in modalità oscura per mostrare notifiche o messaggi in un portfolio, progettato con toni della terra e molteplici elementi interattivi.

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