Composant Avis sur les produits
Un composant minimaliste d’avis sur les produits conçu pour les interfaces de médias sociaux, intégrant une palette de couleurs triadique et des éléments interactifs.
HTML Code
<div class="bg-white dark:bg-gray-800 p-5 rounded-lg shadow-md max-w-md mx-auto">
<h2 class="text-xl font-semibold mb-4 text-gray-800 dark:text-white">Product Reviews</h2>
<div class="flex items-center space-x-4 mb-6">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-12 h-12 rounded-full">
<div>
<h3 class="text-lg font-medium text-gray-900 dark:text-gray-100">John Doe</h3>
<span class="text-sm text-gray-600 dark:text-gray-300">1 hour ago</span>
</div>
</div>
<div class="mb-4">
<img src="https://picsum.photos/500/200" alt="Product Image" class="w-full h-32 object-cover rounded-md">
</div>
<p class="text-gray-800 dark:text-gray-200 mb-3">This product has exceeded my expectations! The quality is exceptional and it looks great in my living room.</p>
<div class="flex items-center space-x-4 mb-4">
<button class="bg-blue-500 hover:bg-blue-600 text-white font-semibold py-1 px-2 rounded">Like</button>
<button class="bg-green-500 hover:bg-green-600 text-white font-semibold py-1 px-2 rounded">Reply</button>
</div>
<div class="border-t border-gray-300 dark:border-gray-700 pt-4 mt-4">
<h4 class="text-md font-semibold text-gray-700 dark:text-gray-300">Leave a Review</h4>
<textarea class="w-full border border-gray-300 dark:border-gray-700 rounded-md p-2 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-700" rows="4" placeholder="Write your thoughts..."></textarea>
<button class="mt-2 bg-blue-500 hover:bg-blue-600 text-white font-semibold py-1 px-2 rounded">Submit</button>
</div>
</div>Composants associés
Composant Avis sur les produits
Un composant réactif d’avis sur les produits conçu pour le mode sombre avec une palette de couleurs vives, adapté aux sites Web d’entreprise. Il présente des avatars d’utilisateurs, des évaluations d’avis et des commentaires d’utilisateurs dans une mise en page interactive.
Composant Avis sur les produits
Un composant complexe et attrayant d’avis sur les produits avec des micro-interactions, conçu pour les sites Web d’entreprise. Le composant présente un design réactif à thème sombre utilisant Tailwind CSS, incorporant des animations et un schéma de couleurs basé sur des couleurs analogues.
Composant d’avis sur les produits de jeu
Il s’agit d’un composant ludique et dynamique d’avis sur les produits pour les sites Web de jeux, avec des éléments arrondis, des couleurs à haute saturation et une interface riche avec des étoiles, des avatars d’utilisateurs, du texte d’avis et des boutons J’aime/Je n’aime pas. Entièrement réactif avec prise en charge du mode sombre.