Composant Avis sur les produits
Un composant simple, monochrome et skeuomorphe conçu pour les entreprises manufacturières/industrielles, avec une mise en page réactive et une prise en charge du mode sombre.
HTML Code
<div class="p-4 sm:p-6 md:p-8 bg-gray-200 dark:bg-gray-800 font-sans">
<div class="max-w-3xl mx-auto bg-gray-100 dark:bg-gray-900 shadow-xl rounded-lg border-2 border-gray-300 dark:border-gray-700
p-6 sm:p-8 md:p-10
transform skew-y-1 rotate-1 scale-95
hover:scale-100 hover:rotate-0 hover:skew-y-0 hover:shadow-2xl
transition-all duration-300 ease-in-out
relative overflow-hidden
before:content-[''] before:absolute before:inset-0 before:bg-gradient-to-br before:from-gray-300/50 before:to-transparent before:via-gray-100/30 dark:before:from-gray-700/50 dark:before:to-transparent dark:before:via-gray-900/30
after:content-[''] after:absolute after:bottom-0 after:left-0 after:right-0 after:h-12 after:bg-gradient-to-t after:from-gray-200/80 after:to-transparent dark:after:from-gray-800/80 dark:after:to-transparent">
<div class="relative z-10 flex items-center justify-between mb-6">
<h2 class="text-2xl sm:text-3xl font-bold text-gray-800 dark:text-gray-100 drop-shadow-md">Customer Feedback</h2>
<span class="px-3 py-1 bg-gray-300 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded-full text-sm font-semibold shadow-inner-lg shadow-gray-400/50 dark:shadow-gray-950/50">Total: 124 reviews</span>
</div>
<div class="grid grid-cols-1 gap-6 sm:gap-8 relative z-10">
<!-- Review 1 -->
<div class="bg-gray-200 dark:bg-gray-800 p-5 rounded-lg shadow-inner-lg shadow-gray-400/50 dark:shadow-gray-950/50
border border-gray-300 dark:border-gray-700
transform translate-x-1 translate-y-1 rotate-1
hover:translate-x-0 hover:translate-y-0 hover:rotate-0
transition-all duration-200 ease-in-out">
<div class="flex items-start mb-4">
<img class="w-12 h-12 rounded-full border-2 border-gray-400 dark:border-gray-600 shadow-md mr-4" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Reviewer Avatar">
<div>
<p class="font-semibold text-gray-800 dark:text-gray-100">John D.</p>
<div class="flex mt-1">
<svg class="w-5 h-5 text-yellow-500 fill-current" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>
<svg class="w-5 h-5 text-yellow-500 fill-current" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>
<svg class="w-5 h-5 text-yellow-500 fill-current" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>
<svg class="w-5 h-5 text-yellow-500 fill-current" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>
<svg class="w-5 h-5 text-gray-400 fill-current" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>
</div>
</div>
</div>
<p class="text-gray-700 dark:text-gray-300 leading-relaxed">
"The XYZ-1000 machine has significantly boosted our production efficiency. Robust and reliable, it handles extreme loads with ease. A truly industrial-grade product."
</p>
<p class="text-xs text-gray-500 dark:text-gray-400 mt-3">Reviewed on: Oct 24, 2023</p>
</div>
<!-- Review 2 -->
<div class="bg-gray-200 dark:bg-gray-800 p-5 rounded-lg shadow-inner-lg shadow-gray-400/50 dark:shadow-gray-950/50
border border-gray-300 dark:border-gray-700
transform translate-x-1 translate-y-1 rotate-1
hover:translate-x-0 hover:translate-y-0 hover:rotate-0
transition-all duration-200 ease-in-out">
<div class="flex items-start mb-4">
<img class="w-12 h-12 rounded-full border-2 border-gray-400 dark:border-gray-600 shadow-md mr-4" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Reviewer Avatar">
<div>
<p class="font-semibold text-gray-800 dark:text-gray-100">Maria S.</p>
<div class="flex mt-1">
<svg class="w-5 h-5 text-yellow-500 fill-current" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>
<svg class="w-5 h-5 text-yellow-500 fill-current" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>
<svg class="w-5 h-5 text-yellow-500 fill-current" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>
<svg class="w-5 h-5 text-yellow-500 fill-current" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>
<svg class="w-5 h-5 text-yellow-500 fill-current" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>
</div>
</div>
</div>
<p class="text-gray-700 dark:text-gray-300 leading-relaxed">
"Exceptional quality and precision from their industrial-grade components. Their team provided excellent support throughout the integration process. Highly recommend for critical applications."
</p>
<p class="text-xs text-gray-500 dark:text-gray-400 mt-3">Reviewed on: Sep 10, 2023</p>
</div>
</div>
<button class="relative z-10 mt-8 w-full py-3 px-6
bg-gray-300 dark:bg-gray-700 text-gray-800 dark:text-gray-200 font-bold rounded-lg
shadow-lg shadow-gray-400/50 dark:shadow-gray-950/50
border border-gray-400 dark:border-gray-600
transform active:translate-y-0.5 active:shadow-none
hover:bg-gray-400 hover:dark:bg-gray-600
transition-colors duration-200 ease-in-out
text-lg sm:text-xl
before:content-[''] before:absolute before:inset-0 before:rounded-lg before:bg-gradient-to-br before:from-gray-300/30 before:to-transparent dark:before:from-gray-700/30 dark:before:to-transparent">
Load More Reviews
</button>
</div>
</div>Composants associés
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
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 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é.