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.
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 Messages de réussite
Un composant de message de réussite simple avec une palette de couleurs pastel, des animations subtiles pour les micro-interactions et un design réactif avec prise en charge du thème sombre. Il est conçu pour qu’un portefeuille reconnaisse les actions de l’utilisateur.
Industrial_Success_Message
Un composant de message de réussite simple, de style industriel, avec des neutres chauds, conçu pour les outils CRM/Business, avec une esthétique de matière première et une réactivité totale avec prise en charge du mode sombre.
Message de réussite Art Déco
Un composant de message de réussite inspiré de l’Art déco avec une palette de couleurs rétro/vintage, conçu pour les plateformes de divertissement/médias. Il présente des motifs géométriques, un style luxueux et est entièrement réactif avec la prise en charge du mode sombre.