Composants Messages de réussite Composant Messages de réussite

Composant Messages de réussite

Un composant de messages de réussite réactif conçu pour le mode sombre avec une palette de couleurs vives, idéal pour présenter le travail dans un portfolio.

Aperçu

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>

Composants associés

Skeuomorphic_Retro_Success_Message_Component

Un composant de message de réussite de complexité modérée conçu avec un style skeuomorphe, rétro/vintage, adapté aux marques de mode/beauté. Il comprend un design réactif et la prise en charge du mode sombre.

Ouvrir

SkeuomorphismSuccessMessage

Message de réussite du skeuomorphisme pour le tableau de bord, complexe avec couleurs complémentaires et mode sombre

Ouvrir

Composant Messages de réussite

Un composant de message de réussite simple et propre avec un design réactif et une prise en charge du mode sombre.

Ouvrir