CCHub Logo CCHub Tailwind Collection
Komponenten Warnmeldungen Komponente "Warnmeldungen"

Komponente "Warnmeldungen"

Eine Komponente für Warnmeldungen im brutalistischen Stil mit einem pastellfarbenen Farbschema, die für Geschäfts-/Unternehmenswebsites entwickelt wurde und mit Unterstützung für dunkle Themen reaktionsschnell ist.

Vorschau

HTML-Code 

<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>

Verwandte Komponenten

Komponente "Warnmeldungen"

Eine Komponente für reaktionsschnelle Warnmeldungen, die mit dem Glassmorphism-Effekt für E-Commerce-Zwecke entwickelt wurde. Es verfügt über ein einfaches Layout mit einem monochromatischen Farbschema und Unterstützung für den Dunkelmodus mit Tailwind CSS.

Offen

Komponente "Warnmeldungen"

Eine Komponente für Warnmeldungen mit 3D-Design, responsiven Funktionen und Unterstützung für dunkle Designs unter Verwendung von Tailwind CSS. Die Komponente enthält verschiedene Alarmtypen (Erfolg, Fehler, Warnung, Info) mit Symbolen und Meldungen.

Offen

Retro_Alert_Messages_Component

Eine einfache, reaktionsschnelle Komponente für Warnmeldungen mit einem Retro-/Vintage-Farbschema in Schwarz, Weiß und Neon-Akzenten, die für ein Armaturenbrett geeignet ist. Enthält Unterstützung für den Dunkelmodus.

Offen