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.
HTML Code
<div class="bg-gray-900 dark:bg-gray-800 p-6 rounded-lg shadow-lg max-w-md mx-auto">
<h2 class="text-2xl font-bold text-gray-100 dark:text-gray-200 mb-4">Product Reviews</h2>
<div class="space-y-4">
<div class="bg-gray-800 dark:bg-gray-700 p-4 rounded-lg transition-all duration-200 hover:shadow-md hover:bg-gray-700 dark:hover:bg-gray-600">
<div class="flex items-center mb-2">
<img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" />
<div class="ml-3">
<h3 class="text-lg font-semibold text-gray-100 dark:text-gray-200">John Doe</h3>
<p class="text-sm text-gray-400 dark:text-gray-500">Verified Buyer</p>
</div>
</div>
<p class="text-gray-300 dark:text-gray-400 mb-2">"This product exceeded my expectations! Great quality and fast shipping. Highly recommend!"</p>
<div class="flex items-center">
<span class="text-yellow-400">★ ★ ★ ★ ☆</span>
<span class="ml-2 text-gray-400 dark:text-gray-500">4/5</span>
</div>
</div>
<div class="bg-gray-800 dark:bg-gray-700 p-4 rounded-lg transition-all duration-200 hover:shadow-md hover:bg-gray-700 dark:hover:bg-gray-600">
<div class="flex items-center mb-2">
<img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" />
<div class="ml-3">
<h3 class="text-lg font-semibold text-gray-100 dark:text-gray-200">Jane Smith</h3>
<p class="text-sm text-gray-400 dark:text-gray-500">Verified Buyer</p>
</div>
</div>
<p class="text-gray-300 dark:text-gray-400 mb-2">"I had a great experience with this product! The quality is impressive and it works as advertised."</p>
<div class="flex items-center">
<span class="text-yellow-400">★ ★ ★ ★ ★</span>
<span class="ml-2 text-gray-400 dark:text-gray-500">5/5</span>
</div>
</div>
<div class="bg-gray-800 dark:bg-gray-700 p-4 rounded-lg transition-all duration-200 hover:shadow-md hover:bg-gray-700 dark:hover:bg-gray-600">
<div class="flex items-center mb-2">
<img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar" />
<div class="ml-3">
<h3 class="text-lg font-semibold text-gray-100 dark:text-gray-200">Mike Johnson</h3>
<p class="text-sm text-gray-400 dark:text-gray-500">Verified Buyer</p>
</div>
</div>
<p class="text-gray-300 dark:text-gray-400 mb-2">"Good product, but it took a bit longer to arrive than I expected. Overall satisfied!"</p>
<div class="flex items-center">
<span class="text-yellow-400">★ ★ ★ ★ ☆</span>
<span class="ml-2 text-gray-400 dark:text-gray-500">4/5</span>
</div>
</div>
</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 d’avis sur les produits avec des éléments de conception 3D, des effets réactifs et la prise en charge du thème sombre à l’aide de Tailwind CSS.
Composant Avis sur les produits
Un composant d’avis sur les produits conçu dans le style brutalisme, avec un contraste élevé, un design réactif et une prise en charge du thème sombre. Il comprend des avatars d’utilisateurs et des images de produits provenant de services d’espace réservé.