Playful_Ocean_Product_Reviews_Component_Real_Estate
Un composant simple, ludique et joyeux d’avis sur les produits conçu pour les plateformes immobilières. Il présente des éléments arrondis, une palette de couleurs océan/bleu vibrantes et une réactivité totale avec la prise en charge du mode sombre.
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>Composants associés
Composant Avis sur les produits
Composant d’avis sur les produits réactifs avec un design brutal, une palette de couleurs monochromatique, une complexité complexe pour le commerce électronique, avec prise en charge du thème sombre
Composant Avis sur les produits
Composant avec conception matérielle, effets réactifs et prise en charge du thème sombre.
Composant Avis sur les produits
Composant utilisant Tailwind CSS avec le style Neumorphism, les effets réactifs et la prise en charge du thème sombre. Aucun code JavaScript n’est inclus. Des images et des avatars de substitution sont utilisés.