CCHub Logo CCHub Tailwind Collection
Komponenten Erfolgsmeldungen Komponente "Erfolgsmeldungen"

Komponente "Erfolgsmeldungen"

Eine minimalistische Erfolgsnachrichtenkomponente mit responsiven Effekten, die sowohl helle als auch dunkle Themen mit Tailwind CSS unterstützt.

Vorschau

HTML-Code 

<div class="max-w-lg mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
    <div class="flex items-center p-4">
        <img class="w-12 h-12 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/45.jpg" alt="User Avatar">
        <div>
            <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Success!</h2>
            <p class="text-gray-600 dark:text-gray-400">Your action was completed successfully. Thank you for your participation!</p>
        </div>
    </div>
    <div class="p-4 border-t border-gray-200 dark:border-gray-700">
        <img class="w-full h-32 object-cover rounded-lg" src="https://picsum.photos/400/200?random=1" alt="Success Image">
    </div>
    <div class="p-4">
        <button class="w-full bg-green-500 hover:bg-green-600 text-white font-semibold py-2 px-4 rounded focus:outline-none focus:ring focus:ring-green-300 dark:focus:ring-green-600">Okay</button>
    </div>
</div>

Verwandte Komponenten

Komponente "Erfolgsmeldungen"

Eine Komponente zum Anzeigen von Erfolgsmeldungen mit einem 3D-Designstil, responsiven Effekten und Unterstützung für dunkle Designs mithilfe von Tailwind CSS.

Offen

Komponente "Erfolgsmeldungen"

Eine Komponente für Erfolgsmeldungen im 3D-Design-Stil mit responsiven Effekten und Unterstützung für dunkle Themen mit Platzhaltern für Bilder und Avatare.

Offen

Erfolgsmeldungen-Komponente - Immobilien Dark Mode Candy Colors

Eine Erfolgsnachrichtenkomponente für Immobilienplattformen, die mit dunklem Hintergrund, fröhlichen Bonbonfarben (Kaugummirosa, Mintgrün) und Reaktionsfähigkeit für alle Bildschirmgrößen, einschließlich Unterstützung des Dunkelmodus, gestaltet ist.

Offen