CCHub Logo CCHub Tailwind Collection
Komponenten Erfolgsmeldungen Komponente "Erfolgsmeldungen"

Komponente "Erfolgsmeldungen"

Eine Komponente, die plakative Erfolgsbotschaften mit einem brutalistischen Designstil anzeigt, der sich durch hohen Kontrast, reaktionsschnelle Effekte und Unterstützung für dunkle Designs auszeichnet.

Vorschau

HTML-Code 

<div class="bg-green-500 p-5 rounded-lg shadow-lg text-white max-w-md mx-auto mt-10">
    <div class="flex items-center space-x-4">
        <img src="https://randomuser.me/api/portraits/thumb/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-white">
        <h2 class="text-2xl font-bold">Success!</h2>
    </div>
    <p class="mt-2 text-lg">Your operation was completed successfully. Everything went smoothly!</p>
    <img src="https://picsum.photos/seed/picsum/400/200" alt="Success Image" class="mt-3 rounded-md w-full">
    <div class="mt-4">
        <a href="#" class="bg-white text-green-500 font-bold py-2 px-4 rounded hover:bg-gray-200 transition duration-200">View Details</a>
    </div>
</div>
<div class="bg-gray-800 p-5 rounded-lg shadow-lg text-white max-w-md mx-auto mt-10 hidden dark:block">
    <div class="flex items-center space-x-4">
        <img src="https://randomuser.me/api/portraits/thumb/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-gray-800 bg-gray-700">
        <h2 class="text-2xl font-bold">Success!</h2>
    </div>
    <p class="mt-2 text-lg">Your operation was completed successfully. Everything went smoothly!</p>
    <img src="https://picsum.photos/seed/picsum/400/200" alt="Success Image" class="mt-3 rounded-md w-full">
    <div class="mt-4">
        <a href="#" class="bg-gray-700 text-white font-bold py-2 px-4 rounded hover:bg-gray-600 transition duration-200">View Details</a>
    </div>
</div>

Verwandte Komponenten

Komponente "Erfolgsmeldungen"

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

Offen

Komponente "Erfolgsmeldungen"

Eine reaktionsschnelle Komponente für Erfolgsmeldungen, die für den Dunkelmodus mit einem lebendigen Farbschema entwickelt wurde und sich ideal für die Präsentation von Arbeiten in einem Portfolio eignet.

Offen

SkeuomorphismSuccessMessage

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

Offen