Composant Avis sur les produits
Composant Web affichant les avis des utilisateurs sur un produit, avec des micro-interactions et la prise en charge du thème sombre à l’aide de Tailwind CSS.
HTML Code
<div class="max-w-md mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden">
<div class="p-6">
<h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Product Reviews</h2>
<div class="space-y-4">
<!-- Review Item -->
<div class="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg transition-transform transform hover:scale-105 duration-300 ease-in-out">
<div class="flex items-center mb-2">
<img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
<div class="ml-3">
<h3 class="text-lg font-semibold text-gray-800 dark:text-white">John Doe</h3>
<p class="text-sm text-gray-600 dark:text-gray-300">5 stars</p>
</div>
</div>
<p class="text-gray-700 dark:text-gray-300">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris.</p>
<span class="text-sm text-gray-500 dark:text-gray-400">2 days ago</span>
</div>
<!-- Review Item -->
<div class="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg transition-transform transform hover:scale-105 duration-300 ease-in-out">
<div class="flex items-center mb-2">
<img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/women/32.jpg" alt="User Avatar">
<div class="ml-3">
<h3 class="text-lg font-semibold text-gray-800 dark:text-white">Jane Smith</h3>
<p class="text-sm text-gray-600 dark:text-gray-300">4 stars</p>
</div>
</div>
<p class="text-gray-700 dark:text-gray-300">Praesent nec nisl a purus blandit viverra. Proin nunc est, faucibus ut, ullamcorper id, dapibus id, sapien.</p>
<span class="text-sm text-gray-500 dark:text-gray-400">5 days ago</span>
</div>
<!-- Review Item -->
<div class="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg transition-transform transform hover:scale-105 duration-300 ease-in-out">
<div class="flex items-center mb-2">
<img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/21.jpg" alt="User Avatar">
<div class="ml-3">
<h3 class="text-lg font-semibold text-gray-800 dark:text-white">Michael Johnson</h3>
<p class="text-sm text-gray-600 dark:text-gray-300">3 stars</p>
</div>
</div>
<p class="text-gray-700 dark:text-gray-300">Curabitur bibendum, felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi.</p>
<span class="text-sm text-gray-500 dark:text-gray-400">1 week ago</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
Style rétro/vintage, palette de couleurs des tons de terre, complexité modérée Composant d’avis sur les produits avec un design réactif et prise en charge du thème sombre. Utilise Tailwind CSS pour le stylisme, picsum.photos pour les images de produits et randomuser.me pour les avatars. Pas de JavaScript.
Composant Avis sur les produits
Un composant réactif d’avis sur les produits avec un design industriel et de matériaux bruts, une palette de couleurs rétro/vintage atténuée et une prise en charge du mode sombre, adapté aux applications météorologiques/climatiques.