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.
HTML Code
<div class="bg-gray-100 dark:bg-gray-800 p-6 rounded-lg shadow-lg">
<h2 class="text-2xl font-bold mb-4 text-gray-800 dark:text-gray-200">Product Reviews</h2>
<div class="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
<div class="bg-white dark:bg-gray-700 p-4 rounded-lg shadow-md transition-transform transform hover:scale-105">
<div class="flex items-center mb-4">
<img src="https://picsum.photos/50?random=1" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
<div>
<p class="font-semibold text-gray-800 dark:text-gray-200">John Doe</p>
<p class="text-sm text-gray-600 dark:text-gray-400">12th October, 2023</p>
</div>
</div>
<p class="text-gray-700 dark:text-gray-300 mb-2">Great product! Really helped me in my work.</p>
<div class="flex items-center">
<span class="text-yellow-500 font-bold">4.5</span>
<svg class="w-4 h-4 text-yellow-500 ml-1" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15.25l4.25 3.5-1.125-5.875L19 9.5h-6l-2-5-2 5H5l5.875 3.875L12 15.25z"/>
</svg>
</div>
</div>
<div class="bg-white dark:bg-gray-700 p-4 rounded-lg shadow-md transition-transform transform hover:scale-105">
<div class="flex items-center mb-4">
<img src="https://picsum.photos/50?random=2" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
<div>
<p class="font-semibold text-gray-800 dark:text-gray-200">Jane Smith</p>
<p class="text-sm text-gray-600 dark:text-gray-400">10th October, 2023</p>
</div>
</div>
<p class="text-gray-700 dark:text-gray-300 mb-2">I found it very useful, but it has some minor bugs.</p>
<div class="flex items-center">
<span class="text-yellow-500 font-bold">3.8</span>
<svg class="w-4 h-4 text-yellow-500 ml-1" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15.25l4.25 3.5-1.125-5.875L19 9.5h-6l-2-5-2 5H5l5.875 3.875L12 15.25z"/>
</svg>
</div>
</div>
<div class="bg-white dark:bg-gray-700 p-4 rounded-lg shadow-md transition-transform transform hover:scale-105">
<div class="flex items-center mb-4">
<img src="https://picsum.photos/50?random=3" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
<div>
<p class="font-semibold text-gray-800 dark:text-gray-200">Mike Johnson</p>
<p class="text-sm text-gray-600 dark:text-gray-400">5th October, 2023</p>
</div>
</div>
<p class="text-gray-700 dark:text-gray-300 mb-2">A bit expensive, but the quality is top-notch.</p>
<div class="flex items-center">
<span class="text-yellow-500 font-bold">4.0</span>
<svg class="w-4 h-4 text-yellow-500 ml-1" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15.25l4.25 3.5-1.125-5.875L19 9.5h-6l-2-5-2 5H5l5.875 3.875L12 15.25z"/>
</svg>
</div>
</div>
</div>
</div>Composants associés
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é.
Composant Avis sur les produits
Composant d’avis sur les produits réactifs avec un design brutal, une palette de couleurs monochromatique, une complexité complexe pour le commerce électronique, avec prise en charge du thème sombre
Composant Avis sur les produits
Un composant d’évaluation de produits inspiré du cyberpunk pour les produits de mode et de beauté, avec des accents de terre sur un fond sombre. Il est réactif et prend en charge le mode sombre.