CCHub Logo CCHub Tailwind Collection
Komponenten Erfolgsmeldungen Komponente "Erfolgsmeldungen"

Komponente "Erfolgsmeldungen"

Eine Erfolgsmeldungs-Komponente, die im Dunkelmodus für das Lesen von Blogs/Inhalten entwickelt wurde. Es verfügt über ein analoges Farbschema und ist reaktionsschnell.

Vorschau

HTML-Code 

<div class="bg-gray-900 text-gray-200 p-6 rounded-lg max-w-lg mx-auto shadow-lg">
    <h2 class="text-xl font-semibold mb-4">Success!</h2>
    <div class="flex items-center mb-4">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-12 h-12 rounded-full mr-3">
        <div>
            <p class="font-medium">John Doe</p>
            <p class="text-sm text-gray-400">a moment ago</p>
        </div>
    </div>
    <p class="mb-4">Your changes have been saved successfully!</p>
    <img src="https://picsum.photos/seed/success/400/200" alt="Success Image" class="rounded-lg mb-4" />
    <button class="bg-green-600 hover:bg-green-500 text-white font-semibold py-2 px-4 rounded focus:outline-none focus:ring-2 focus:ring-green-400">
        View Details
    </button>
</div>

<div class="bg-gray-800 text-gray-200 p-6 rounded-lg max-w-lg mx-auto shadow-lg mt-4">
    <h2 class="text-xl font-semibold mb-4">Success!</h2>
    <div class="flex items-center mb-4">
        <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-12 h-12 rounded-full mr-3">
        <div>
            <p class="font-medium">Jane Smith</p>
            <p class="text-sm text-gray-400">a few moments ago</p>
        </div>
    </div>
    <p class="mb-4">Your email has been verified successfully!</p>
    <img src="https://picsum.photos/seed/email_verified/400/200" alt="Email Verification Image" class="rounded-lg mb-4" />
    <button class="bg-green-600 hover:bg-green-500 text-white font-semibold py-2 px-4 rounded focus:outline-none focus:ring-2 focus:ring-green-400">
        Check Inbox
    </button>
</div>

<div class="bg-gray-700 text-gray-200 p-6 rounded-lg max-w-lg mx-auto shadow-lg mt-4">
    <h2 class="text-xl font-semibold mb-4">Success!</h2>
    <div class="flex items-center mb-4">
        <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar" class="w-12 h-12 rounded-full mr-3">
        <div>
            <p class="font-medium">Michael Brown</p>
            <p class="text-sm text-gray-400">just now</p>
        </div>
    </div>
    <p class="mb-4">Your profile picture has been updated!</p>
    <img src="https://picsum.photos/seed/profile_update/400/200" alt="Profile Update Image" class="rounded-lg mb-4" />
    <button class="bg-green-600 hover:bg-green-500 text-white font-semibold py-2 px-4 rounded focus:outline-none focus:ring-2 focus:ring-green-400">
        View Profile
    </button>
</div>

Verwandte Komponenten

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.

Offen

Komponente "Erfolgsmeldungen"

Eine reaktionsschnelle Komponente für Erfolgsmeldungen, die von Material Design inspiriert ist und Unterstützung für Erdtöne und dunkle Themen bietet, die für den Konsum von Inhalten entwickelt wurde.

Offen

Komponente "Erfolgsmeldungen"

Eine einfache Erfolgsnachrichtenkomponente mit einem pastellfarbenen Farbschema, subtilen Animationen für Mikrointeraktionen und responsivem Design mit Unterstützung für dunkle Themen. Es ist für ein Portfolio konzipiert, um Benutzeraktionen zu bestätigen.

Offen