Composant - Bauhaus Rainbow Gradient
Un composant simple et fonctionnel d’avis sur les produits avec un design inspiré du Bauhaus et une palette de couleurs arc-en-ciel, adapté au conseil/services. Entièrement réactif avec prise en charge du mode sombre.
HTML Code
<div class="font-sans antialiased text-gray-900 dark:text-gray-100 bg-gray-50 dark:bg-gray-900 min-h-screen py-8 px-4 sm:px-6 lg:px-8">
<div class="max-w-3xl mx-auto bg-white dark:bg-gray-800 shadow-lg rounded-lg overflow-hidden border border-gray-200 dark:border-gray-700">
<div class="bg-gradient-to-r from-red-500 via-yellow-500 to-green-500 p-6 sm:p-8">
<h2 class="text-2xl sm:text-3xl font-bold text-white uppercase tracking-wider text-center drop-shadow-md">Client Testimonials</h2>
</div>
<div class="p-6 sm:p-8 space-y-8">
<!-- Review 1 -->
<div class="flex flex-col sm:flex-row items-center sm:items-start gap-4 sm:gap-6 bg-gray-100 dark:bg-gray-700 p-5 rounded-md shadow-sm border border-gray-200 dark:border-gray-600">
<img class="w-16 h-16 sm:w-20 sm:h-20 rounded-full object-cover border-2 border-green-500 shrink-0" src="https://randomuser.me/api/portraits/women/68.jpg" alt="Client Avatar">
<div class="text-center sm:text-left flex-grow">
<div class="flex justify-center sm:justify-start items-center mb-2">
<svg class="w-5 h-5 text-yellow-400 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279-7.416-3.908-7.416 3.908 1.48-8.279-6.064-5.828 8.332-1.151z"/></svg>
<svg class="w-5 h-5 text-yellow-400 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279-7.416-3.908-7.416 3.908 1.48-8.279-6.064-5.828 8.332-1.151z"/></svg>
<svg class="w-5 h-5 text-yellow-400 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279-7.416-3.908-7.416 3.908 1.48-8.279-6.064-5.828 8.332-1.151z"/></svg>
<svg class="w-5 h-5 text-yellow-400 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279-7.416-3.908-7.416 3.908 1.48-8.279-6.064-5.828 8.332-1.151z"/></svg>
<svg class="w-5 h-5 text-gray-400 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279-7.416-3.908-7.416 3.908 1.48-8.279-6.064-5.828 8.332-1.151z"/></svg>
</div>
<p class="text-lg dark:text-gray-200 leading-relaxed italic mb-3">"The strategic guidance provided by this team was instrumental in our recent growth. Highly recommend their services!"</p>
<p class="font-semibold text-blue-600 dark:text-blue-400">Jane Doe</p>
<p class="text-sm text-gray-500 dark:text-gray-400">CEO, Tech Solutions Inc.</p>
</div>
</div>
<!-- Review 2 -->
<div class="flex flex-col sm:flex-row items-center sm:items-start gap-4 sm:gap-6 bg-gray-100 dark:bg-gray-700 p-5 rounded-md shadow-sm border border-gray-200 dark:border-gray-600">
<img class="w-16 h-16 sm:w-20 sm:h-20 rounded-full object-cover border-2 border-purple-500 shrink-0" src="https://randomuser.me/api/portraits/men/45.jpg" alt="Client Avatar">
<div class="text-center sm:text-left flex-grow">
<div class="flex justify-center sm:justify-start items-center mb-2">
<svg class="w-5 h-5 text-yellow-400 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279-7.416-3.908-7.416 3.908 1.48-8.279-6.064-5.828 8.332-1.151z"/></svg>
<svg class="w-5 h-5 text-yellow-400 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279-7.416-3.908-7.416 3.908 1.48-8.279-6.064-5.828 8.332-1.151z"/></svg>
<svg class="w-5 h-5 text-yellow-400 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279-7.416-3.908-7.416 3.908 1.48-8.279-6.064-5.828 8.332-1.151z"/></svg>
<svg class="w-5 h-5 text-yellow-400 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279-7.416-3.908-7.416 3.908 1.48-8.279-6.064-5.828 8.332-1.151z"/></svg>
<svg class="w-5 h-5 text-yellow-400 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279-7.416-3.908-7.416 3.908 1.48-8.279-6.064-5.828 8.332-1.151z"/></svg>
</div>
<p class="text-lg dark:text-gray-200 leading-relaxed italic mb-3">"Exceptional clarity and actionable insights. Our operations are far more efficient now. Five stars!"</p>
<p class="font-semibold text-blue-600 dark:text-blue-400">John Smith</p>
<p class="text-sm text-gray-500 dark:text-gray-400">Founder, Global Ventures</p>
</div>
</div>
<!-- Review 3 -->
<div class="flex flex-col sm:flex-row items-center sm:items-start gap-4 sm:gap-6 bg-gray-100 dark:bg-gray-700 p-5 rounded-md shadow-sm border border-gray-200 dark:border-gray-600">
<img class="w-16 h-16 sm:w-20 sm:h-20 rounded-full object-cover border-2 border-pink-500 shrink-0" src="https://randomuser.me/api/portraits/women/5.jpg" alt="Client Avatar">
<div class="text-center sm:text-left flex-grow">
<div class="flex justify-center sm:justify-start items-center mb-2">
<svg class="w-5 h-5 text-yellow-400 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279-7.416-3.908-7.416 3.908 1.48-8.279-6.064-5.828 8.332-1.151z"/></svg>
<svg class="w-5 h-5 text-yellow-400 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279-7.416-3.908-7.416 3.908 1.48-8.279-6.064-5.828 8.332-1.151z"/></svg>
<svg class="w-5 h-5 text-yellow-400 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279-7.416-3.908-7.416 3.908 1.48-8.279-6.064-5.828 8.332-1.151z"/></svg>
<svg class="w-5 h-5 text-yellow-400 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279-7.416-3.908-7.416 3.908 1.48-8.279-6.064-5.828 8.332-1.151z"/></svg>
<svg class="w-5 h-5 text-gray-400 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279-7.416-3.908-7.416 3.908 1.48-8.279-6.064-5.828 8.332-1.151z"/></svg>
</div>
<p class="text-lg dark:text-gray-200 leading-relaxed italic mb-3">"Professional, insightful, and truly transformative for our business strategy. A pleasure to work with!"</p>
<p class="font-semibold text-blue-600 dark:text-blue-400">Sarah Chen</p>
<p class="text-sm text-gray-500 dark:text-gray-400">Director, Creative Agency</p>
</div>
</div>
</div>
<div class="bg-gradient-to-r from-blue-500 via-indigo-500 to-purple-500 p-6 sm:p-8 text-center">
<p class="text-white text-md sm:text-lg font-medium">Ready to transform your business? <a href="#" class="underline font-bold hover:text-yellow-200 transition-colors">Contact us today!</a></p>
</div>
</div>
</div>Composants associés
Composant d’avis sur les produits de jeu
Il s’agit d’un composant ludique et dynamique d’avis sur les produits pour les sites Web de jeux, avec des éléments arrondis, des couleurs à haute saturation et une interface riche avec des étoiles, des avatars d’utilisateurs, du texte d’avis et des boutons J’aime/Je n’aime pas. Entièrement réactif avec prise en charge du mode sombre.
Skeuomorphic Avis sur le produit Composant - Bleu océan
Un composant d’évaluation de produit de complexité modérée conçu avec un style skeuomorphe, utilisant des tons océan/bleu à des fins commerciales/d’entreprise. Il présente un design réactif, une prise en charge du mode sombre et des éléments interactifs.
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.