CCHub Logo CCHub Tailwind Collection
Komponenten Erfolgsmeldungen Erfolgsmeldungen Komponente 17

Erfolgsmeldungen Komponente 17

Eine fette und rohe Komponente für Erfolgsmeldungen, die mit Tailwind CSS entwickelt wurde und reaktionsschnelle Effekte und Unterstützung für dunkle Themen bietet.

Vorschau

HTML-Code 

<div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-lg max-w-sm mx-auto">
    <div class="flex items-center mb-4">
        <img src="https://picsum.photos/50/50" alt="Avatar" class="rounded-full border-2 border-green-500 mr-3">
        <h2 class="text-xl font-bold text-green-700 dark:text-green-400">Success!</h2>
    </div>
    <p class="text-gray-700 dark:text-gray-300">
        Your operation was completed successfully. Check your account for the latest updates!
    </p>
    <div class="flex justify-end mt-4">
        <button class="bg-green-500 hover:bg-green-600 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">
            Close
        </button>
    </div>
</div>

<style>
    @media (prefers-color-scheme: dark) {
        .bg-white {
            background-color: #2D3748;
        }
        .text-gray-700 {
            color: #E2E8F0;
        }
    }
</style>

Verwandte Komponenten

Komponente "Erfolgsmeldungen"

Eine reaktionsschnelle Komponente für Erfolgsmeldungen, die für den Dunkelmodus mit einem lebendigen Farbschema entwickelt wurde und sich ideal für die Präsentation von Arbeiten in einem Portfolio eignet.

Offen

Memphis Pastel Erfolgsmeldung

Eine einfache, reaktionsschnelle Erfolgsbotschaft mit einer Memphis-Designästhetik in Pastellfarben. Verfügt über verspielte geometrische Formen und unterstützt den Dunkelmodus.

Offen

Komponente "Erfolgsmeldungen"

Eine reaktionsschnelle Komponente für Erfolgsmeldungen, die im skeuomorphen Stil mit Tailwind CSS entworfen wurde und Unterstützung für dunkle Themen bietet.

Offen