CCHub Logo CCHub Tailwind Collection
Komponenten Erfolgsmeldungen Komponente "Erfolgsmeldungen"

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.

Vorschau

HTML-Code 

<div class="bg-gray-800 p-6 rounded-lg shadow-lg max-w-lg mx-auto">  
    <h2 class="text-xl text-vibrant-500 font-bold mb-4">Success Messages</h2>  
    <div class="bg-gray-900 p-4 rounded-lg mb-4">  
        <div class="flex items-center mb-2">  
            <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-2">  
            <span class="text-white font-semibold">John Doe</span>  
            <span class="text-gray-400 text-sm ml-2">2 minutes ago</span>  
        </div>  
        <p class="text-gray-300">Your project has been successfully submitted!</p>  
    </div>  
    <div class="bg-gray-900 p-4 rounded-lg mb-4">  
        <div class="flex items-center mb-2">  
            <img src="https://randomuser.me/api/portraits/women/32.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-2">  
            <span class="text-white font-semibold">Jane Smith</span>  
            <span class="text-gray-400 text-sm ml-2">5 minutes ago</span>  
        </div>  
        <p class="text-gray-300">Your profile has been updated successfully!</p>  
    </div>  
    <div class="bg-gray-900 p-4 rounded-lg mb-4">  
        <div class="flex items-center mb-2">  
            <img src="https://randomuser.me/api/portraits/men/80.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-2">  
            <span class="text-white font-semibold">Mike Johnson</span>  
            <span class="text-gray-400 text-sm ml-2">10 minutes ago</span>  
        </div>  
        <p class="text-gray-300">Your order has been placed successfully!</p>  
    </div>  
    <div class="flex justify-center mt-4">  
        <img src="https://picsum.photos/300/200?random=1" alt="Success Image" class="rounded-lg shadow-lg">  
    </div>  
</div>

Verwandte Komponenten

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.

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

Offen