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.
HTML Code
<div class="container mx-auto p-4 sm:p-6 lg:p-8 max-w-4xl bg-blue-50 dark:bg-gray-900">
<!-- Reviews Header -->
<div class="mb-8 text-center">
<h2 class="text-3xl font-bold text-gray-800 dark:text-gray-200 mb-2">Customer Reviews</h2>
<!-- Static Average Rating - Skeuomorphic feel -->
<div class="inline-block bg-gradient-to-b from-gray-200 to-gray-300 dark:from-gray-700 dark:to-gray-800 border border-gray-300 dark:border-gray-600 rounded-full px-4 py-2 shadow-md dark:shadow-xl dark:shadow-gray-950">
<span class="text-xl font-semibold text-yellow-600 dark:text-yellow-400 mr-2">★★★★☆</span>
<span class="text-gray-700 dark:text-gray-300 font-medium">4.5 out of 5</span>
</div>
</div>
<!-- Reviews List -->
<div class="space-y-6">
<!-- Individual Review Card -->
<div class="bg-gradient-to-b from-gray-100 to-white dark:from-gray-800 dark:to-gray-900 border border-gray-200 dark:border-gray-700 rounded-lg p-6 shadow-xl dark:shadow-xl dark:shadow-gray-950 transform hover:scale-[1.01] transition-transform duration-200">
<div class="flex items-start space-x-4 mb-4">
<!-- Avatar - Skeuomorphic border/shadow -->
<img class="w-12 h-12 rounded-full border-2 border-gray-300 dark:border-gray-600 shadow-md dark:shadow-lg" src="https://randomuser.me/api/portraits/women/32.jpg" alt="Reviewer Avatar">
<div class="flex-1">
<div class="flex items-center justify-between mb-1">
<span class="text-lg font-semibold text-gray-800 dark:text-gray-200">Alice Wonderland</span>
<!-- Star Rating - Skeuomorphic feel -->
<div class="inline-block text-yellow-500 dark:text-yellow-400 text-xl">★★★★★</div>
</div>
<p class="text-sm text-gray-600 dark:text-gray-400">Reviewed on <span class="font-medium">January 15, 2023</span></p>
</div>
</div>
<h4 class="text-xl font-bold text-gray-800 dark:text-gray-200 mb-3">Absolutely Love This Product!</h4>
<p class="text-gray-700 dark:text-gray-300 leading-relaxed mb-4">
The quality is outstanding, and it exceeded all my expectations. It feels premium and works flawlessly. Highly recommend!
</p>
<!-- Review Images - Skeuomorphic border/shadow -->
<div class="flex space-x-3 mb-4">
<img class="w-20 h-20 sm:w-24 sm:h-24 object-cover rounded-md border border-gray-300 dark:border-gray-600 shadow-sm dark:shadow-lg" src="https://picsum.photos/seed/review1a/200/200" alt="Review Image 1">
<img class="w-20 h-20 sm:w-24 sm:h-24 object-cover rounded-md border border-gray-300 dark:border-gray-600 shadow-sm dark:shadow-lg" src="https://picsum.photos/seed/review1b/200/200" alt="Review Image 2">
</div>
<!-- Static Helpful/Report buttons - Skeuomorphic feel -->
<div class="flex items-center space-x-4 text-sm text-gray-600 dark:text-gray-400">
<div class="flex items-center bg-gradient-to-b from-gray-200 to-gray-300 dark:from-gray-700 dark:to-gray-800 border border-gray-300 dark:border-gray-600 rounded-full px-3 py-1 shadow-inset dark:shadow-lg">
<span class="mr-1">👍</span> Helpful <span class="font-semibold ml-1">(42)</span>
</div>
<div class="flex items-center bg-gradient-to-b from-gray-200 to-gray-300 dark:from-gray-700 dark:to-gray-800 border border-gray-300 dark:border-gray-600 rounded-full px-3 py-1 shadow-inset dark:shadow-lg">
<span class="mr-1">👎</span> Not Helpful <span class="font-semibold ml-1">(5)</span>
</div>
<div class="flex items-center bg-gradient-to-b from-gray-200 to-gray-300 dark:from-gray-700 dark:to-gray-800 border border-gray-300 dark:border-gray-600 rounded-full px-3 py-1 shadow-inset dark:shadow-lg">
<span class="mr-1">🚩</span> Report
</div>
</div>
</div>
<!-- Individual Review Card 2 -->
<div class="bg-gradient-to-b from-gray-100 to-white dark:from-gray-800 dark:to-gray-900 border border-gray-200 dark:border-gray-700 rounded-lg p-6 shadow-xl dark:shadow-xl dark:shadow-gray-950 transform hover:scale-[1.01] transition-transform duration-200">
<div class="flex items-start space-x-4 mb-4">
<!-- Avatar - Skeuomorphic border/shadow -->
<img class="w-12 h-12 rounded-full border-2 border-gray-300 dark:border-gray-600 shadow-md dark:shadow-lg" src="https://randomuser.me/api/portraits/men/45.jpg" alt="Reviewer Avatar">
<div class="flex-1">
<div class="flex items-center justify-between mb-1">
<span class="text-lg font-semibold text-gray-800 dark:text-gray-200">Bob The Builder</span>
<!-- Star Rating - Skeuomorphic feel -->
<div class="inline-block text-yellow-500 dark:text-yellow-400 text-xl">★★★★☆</div>
</div>
<p class="text-sm text-gray-600 dark:text-gray-400">Reviewed on <span class="font-medium">January 10, 2023</span></p>
</div>
</div>
<h4 class="text-xl font-bold text-gray-800 dark:text-gray-200 mb-3">Very Good, Minor Issue</h4>
<p class="text-gray-700 dark:text-gray-300 leading-relaxed mb-4">
Overall this product is excellent and performs well. The setup was straightforward. My only minor complaint is...
</p>
<!-- No images for this review -->
<div class="flex items-center space-x-4 text-sm text-gray-600 dark:text-gray-400">
<div class="flex items-center bg-gradient-to-b from-gray-200 to-gray-300 dark:from-gray-700 dark:to-gray-800 border border-gray-300 dark:border-gray-600 rounded-full px-3 py-1 shadow-inset dark:shadow-lg">
<span class="mr-1">👍</span> Helpful <span class="font-semibold ml-1">(18)</span>
</div>
<div class="flex items-center bg-gradient-to-b from-gray-200 to-gray-300 dark:from-gray-700 dark:to-gray-800 border border-gray-300 dark:border-gray-600 rounded-full px-3 py-1 shadow-inset dark:shadow-lg">
<span class="mr-1">👎</span> Not Helpful <span class="font-semibold ml-1">(2)</span>
</div>
<div class="flex items-center bg-gradient-to-b from-gray-200 to-gray-300 dark:from-gray-700 dark:to-gray-800 border border-gray-300 dark:border-gray-600 rounded-full px-3 py-1 shadow-inset dark:shadow-lg">
<span class="mr-1">🚩</span> Report
</div>
</div>
</div>
<!-- Individual Review Card 3 - Lower rating -->
<div class="bg-gradient-to-b from-gray-100 to-white dark:from-gray-800 dark:to-gray-900 border border-gray-200 dark:border-gray-700 rounded-lg p-6 shadow-xl dark:shadow-xl dark:shadow-gray-950 transform hover:scale-[1.01] transition-transform duration-200">
<div class="flex items-start space-x-4 mb-4">
<!-- Avatar - Skeuomorphic border/shadow -->
<img class="w-12 h-12 rounded-full border-2 border-gray-300 dark:border-gray-600 shadow-md dark:shadow-lg" src="https://randomuser.me/api/portraits/women/19.jpg" alt="Reviewer Avatar">
<div class="flex-1">
<div class="flex items-center justify-between mb-1">
<span class="text-lg font-semibold text-gray-800 dark:text-gray-200">Charlie Davis</span>
<!-- Star Rating - Skeuomorphic feel -->
<div class="inline-block text-yellow-500 dark:text-yellow-400 text-xl">★★★☆☆</div>
</div>
<p class="text-sm text-gray-600 dark:text-gray-400">Reviewed on <span class="font-medium">January 05, 2023</span></p>
</div>
</div>
<h4 class="text-xl font-bold text-gray-800 dark:text-gray-200 mb-3">It's Okay, Not What I Expected</h4>
<p class="text-gray-700 dark:text-gray-300 leading-relaxed mb-4">
The features are decent, but it feels a bit flimsy compared to the description. It gets the job done, but I wouldn't purchase it again.
</p>
<!-- Review Images -->
<div class="flex space-x-3 mb-4">
<img class="w-20 h-20 sm:w-24 sm:h-24 object-cover rounded-md border border-gray-300 dark:border-gray-600 shadow-sm dark:shadow-lg" src="https://picsum.photos/seed/review3a/200/200" alt="Review Image 1">
</div>
<div class="flex items-center space-x-4 text-sm text-gray-600 dark:text-gray-400">
<div class="flex items-center bg-gradient-to-b from-gray-200 to-gray-300 dark:from-gray-700 dark:to-gray-800 border border-gray-300 dark:border-gray-600 rounded-full px-3 py-1 shadow-inset dark:shadow-lg">
<span class="mr-1">👍</span> Helpful <span class="font-semibold ml-1">(7)</span>
</div>
<div class="flex items-center bg-gradient-to-b from-gray-200 to-gray-300 dark:from-gray-700 dark:to-gray-800 border border-gray-300 dark:border-gray-600 rounded-full px-3 py-1 shadow-inset dark:shadow-lg">
<span class="mr-1">👎</span> Not Helpful <span class="font-semibold ml-1">(15)</span>
</div>
<div class="flex items-center bg-gradient-to-b from-gray-200 to-gray-300 dark:from-gray-700 dark:to-gray-800 border border-gray-300 dark:border-gray-600 rounded-full px-3 py-1 shadow-inset dark:shadow-lg">
<span class="mr-1">🚩</span> Report
</div>
</div>
</div>
</div>
</div>Composants associés
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
Composant utilisant Tailwind CSS avec le style Neumorphism, les effets réactifs et la prise en charge du thème sombre. Aucun code JavaScript n’est inclus. Des images et des avatars de substitution sont utilisés.
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.