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

Composant Messages de réussite

Un composant permettant d’afficher des messages de réussite avec un style de conception 3D, des effets réactifs et la prise en charge du thème sombre à l’aide de Tailwind CSS.

Aperçu

HTML Code

<div class="p-6 max-w-md mx-auto bg-white rounded-lg shadow-md dark:bg-gray-800 transition duration-300 ease-in-out transform hover:scale-105">
    <div class="flex items-center mb-4">
        <img src="https://picsum.photos/50/50?random=1" alt="User Avatar" class="w-12 h-12 rounded-full mr-4 shadow-lg dark:shadow-xl">
        <div class="flex-1">
            <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Success!</h2>
            <p class="text-gray-600 dark:text-gray-400">Your action was completed successfully.</p>
        </div>
    </div>
    <div class="flex items-center justify-between mt-4 pt-4 border-t border-gray-200 dark:border-gray-700">
        <span class="text-sm text-gray-500 dark:text-gray-400">2 minutes ago</span>
        <a href="#" class="inline-flex items-center text-blue-600 hover:text-blue-500 dark:text-blue-400 dark:hover:text-blue-300">View Details</a>
    </div>
</div>

Composants associés

Composant Message de Réussite - Conception Matérielle Complémentaire

Un composant de message de réussite de style Material Design pour un blog/site de contenu, utilisant une palette de couleurs complémentaire. Réactif avec prise en charge du thème sombre. Pas de JavaScript.

Ouvrir

Composant Messages de réussite

Il s’agit d’un composant complexe de messages de réussite inspiré du Material Design pour les applications de médias sociaux, avec des couleurs analogues, une réactivité et une prise en charge du mode sombre.

Ouvrir

Composant Messages de réussite

Un composant de messages de réussite de style 3D avec des effets réactifs et la prise en charge du thème sombre, avec des espaces réservés pour les images et les avatars.

Ouvrir