Playful_Ocean_Product_Reviews_Component_Real_Estate
A simple, playful, and cheerful product reviews component designed for real estate platforms. It features rounded elements, a vibrant ocean/blue color scheme, and full responsiveness with dark mode support.
HTML Code
<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>Related Components
Product Reviews Component
A responsive product reviews component with an industrial, raw material design, muted retro/vintage color palette, and dark mode support, suitable for weather/climate applications.
Gaming Product Reviews Component
A playful and vibrant product reviews component for gaming websites, featuring rounded elements, high-saturation colors, and a rich interface with star ratings, user avatars, review text, and like/dislike buttons. Fully responsive with dark mode support.
Product Reviews Component
Product Reviews Component using Tailwind CSS with Neumorphism style, responsive effects, and dark theme support. No JavaScript code is included. Placeholder images and avatars are used.