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 - Papier/Impression-Néon/Electrique
Il s’agit d’un composant simple et réactif d’avis sur les produits, avec un design inspiré du papier/de l’impression et une palette de couleurs néon/électrique, adapté à la documentation ou aux sites wiki. Inclut la prise en charge du mode sombre.
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 simple et réactif avec un design inspiré de l’agriculture biologique, des tons sépia/bruns, une prise en charge du mode sombre et adapté aux plateformes de divertissement/médias.