Avis sur le produit Composant 6
Un composant d’évaluation de produit réactif conçu selon les principes de Material Design, prenant en charge les thèmes clairs et sombres.
HTML Code
<div class="max-w-md mx-auto bg-white shadow-md rounded-lg overflow-hidden dark:bg-gray-800">
<div class="p-4">
<h2 class="text-lg font-semibold text-gray-800 dark:text-white">Product Reviews</h2>
<div class="divide-y divide-gray-200 dark:divide-gray-700">
<div class="py-4 flex">
<img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
<div class="ml-4 flex-1">
<div class="flex justify-between items-center">
<h3 class="text-sm font-medium text-gray-800 dark:text-white">John Doe</h3>
<span class="text-sm text-gray-500 dark:text-gray-400">5/5</span>
</div>
<p class="text-gray-600 dark:text-gray-300 mt-1">This product is amazing! Highly recommend it to everyone.</p>
</div>
</div>
<div class="py-4 flex">
<img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar">
<div class="ml-4 flex-1">
<div class="flex justify-between items-center">
<h3 class="text-sm font-medium text-gray-800 dark:text-white">Jane Smith</h3>
<span class="text-sm text-gray-500 dark:text-gray-400">4/5</span>
</div>
<p class="text-gray-600 dark:text-gray-300 mt-1">Good quality, but the shipping took too long.</p>
</div>
</div>
<div class="py-4 flex">
<img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/men/3.jpg" alt="Avatar">
<div class="ml-4 flex-1">
<div class="flex justify-between items-center">
<h3 class="text-sm font-medium text-gray-800 dark:text-white">Mike Johnson</h3>
<span class="text-sm text-gray-500 dark:text-gray-400">3/5</span>
</div>
<p class="text-gray-600 dark:text-gray-300 mt-1">It works fine, but I've seen better products in this range.</p>
</div>
</div>
</div>
</div>
<div class="p-4 border-t border-gray-200 dark:border-gray-700">
<h3 class="text-md font-semibold text-gray-800 dark:text-white">Add a Review</h3>
<textarea class="w-full mt-2 p-2 border border-gray-300 rounded-md dark:border-gray-700 dark:bg-gray-800 dark:text-white" rows="3" placeholder="Write your review..."></textarea>
<button class="mt-2 bg-blue-500 text-white rounded-md py-2 px-4 hover:bg-blue-600 dark:bg-blue-600 dark:hover:bg-blue-700">Submit</button>
</div>
</div>Composants associés
Composant Avis sur les produits
Composant avec conception matérielle, effets réactifs et prise en charge du thème sombre.
Composant (Pastel skeuomorphe)
Un composant complexe et réactif d’avis sur les produits avec une esthétique de design skeuomorphe utilisant des couleurs pastel et prenant en charge le mode sombre. Comprend des cartes superposées, des dégradés subtils et des ombres pour créer de la profondeur. Comprend l’avatar, le nom, le nombre d’étoiles, le texte de l’avis et des images facultatives. Utilise Tailwind CSS exclusivement sans JavaScript.
Composant Avis sur les produits
Un composant minimaliste d’avis sur les produits conçu pour les interfaces de médias sociaux, intégrant une palette de couleurs triadique et des éléments interactifs.