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.
HTML Code
<section class="bg-zinc-900 dark:bg-black py-16 px-4 sm:px-6 lg:px-8 font-sans">
<div class="max-w-6xl mx-auto">
<h2 class="text-4xl sm:text-5xl font-extrabold tracking-tight text-white dark:text-gray-100 text-center mb-12 relative">
Customer Insights
<span class="block w-24 h-1 bg-yellow-600 dark:bg-yellow-500 mx-auto mt-4 rounded-full"></span>
</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- Review Card 1 -->
<div class="bg-zinc-800 dark:bg-zinc-900 rounded-lg p-6 shadow-lg border border-yellow-700 dark:border-yellow-600 relative overflow-hidden transform transition-all duration-300 hover:scale-105 hover:shadow-yellow-500/20">
<div class="absolute -top-4 -right-4 w-24 h-24 bg-yellow-500 dark:bg-yellow-600 opacity-20 transform rotate-45 skew-x-12"></div>
<div class="flex items-center mb-4">
<img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Reviewer Avatar" class="w-16 h-16 rounded-full border-2 border-yellow-500 dark:border-yellow-600 object-cover mr-4">
<div>
<p class="text-lg font-semibold text-white dark:text-gray-50">Alice J.</p>
<div class="flex mt-1">
<svg class="w-5 h-5 text-yellow-400 dark:text-yellow-300" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.92 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
<svg class="w-5 h-5 text-yellow-400 dark:text-yellow-300" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.92 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
<svg class="w-5 h-5 text-yellow-400 dark:text-yellow-300" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.92 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
<svg class="w-5 h-5 text-yellow-400 dark:text-yellow-300" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.92 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
<svg class="w-5 h-5 text-gray-500 dark:text-gray-600" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.92 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
</div>
</div>
</div>
<p class="text-zinc-300 dark:text-zinc-400 leading-relaxed text-sm mb-4">
"Absolutely love this product! The quality is outstanding, and it exceeded my expectations. It's a game-changer for my daily routine. Highly recommend for anyone looking for reliability and style."
</p>
<p class="text-xs text-zinc-400 dark:text-zinc-500 mt-2">Reviewed on <time datetime="2023-10-26">October 26, 2023</time></p>
</div>
<!-- Review Card 2 -->
<div class="bg-zinc-800 dark:bg-zinc-900 rounded-lg p-6 shadow-lg border border-yellow-700 dark:border-yellow-600 relative overflow-hidden transform transition-all duration-300 hover:scale-105 hover:shadow-yellow-500/20">
<div class="absolute -top-4 -right-4 w-24 h-24 bg-yellow-500 dark:bg-yellow-600 opacity-20 transform rotate-45 skew-x-12"></div>
<div class="flex items-center mb-4">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Reviewer Avatar" class="w-16 h-16 rounded-full border-2 border-yellow-500 dark:border-yellow-600 object-cover mr-4">
<div>
<p class="text-lg font-semibold text-white dark:text-gray-50">Mark T.</p>
<div class="flex mt-1">
<svg class="w-5 h-5 text-yellow-400 dark:text-yellow-300" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.92 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
<svg class="w-5 h-5 text-yellow-400 dark:text-yellow-300" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.92 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
<svg class="w-5 h-5 text-yellow-400 dark:text-yellow-300" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.92 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
<svg class="w-5 h-5 text-yellow-400 dark:text-yellow-300" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.92 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
<svg class="w-5 h-5 text-yellow-400 dark:text-yellow-300" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.92 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
</div>
</div>
</div>
<p class="text-zinc-300 dark:text-zinc-400 leading-relaxed text-sm mb-4">
"An absolute must-have! The craftsmanship is superb, and it feels incredibly durable. It has greatly improved my experience, and I've received many compliments. Worth every penny!"
</p>
<p class="text-xs text-zinc-400 dark:text-zinc-500 mt-2">Reviewed on <time datetime="2023-10-20">October 20, 2023</time></p>
</div>
<!-- Review Card 3 -->
<div class="bg-zinc-800 dark:bg-zinc-900 rounded-lg p-6 shadow-lg border border-yellow-700 dark:border-yellow-600 relative overflow-hidden transform transition-all duration-300 hover:scale-105 hover:shadow-yellow-500/20">
<div class="absolute -top-4 -right-4 w-24 h-24 bg-yellow-500 dark:bg-yellow-600 opacity-20 transform rotate-45 skew-x-12"></div>
<div class="flex items-center mb-4">
<img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Reviewer Avatar" class="w-16 h-16 rounded-full border-2 border-yellow-500 dark:border-yellow-600 object-cover mr-4">
<div>
<p class="text-lg font-semibold text-white dark:text-gray-50">Sophia L.</p>
<div class="flex mt-1">
<svg class="w-5 h-5 text-yellow-400 dark:text-yellow-300" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.92 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
<svg class="w-5 h-5 text-yellow-400 dark:text-yellow-300" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.92 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
<svg class="w-5 h-5 text-yellow-400 dark:text-yellow-300" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.92 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
<svg class="w-5 h-5 text-yellow-400 dark:text-yellow-300" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.92 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
<svg class="w-5 h-5 text-gray-500 dark:text-gray-600" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.92 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
</div>
</div>
</div>
<p class="text-zinc-300 dark:text-zinc-400 leading-relaxed text-sm mb-4">
"Impressed with the efficiency and sleek design. It fits perfectly into my lifestyle. The results are noticeable, and I'm very happy with my purchase. Don't hesitate if you're considering it!"
</p>
<p class="text-xs text-zinc-400 dark:text-zinc-500 mt-2">Reviewed on <time datetime="2023-10-15">October 15, 2023</time></p>
</div>
</div>
<div class="text-center mt-16">
<button class="px-8 py-3 rounded-full bg-yellow-600 dark:bg-yellow-500 text-white dark:text-gray-900 font-bold text-lg uppercase tracking-wide shadow-lg transform transition-transform duration-300 hover:scale-105 hover:bg-yellow-700 dark:hover:bg-yellow-400 focus:outline-none focus:ring-4 focus:ring-yellow-500 dark:focus:ring-yellow-400 focus:ring-opacity-75">
View More Reviews
</button>
</div>
</div>
</section>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 Avis sur les produits
Un composant complexe et attrayant d’avis sur les produits avec des micro-interactions, conçu pour les sites Web d’entreprise. Le composant présente un design réactif à thème sombre utilisant Tailwind CSS, incorporant des animations et un schéma de couleurs basé sur des couleurs analogues.
Composant Avis sur les produits
Un composant minimaliste d’avis sur les produits conçu à l’aide de Tailwind CSS, avec des effets réactifs et une prise en charge du thème sombre.