CCHub Logo CCHub Tailwind Collection
Komponenten Warnmeldungen Komponente "Warnmeldungen"

Komponente "Warnmeldungen"

Eine Komponente für reaktionsschnelle Warnmeldungen im Dunkelmodus zur Präsentation von Benachrichtigungen oder Nachrichten in einem Portfolio, die mit Erdtönen und mehreren interaktiven Elementen gestaltet ist.

Vorschau

HTML-Code 

<div class="bg-gray-800 dark:bg-gray-900 p-5 rounded-lg shadow-lg">
    <h2 class="text-lg font-bold text-earth-900 dark:text-earth-300">Alert Messages</h2>
    <div class="my-4">
        <div class="bg-earth-700 dark:bg-earth-600 p-4 rounded-lg flex items-start mb-4">
            <img src="https://picsum.photos/50" alt="Avatar" class="rounded-full mr-3" />
            <div>
                <p class="text-earth-100 dark:text-earth-200">New message from your portfolio submission!</p>
                <button class="mt-2 bg-earth-600 hover:bg-earth-500 text-earth-100 font-bold py-2 px-4 rounded">View</button>
            </div>
        </div>
        <div class="bg-earth-700 dark:bg-earth-600 p-4 rounded-lg flex items-start mb-4">
            <img src="https://picsum.photos/50" alt="Avatar" class="rounded-full mr-3" />
            <div>
                <p class="text-earth-100 dark:text-earth-200">Your work has been reviewed!</p>
                <button class="mt-2 bg-earth-600 hover:bg-earth-500 text-earth-100 font-bold py-2 px-4 rounded">Reply</button>
            </div>
        </div>
        <div class="bg-earth-700 dark:bg-earth-600 p-4 rounded-lg flex items-start">
            <img src="https://picsum.photos/50" alt="Avatar" class="rounded-full mr-3" />
            <div>
                <p class="text-earth-100 dark:text-earth-200">Don't forget to update your portfolio!</p>
                <button class="mt-2 bg-earth-600 hover:bg-earth-500 text-earth-100 font-bold py-2 px-4 rounded">Update</button>
            </div>
        </div>
    </div>
</div>

Verwandte Komponenten

Komponente "Warnmeldungen"

Retro/Vintage Graustufen-Warnmeldungskomponente für Social Media mit Unterstützung des Dunkelmodus

Offen

Komponente "Warnmeldungen"

Eine minimalistische Warnmeldungskomponente für Blogs mit einem Graustufen-Farbschema. Es enthält einen Titel, eine Nachricht und eine Schaltfläche zum Schließen. Responsives Design mit Unterstützung für dunkle Themen.

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