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 komplexe, lebendige Warnmeldungskomponente im Glassmorphism-Stil für den E-Commerce mit Unterstützung für den Dunkelmodus.

Offen

Komponente "Marketplace-Warnmeldungen"

Eine von Material Design inspirierte Komponente für Warnmeldungen in Herbstfarben, die für Marktplatzplattformen geeignet ist. Bietet verschiedene Alarmtypen (Erfolg, Warnung, Fehler, Info) mit verwerfbaren Optionen und Unterstützung für den Dunkelmodus.

Offen

Komponente "Warnmeldungen"

Eine einfache, monochromatische Warnmeldungskomponente für Blogs mit Animationen, die sich auf Mikrointeraktion konzentrieren, Unterstützung des Dunkelmodus und Reaktionsfähigkeit.

Offen