CCHub Logo CCHub Tailwind Collection
Komponenten Erfolgsmeldungen Komponente "Erfolgsmeldungen"

Komponente "Erfolgsmeldungen"

Eine reaktionsschnelle Komponente für Erfolgsmeldungen mit 3D-Designelementen und Unterstützung für dunkle Themen, die Tailwind CSS verwendet.

Vorschau

HTML-Code 

<div class="max-w-md mx-auto p-6 bg-white rounded-lg shadow-lg transform transition-all duration-300 hover:scale-105 dark:bg-gray-800 dark:shadow-2xl">
    <div class="flex items-center mb-4">
        <img src="https://picsum.photos/50/50" alt="Avatar" class="w-12 h-12 rounded-full mr-3 shadow-md" />
        <h2 class="font-bold text-lg text-gray-800 dark:text-gray-200">Success Message Title</h2>
    </div>
    <p class="text-gray-600 dark:text-gray-400">
        Your operation was successful! This message confirms that your changes were saved properly.
    </p>
    <div class="mt-4">
        <img src="https://picsum.photos/300/200" alt="Success Illustration" class="w-full h-auto rounded-lg shadow-md" />
    </div>
</div>
<style>
    @media (prefers-color-scheme: dark) {
        .dark\:bg-gray-800 {
            background-color: #1F2937;
        }
        .dark\:text-gray-200 {
            color: #E5E7EB;
        }
        .dark\:text-gray-400 {
            color: #9CA3AF;
        }
        .dark\:shadow-2xl {
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
        }
    }
</style>

Verwandte Komponenten

Industrial_Success_Message

Eine einfache, erfolgsbotschaftskomponente im industriellen stil mit warmen neutralen tönen, die für CRM/Business-Tools entwickelt wurde und sich durch Rohstoffästhetik und volle Reaktionsfähigkeit mit Unterstützung des Dunkelmodus auszeichnet.

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 minimalistische Erfolgsnachrichtenkomponente mit responsiven Effekten, die sowohl helle als auch dunkle Themen mit Tailwind CSS unterstützt.

Offen