Componentes de reseñas de productos - Bauhaus Rainbow Gradient
Un componente de reseñas de productos simple y funcional con un diseño inspirado en la Bauhaus y un esquema de colores degradados del arco iris, adecuado para consultoría / servicios. Totalmente receptivo con soporte para modo oscuro.
Código HTML
<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>Componentes relacionados
Componente de reseñas de productos: tonos joya divertidos con enfoque en reservas
Un componente de revisión de productos complejo y lúdico con un enfoque en la reserva. Cuenta con colores en tono joya, elementos redondeados y capacidad de respuesta total con soporte para modo oscuro.
Componente de reseñas de productos
Componente de reseñas de productos receptivo con diseño brutalista, combinación de colores monocromática, complejidad compleja para el comercio electrónico, con soporte de tema oscuro
Componente de reseñas de productos
Un componente web que muestra las reseñas de los usuarios sobre un producto, con microinteracciones y compatibilidad con temas oscuros mediante Tailwind CSS.