Composant Avis sur les produits
Un composant réactif d’avis sur les produits construit avec Tailwind CSS, avec des micro-interactions au survol, la prise en charge du thème sombre et des images de remplacement. Aucun JavaScript n’est utilisé.
HTML Code
<div class="container mx-auto p-4 sm:p-6 lg:p-8 bg-gray-50 dark:bg-gray-900 min-h-screen font-sans">
<h2 class="text-2xl sm:text-3xl font-bold text-center mb-8 text-gray-900 dark:text-white">Customer Reviews</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<!-- Review Card -->
<div class="bg-white dark:bg-gray-800 rounded-lg p-6 shadow-md transition-all duration-300 ease-in-out hover:shadow-lg hover:-translate-y-1">
<div class="flex items-start mb-4">
<img class="w-12 h-12 rounded-full object-cover mr-4" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar">
<div class="flex-grow">
<p class="font-semibold text-gray-900 dark:text-white">John Doe</p>
<div class="flex items-center text-yellow-500 dark:text-yellow-400">
<svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.68z"/></svg>
<svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.68z"/></svg>
<svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.68z"/></svg>
<svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.68z"/></svg>
<svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.68z"/></svg>
</div>
</div>
<span class="text-sm text-gray-500 dark:text-gray-400 ml-4 flex-shrink-0">July 15, 2023</span>
</div>
<p class="text-gray-700 dark:text-gray-300 leading-relaxed">Absolutely love this product! It exceeded my expectations in every way. The build quality is superb, and it performs flawlessly. Highly recommended!</p>
</div>
<!-- Review Card with Product Image -->
<div class="bg-white dark:bg-gray-800 rounded-lg p-6 shadow-md transition-all duration-300 ease-in-out hover:shadow-lg hover:-translate-y-1">
<img class="w-full h-32 object-cover rounded-md mb-6" src="https://picsum.photos/seed/product1/400/300" alt="Product Image">
<div class="flex items-start mb-4">
<img class="w-12 h-12 rounded-full object-cover mr-4" src="https://randomuser.me/api/portraits/women/45.jpg" alt="Avatar">
<div class="flex-grow">
<p class="font-semibold text-gray-900 dark:text-white">Jane Smith</p>
<div class="flex items-center text-yellow-500 dark:text-yellow-400">
<svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.68z"/></svg>
<svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.68z"/></svg>
<svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.68z"/></svg>
<svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.68z"/></svg>
</div>
</div>
<span class="text-sm text-gray-500 dark:text-gray-400 ml-4 flex-shrink-0">July 10, 2023</span>
</div>
<p class="text-gray-700 dark:text-gray-300 leading-relaxed">Solid product, works as advertised. The setup was easy, and the features are intuitive. Deducted one star because the documentation could be clearer on advanced settings.</p>
</div>
<!-- Review Card -->
<div class="bg-white dark:bg-gray-800 rounded-lg p-6 shadow-md transition-all duration-300 ease-in-out hover:shadow-lg hover:-translate-y-1">
<div class="flex items-start mb-4">
<img class="w-12 h-12 rounded-full object-cover mr-4" src="https://randomuser.me/api/portraits/men/78.jpg" alt="Avatar">
<div class="flex-grow">
<p class="font-semibold text-gray-900 dark:text-white">Robert Johnson</p>
<div class="flex items-center text-yellow-500 dark:text-yellow-400">
<svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.68z"/></svg>
<svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.68z"/></svg>
<svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.68z"/></svg>
<svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.68z"/></svg>
<svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.68z"/></svg>
</div>
</div>
<span class="text-sm text-gray-500 dark:text-gray-400 ml-4 flex-shrink-0">July 1, 2023</span>
</div>
<p class="text-gray-700 dark:text-gray-300 leading-relaxed">Outstanding performance! This is exactly what I was looking for. Setup was a breeze, and it's been working perfectly since day one. Five stars!</p>
</div>
<!-- Review Card with Product Image -->
<div class="bg-white dark:bg-gray-800 rounded-lg p-6 shadow-md transition-all duration-300 ease-in-out hover:shadow-lg hover:-translate-y-1">
<img class="w-full h-32 object-cover rounded-md mb-6" src="https://picsum.photos/seed/product2/400/300" alt="Product Image">
<div class="flex items-start mb-4">
<img class="w-12 h-12 rounded-full object-cover mr-4" src="https://randomuser.me/api/portraits/women/91.jpg" alt="Avatar">
<div class="flex-grow">
<p class="font-semibold text-gray-900 dark:text-white">Emily Davis</p>
<div class="flex items-center text-yellow-500 dark:text-yellow-400">
<svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.68z"/></svg>
<svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.68z"/></svg>
<svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.68z"/></svg>
</div>
</div>
<span class="text-sm text-gray-500 dark:text-gray-400 ml-4 flex-shrink-0">June 28, 2023</span>
</div>
<p class="text-gray-700 dark:text-gray-300 leading-relaxed">It's okay, does the job. Had some minor issues during installation, and the user interface is not as intuitive as I hoped. Decent for the price point, though.</p>
</div>
</div>
</div>Composants associés
Composant Avis sur les produits
Il s’agit d’un composant d’avis sur les produits de style neumorphique qui comprend des avatars d’utilisateurs, du texte d’avis et des étoiles. Il intègre un design réactif et une prise en charge du mode sombre à l’aide de Tailwind CSS.
Composant Avis sur les produits
Un composant simple d’avis sur les produits conçu dans le style Material Design avec une palette de couleurs en niveaux de gris.
Composant Avis sur les produits
Il s’agit d’un composant complexe d’avis sur les produits conçu pour un tableau de bord, avec des éléments de conception 3D, des couleurs de terre et la prise en charge du mode sombre.