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

Komponente "Erfolgsmeldungen"

Erfolgsmeldungen-Komponente mit Dunkelmodus - Bietet reaktionsschnelle Effekte und Unterstützung für dunkle Themen. Es wird kein JavaScript-Code benötigt. Für den Dunkelmodus ist CSS-Unterstützung ausreichend.

Offen

Erfolgsmeldungen Komponente 17

Eine fette und rohe Komponente für Erfolgsmeldungen, die mit Tailwind CSS entwickelt wurde und reaktionsschnelle Effekte und Unterstützung für dunkle Themen bietet.

Offen

Komponente "Erfolgsmeldungen"

Eine minimalistische/flache Design-Komponente für Erfolgsnachrichten für soziale Medien mit hellen Pastellfarben und einem komplexen, responsiven Layout.

Offen