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 reaktionsschnelle Komponente für Warnmeldungen, die in einem minimalistischen/flachen Stil mit einem pastellfarbenen Farbschema gestaltet ist, geeignet für Social-Media-Schnittstellen und mit Unterstützung für dunkle Themen.

Offen

Komponente "Warnmeldungen"

Bei dieser Komponente handelt es sich um eine Warnmeldung mit einem minimalistischen/flachen Design, einem Farbschema in Erdtönen und einem komplexen Layout. Es wurde für Social-Media-Schnittstellen entwickelt und ist reaktionsschnell mit Unterstützung für dunkle Themen. Es verwendet Tailwind CSS für das Styling und enthält mehrere interaktive Elemente.

Offen

Komponente "Warnmeldungen"

Eine einfache, reaktionsschnelle Komponente für Graustufen-Warnmeldungen für E-Commerce-Websites mit Unterstützung für den Dunkelmodus.

Offen