Playful_Ocean_Product_Reviews_Component_Real_Estate
Un componente de reseñas de productos simple, lúdico y alegre diseñado para plataformas inmobiliarias. Cuenta con elementos redondeados, una vibrante combinación de colores océano/azul y una capacidad de respuesta total con soporte para modo oscuro.
Código HTML
<section class="p-4 sm:p-6 md:p-8 bg-blue-50 dark:bg-gray-900 font-sans">
<div class="max-w-4xl mx-auto bg-white dark:bg-gray-800 rounded-3xl shadow-xl overflow-hidden">
<div class="p-6 sm:px-8 sm:py-7 bg-gradient-to-r from-blue-400 to-sky-500 dark:from-blue-700 dark:to-sky-800 text-white text-center rounded-t-3xl">
<h2 class="text-2xl sm:text-3xl font-extrabold mb-2">What Our Clients Say!</h2>
<p class="text-blue-100 dark:text-blue-200 text-lg sm:text-xl font-medium">Hear from happy property owners.</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 p-6 sm:p-8">
<!-- Review 1 -->
<div class="bg-blue-50 dark:bg-gray-700 p-5 rounded-2xl shadow-md transform transition-transform duration-300 hover:scale-[1.02] hover:shadow-lg">
<div class="flex items-center mb-4">
<img class="w-14 h-14 rounded-full border-4 border-sky-300 dark:border-sky-500 mr-4" src="https://randomuser.me/api/portraits/women/65.jpg" alt="Client Avatar">
<div>
<p class="font-bold text-lg text-blue-900 dark:text-blue-100">Sarah J.</p>
<p class="text-sm text-blue-600 dark:text-blue-300">Home Buyer</p>
</div>
</div>
<div class="flex mb-3">
<svg class="w-5 h-5 text-yellow-400 fill-current mr-1" 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.916-7.416 3.916 1.48-8.279-6.064-5.828 8.332-1.151z"/></svg>
<svg class="w-5 h-5 text-yellow-400 fill-current mr-1" 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.916-7.416 3.916 1.48-8.279-6.064-5.828 8.332-1.151z"/></svg>
<svg class="w-5 h-5 text-yellow-400 fill-current mr-1" 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.916-7.416 3.916 1.48-8.279-6.064-5.828 8.332-1.151z"/></svg>
<svg class="w-5 h-5 text-yellow-400 fill-current mr-1" 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.916-7.416 3.916 1.48-8.279-6.064-5.828 8.332-1.151z"/></svg>
<svg class="w-5 h-5 text-yellow-400 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.279-7.416-3.916-7.416 3.916 1.48-8.279-6.064-5.828 8.332-1.151z"/></svg>
</div>
<p class="text-blue-800 dark:text-blue-200 leading-relaxed">"I found my dream home thanks to their amazing team! The process was so easy and the support was incredible. Highly recommend for anyone looking to buy or sell property."</p>
</div>
<!-- Review 2 -->
<div class="bg-blue-50 dark:bg-gray-700 p-5 rounded-2xl shadow-md transform transition-transform duration-300 hover:scale-[1.02] hover:shadow-lg">
<div class="flex items-center mb-4">
<img class="w-14 h-14 rounded-full border-4 border-sky-300 dark:border-sky-500 mr-4" src="https://randomuser.me/api/portraits/men/45.jpg" alt="Client Avatar">
<div>
<p class="font-bold text-lg text-blue-900 dark:text-blue-100">Mark T.</p>
<p class="text-sm text-blue-600 dark:text-blue-300">Property Investor</p>
</div>
</div>
<div class="flex mb-3">
<svg class="w-5 h-5 text-yellow-400 fill-current mr-1" 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.916-7.416 3.916 1.48-8.279-6.064-5.828 8.332-1.151z"/></svg>
<svg class="w-5 h-5 text-yellow-400 fill-current mr-1" 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.916-7.416 3.916 1.48-8.279-6.064-5.828 8.332-1.151z"/></svg>
<svg class="w-5 h-5 text-yellow-400 fill-current mr-1" 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.916-7.416 3.916 1.48-8.279-6.064-5.828 8.332-1.151z"/></svg>
<svg class="w-5 h-5 text-yellow-400 fill-current mr-1" 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.916-7.416 3.916 1.48-8.279-6.064-5.828 8.332-1.151z"/></svg>
<svg class="w-5 h-5 text-yellow-400 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.279-7.416-3.916-7.416 3.916 1.48-8.279-6.064-5.828 8.332-1.151z"/></svg>
</div>
<p class="text-blue-800 dark:text-blue-200 leading-relaxed">"Excellent service! Their insights into the current market were invaluable, helping me secure a fantastic investment property. Professional, responsive, and truly experts in real estate."</p>
</div>
<!-- Add more reviews here if needed -->
</div>
<div class="p-6 sm:px-8 sm:py-7 bg-blue-100 dark:bg-gray-900 border-t border-blue-200 dark:border-gray-700 text-center rounded-b-3xl">
<p class="text-blue-700 dark:text-blue-300 text-base sm:text-lg">Ready to find your perfect place? <span class="font-semibold">Contact us today!</span></p>
</div>
</div>
</section>Componentes relacionados
Componente de reseñas de productos
Un componente simple de reseñas de productos diseñado en estilo Material Design con un esquema de color en escala de grises.
Componente de reseñas de productos de juegos
Un componente de reseñas de productos divertido y vibrante para sitios web de juegos, con elementos redondeados, colores de alta saturación y una interfaz rica con calificaciones de estrellas, avatares de usuario, texto de revisión y botones de me gusta / no me gusta. Totalmente receptivo con soporte para modo oscuro.
Componente de reseñas de productos Skeuomorphic - Azul océano
Un componente de revisión de productos de complejidad moderada diseñado con un estilo esqueuomórfico, que utiliza tonos océano/azul para fines comerciales/corporativos. Cuenta con diseño responsivo, soporte para modo oscuro y elementos interactivos.