CCHub Logo CCHub Tailwind Collection
Komponenten Erfolgsmeldungen Komponente "Erfolgsmeldungen"

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.

Vorschau

HTML-Code 

<div class="max-w-md mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 mt-10">
    <div class="flex items-center mb-4">
        <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar" class="w-12 h-12 rounded-full shadow-lg">
        <div class="ml-4">
            <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Success!</h3>
            <p class="text-gray-600 dark:text-gray-400">Your action was successful. The data has been saved.</p>
        </div>
    </div>
    <img src="https://picsum.photos/200/100?random=1" alt="Success Image" class="rounded-lg shadow-lg w-full">
    <div class="mt-4">
        <a href="#" class="inline-block bg-blue-500 text-white rounded-lg py-2 px-4 shadow hover:bg-blue-600 transition duration-200">View Details</a>
    </div>
</div>

<!-- Dark Mode Styles -->
<style>
    @media (prefers-color-scheme: dark) {
        body {
            background-color: #1a202c;
        }
    }
</style>

Verwandte Komponenten

SkeuomorphismSuccessMessage

Skeuomorphism Success Message für Dashboard, komplex mit Komplementärfarben und Dark Mode

Offen

Komponente "Erfolgsmeldungen"

Eine komplexe, vom Material Design inspirierte Erfolgsnachrichtenkomponente für Social-Media-Anwendungen mit analogen Farben, Reaktionsfähigkeit und Unterstützung für den Dunkelmodus.

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