CCHub Logo CCHub Tailwind Collection
Komponenten Erfolgsmeldungen Komponente "Erfolgsmeldungen"

Komponente "Erfolgsmeldungen"

Eine Komponente, die plakative Erfolgsbotschaften mit einem brutalistischen Designstil anzeigt, der sich durch hohen Kontrast, reaktionsschnelle Effekte und Unterstützung für dunkle Designs auszeichnet.

Vorschau

HTML-Code 

<div class="bg-green-500 p-5 rounded-lg shadow-lg text-white max-w-md mx-auto mt-10">
    <div class="flex items-center space-x-4">
        <img src="https://randomuser.me/api/portraits/thumb/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-white">
        <h2 class="text-2xl font-bold">Success!</h2>
    </div>
    <p class="mt-2 text-lg">Your operation was completed successfully. Everything went smoothly!</p>
    <img src="https://picsum.photos/seed/picsum/400/200" alt="Success Image" class="mt-3 rounded-md w-full">
    <div class="mt-4">
        <a href="#" class="bg-white text-green-500 font-bold py-2 px-4 rounded hover:bg-gray-200 transition duration-200">View Details</a>
    </div>
</div>
<div class="bg-gray-800 p-5 rounded-lg shadow-lg text-white max-w-md mx-auto mt-10 hidden dark:block">
    <div class="flex items-center space-x-4">
        <img src="https://randomuser.me/api/portraits/thumb/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-gray-800 bg-gray-700">
        <h2 class="text-2xl font-bold">Success!</h2>
    </div>
    <p class="mt-2 text-lg">Your operation was completed successfully. Everything went smoothly!</p>
    <img src="https://picsum.photos/seed/picsum/400/200" alt="Success Image" class="mt-3 rounded-md w-full">
    <div class="mt-4">
        <a href="#" class="bg-gray-700 text-white font-bold py-2 px-4 rounded hover:bg-gray-600 transition duration-200">View Details</a>
    </div>
</div>

Verwandte Komponenten

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

SuccessMessagesComponent

Eine einfache Erfolgsnachrichtenkomponente für den E-Commerce mit einer monochromatischen Material Design-Ästhetik, einem responsiven Layout und Unterstützung für dunkle Themen.

Offen

Komponente "Erfolgsmeldungen"

Eine Erfolgsmeldungs-Komponente, die im Dunkelmodus für das Lesen von Blogs/Inhalten entwickelt wurde. Es verfügt über ein analoges Farbschema und ist reaktionsschnell.

Offen