CCHub Logo CCHub Tailwind Collection
Komponenten Erfolgsmeldungen Komponente "Erfolgsmeldungen"

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.

Vorschau

HTML-Code 

<div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
    <div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg p-6 max-w-md w-full transform transition-transform hover:scale-105">
        <div class="flex items-center space-x-4">
            <img src="https://picsum.photos/60/60" alt="Avatar" class="w-14 h-14 rounded-full shadow-md">
            <div class="flex-1">
                <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Success!</h2>
                <p class="text-gray-600 dark:text-gray-300">Your operation was completed successfully.</p>
            </div>
        </div>
        <div class="mt-4 space-x-2">
            <a href="#" class="inline-block px-4 py-2 text-sm font-medium text-white bg-blue-600 rounded-md shadow hover:bg-blue-500 transition duration-300">Okay</a>
            <a href="#" class="inline-block px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-gray-200 dark:bg-gray-700 rounded-md shadow hover:bg-gray-300 dark:hover:bg-gray-600 transition duration-300">Dismiss</a>
        </div>
    </div>
</div>

Verwandte Komponenten

Komponente "Erfolgsmeldungen"

Responsive Success Messages Component mit Unterstützung für den Dunkelmodus und Glassmorphism Style für den E-Commerce.

Offen

SkeuomorphismSuccessMessage

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

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