Composant Avis sur les produits
Un composant d’avis sur les produits simple et réactif avec un design inspiré de l’agriculture biologique, des tons sépia/bruns, une prise en charge du mode sombre et adapté aux plateformes de divertissement/médias.
HTML Code
<div class="font-sans antialiased text-gray-800 bg-amber-50 dark:bg-stone-900 dark:text-gray-200 p-4 sm:p-6 lg:p-8 flex items-center justify-center min-h-screen">
<div class="w-full max-w-2xl bg-amber-100 dark:bg-stone-800 rounded-xl shadow-lg overflow-hidden border border-amber-200 dark:border-stone-700 mx-auto">
<div class="p-6 sm:p-8">
<h2 class="text-2xl sm:text-3xl font-serif text-amber-900 dark:text-amber-50 mb-6 text-center tracking-wide">What Our Viewers Say</h2>
<!-- Review 1 -->
<div class="bg-amber-50 dark:bg-stone-700 p-5 rounded-lg mb-6 last:mb-0 border border-amber-100 dark:border-stone-600 shadow-sm flex flex-col sm:flex-row items-start sm:items-center">
<img class="w-16 h-16 rounded-full object-cover mr-4 mb-4 sm:mb-0 border-2 border-amber-300 dark:border-amber-600 flex-shrink-0" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Alice Johnson">
<div class="flex-grow">
<div class="flex items-center mb-2">
<span class="text-amber-700 dark:text-amber-300 font-semibold mr-2">Alice J.</span>
<div class="flex text-amber-500 dark:text-amber-400">
<svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.277L12 18.896l-7.416 3.882 1.48-8.277-6.064-5.828 8.332-1.151z"/></svg>
<svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.277L12 18.896l-7.416 3.882 1.48-8.277-6.064-5.828 8.332-1.151z"/></svg>
<svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.277L12 18.896l-7.416 3.882 1.48-8.277-6.064-5.828 8.332-1.151z"/></svg>
<svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.277L12 18.896l-7.416 3.882 1.48-8.277-6.064-5.828 8.332-1.151z"/></svg>
<svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.277L12 18.896l-7.416 3.882 1.48-8.277-6.064-5.828 8.332-1.151z"/></svg>
</div>
</div>
<p class="text-stone-700 dark:text-stone-300 leading-relaxed text-sm lg:text-base">"Absolutely captivated! The storyline was so immersive, and the visuals were stunning. A truly unique experience that felt both fresh and familiar."</p>
</div>
</div>
<!-- Review 2 -->
<div class="bg-amber-50 dark:bg-stone-700 p-5 rounded-lg mb-6 last:mb-0 border border-amber-100 dark:border-stone-600 shadow-sm flex flex-col sm:flex-row items-start sm:items-center">
<img class="w-16 h-16 rounded-full object-cover mr-4 mb-4 sm:mb-0 border-2 border-amber-300 dark:border-amber-600 flex-shrink-0" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Mark Davis">
<div class="flex-grow">
<div class="flex items-center mb-2">
<span class="text-amber-700 dark:text-amber-300 font-semibold mr-2">Mark D.</span>
<div class="flex text-amber-500 dark:text-amber-400">
<svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.277L12 18.896l-7.416 3.882 1.48-8.277-6.064-5.828 8.332-1.151z"/></svg>
<svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.277L12 18.896l-7.416 3.882 1.48-8.277-6.064-5.828 8.332-1.151z"/></svg>
<svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.277L12 18.896l-7.416 3.882 1.48-8.277-6.064-5.828 8.332-1.151z"/></svg>
<svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.277L12 18.896l-7.416 3.882 1.48-8.277-6.064-5.828 8.332-1.151z"/></svg>
<svg class="w-4 h-4 fill-current text-amber-200 dark:text-stone-500" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.277L12 18.896l-7.416 3.882 1.48-8.277-6.064-5.828 8.332-1.151z"/></svg>
</div>
</div>
<p class="text-stone-700 dark:text-stone-300 leading-relaxed text-sm lg:text-base">"Great content for a relaxing evening. The pacing was perfect, and the character development was surprisingly deep. Definitely recommend it!"</p>
</div>
</div>
<!-- Review 3 -->
<div class="bg-amber-50 dark:bg-stone-700 p-5 rounded-lg last:mb-0 border border-amber-100 dark:border-stone-600 shadow-sm flex flex-col sm:flex-row items-start sm:items-center">
<img class="w-16 h-16 rounded-full object-cover mr-4 mb-4 sm:mb-0 border-2 border-amber-300 dark:border-amber-600 flex-shrink-0" src="https://randomuser.me/api/portraits/women/22.jpg" alt="Sophia Lee">
<div class="flex-grow">
<div class="flex items-center mb-2">
<span class="text-amber-700 dark:text-amber-300 font-semibold mr-2">Sophia L.</span>
<div class="flex text-amber-500 dark:text-amber-400">
<svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.277L12 18.896l-7.416 3.882 1.48-8.277-6.064-5.828 8.332-1.151z"/></svg>
<svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.277L12 18.896l-7.416 3.882 1.48-8.277-6.064-5.828 8.332-1.151z"/></svg>
<svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.277L12 18.896l-7.416 3.882 1.48-8.277-6.064-5.828 8.332-1.151z"/></svg>
<svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.277L12 18.896l-7.416 3.882 1.48-8.277-6.064-5.828 8.332-1.151z"/></svg>
<svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.277L12 18.896l-7.416 3.882 1.48-8.277-6.064-5.828 8.332-1.151z"/></svg>
</div>
</div>
<p class="text-stone-700 dark:text-stone-300 leading-relaxed text-sm lg:text-base">"A cinematic masterpiece! The production quality was top-notch, and the music score was simply breathtaking. It truly transported me to another world."</p>
</div>
</div>
</div>
</div>
</div>Composants associés
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.
Composant Avis sur les produits
Style rétro/vintage, palette de couleurs des tons de terre, complexité modérée Composant d’avis sur les produits avec un design réactif et prise en charge du thème sombre. Utilise Tailwind CSS pour le stylisme, picsum.photos pour les images de produits et randomuser.me pour les avatars. Pas de JavaScript.
Composant Avis sur les produits
Composant avec conception matérielle, effets réactifs et prise en charge du thème sombre.