CCHub Logo CCHub Tailwind Collection
Komponenten Erfolgsmeldungen Komponente "Erfolgsmeldungen"

Komponente "Erfolgsmeldungen"

Eine reaktionsschnelle Komponente, die Erfolgsmeldungen in einem minimalistischen Stil anzeigt und sich für die Präsentation von Arbeiten oder Produkten mit Unterstützung für dunkle Themen eignet.

Vorschau

HTML-Code 

<div class="max-w-md mx-auto p-4 bg-white dark:bg-gray-800 rounded-lg shadow-lg mt-10">
    <div class="flex items-center mb-4">
        <img src="https://picsum.photos/40" alt="Success Avatar" class="w-10 h-10 rounded-full mr-2">
        <h2 class="text-lg font-semibold text-gray-800 dark:text-white">Success!</h2>
    </div>
    <p class="text-gray-600 dark:text-gray-300 mb-4">Your changes have been saved successfully. You can view them in your portfolio.</p>
    <div class="flex space-x-2">
        <a href="#" class="bg-blue-500 hover:bg-blue-600 text-white font-semibold py-2 px-4 rounded focus:outline-none focus:ring-2 focus:ring-blue-400 dark:focus:ring-blue-600">View Portfolio</a>
        <a href="#" class="bg-gray-300 hover:bg-gray-400 text-gray-800 font-semibold py-2 px-4 rounded focus:outline-none focus:ring-2 focus:ring-gray-400 dark:bg-gray-700 dark:text-white dark:hover:bg-gray-600 dark:focus:ring-gray-500">Dismiss</a>
    </div>
</div>

<div class="max-w-md mx-auto p-4 bg-white dark:bg-gray-800 rounded-lg shadow-lg mt-10">
    <div class="flex items-center mb-4">
        <img src="https://picsum.photos/40" alt="Success Avatar" class="w-10 h-10 rounded-full mr-2">
        <h2 class="text-lg font-semibold text-gray-800 dark:text-white">Success!</h2>
    </div>
    <p class="text-gray-600 dark:text-gray-300 mb-4">You have successfully submitted your form. Thank you for your submission!</p>
    <div class="flex space-x-2">
        <a href="#" class="bg-blue-500 hover:bg-blue-600 text-white font-semibold py-2 px-4 rounded focus:outline-none focus:ring-2 focus:ring-blue-400 dark:focus:ring-blue-600">View Confirmation</a>
        <a href="#" class="bg-gray-300 hover:bg-gray-400 text-gray-800 font-semibold py-2 px-4 rounded focus:outline-none focus:ring-2 focus:ring-gray-400 dark:bg-gray-700 dark:text-white dark:hover:bg-gray-600 dark:focus:ring-gray-500">Dismiss</a>
    </div>
</div>

Verwandte Komponenten

Komponente "Erfolgsmeldungen"

Eine einfache, künstlerische Erfolgsbotschaft mit einem sepia/braunen Farbschema, geeignet für Kryptowährungs-/Blockchain-Anwendungen. Verfügt über ein weiches, von Aquarellen inspiriertes Design, volle Reaktionsfähigkeit und Unterstützung für den Dunkelmodus.

Offen

Neumorphic_Charity_Success_Message

Eine einfache, reaktionsschnelle Erfolgsnachrichtenkomponente mit einem weichen neumorphen Stil und einem monochromen Farbschema, das für gemeinnützige und wohltätige Organisationen geeignet ist. Enthält Unterstützung für den Dunkelmodus.

Offen

Komponente "Erfolgsmeldungen"

Eine komplexe, reaktionsschnelle und mit Dark-Themes kompatible Erfolgsnachrichtenkomponente für Social-Media-Anwendungen mit einem lebendigen 3D-Design unter Verwendung von Tailwind CSS. Es enthält mehrere interaktive Elemente.

Offen