Playful_Ocean_Product_Reviews_Component_Real_Estate
Eine einfache, spielerische und fröhliche Komponente für Produktbewertungen, die für Immobilienplattformen entwickelt wurde. Es verfügt über abgerundete Elemente, ein lebendiges Farbschema in Ozean/Blau und volle Reaktionsfähigkeit mit Unterstützung des Dunkelmodus.
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>Verwandte Komponenten
Komponente "Produktbewertungen"
Eine einfache, monochromatische, skeuomorphe Produktbewertungskomponente, die für Fertigungs-/Industrieunternehmen entwickelt wurde und ein responsives Layout und Unterstützung für den Dunkelmodus bietet.
Komponente "Produktbewertungen"
Produktbewertungen Komponente mit Material Design, responsiven Effekten und Unterstützung für dunkle Themen.
Komponente "Produktbewertungen"
Eine Webkomponente, die Benutzerbewertungen für ein Produkt anzeigt, mit Mikrointeraktionen und Unterstützung für dunkle Designs mithilfe von Tailwind CSS.