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.
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
Composant Messages de réussite
Un composant réactif qui affiche des messages de réussite dans un style minimaliste, adapté à la présentation de travaux ou de produits avec prise en charge du thème sombre.
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.
Composant Messages de réussite
Un composant de message de réussite complexe, réactif et compatible avec les thèmes sombres pour les applications de médias sociaux, doté d’un design 3D dynamique à l’aide de Tailwind CSS. Il comprend de multiples éléments interactifs.