<!--
@type: Review
@industry: E-commerce
@style: Modern
@category: Social Proof, Support, Feedback
@framework: Tailwind
@license: Free
-->
<section class="w-full py-12 md:py-24 bg-white">
<div class="max-w-7xl mx-auto px-4 text-center">
<div class="max-w-4xl mx-auto space-y-6">
<h2 class="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl md:text-5xl">What Our Customers Say</h2>
<p class="text-lg text-gray-600 md:text-xl">Hear directly from our satisfied shoppers about their StyleHub experience.</p>
<div class="flex items-center justify-center gap-4">
<div class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round" class="lucide lucide-star h-6 w-6 text-orange-500 fill-orange-500">
<polygon
points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2">
</polygon>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="lucide lucide-star h-6 w-6 text-orange-500 fill-orange-500">
<polygon
points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2">
</polygon>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="lucide lucide-star h-6 w-6 text-orange-500 fill-orange-500">
<polygon
points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2">
</polygon>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="lucide lucide-star h-6 w-6 text-orange-500 fill-orange-500">
<polygon
points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2">
</polygon>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="lucide lucide-star h-6 w-6 text-gray-300">
<polygon
points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2">
</polygon>
</svg>
</div>
<span class="text-2xl font-bold text-gray-900">4.8</span><span class="text-gray-600">(4 Reviews)</span>
</div>
</div>
<div class="mt-12 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<div class="bg-gray-50 p-8 rounded-xl shadow-md flex flex-col items-start text-left transition-all duration-300 hover:shadow-lg hover:scale-[1.02]">
<div class="flex items-center mb-4">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="lucide lucide-star h-5 h-5 text-orange-500 fill-orange-500">
<polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2">
</polygon>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="lucide lucide-star h-5 h-5 text-orange-500 fill-orange-500">
<polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2">
</polygon>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="lucide lucide-star h-5 h-5 text-orange-500 fill-orange-500">
<polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2">
</polygon>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="lucide lucide-star h-5 h-5 text-orange-500 fill-orange-500">
<polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2">
</polygon>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="lucide lucide-star h-5 h-5 text-orange-500 fill-orange-500">
<polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2">
</polygon>
</svg>
</div>
<h3 class="text-xl font-semibold text-gray-900 mb-2">Absolutely Love My New Dress!</h3>
<p class="text-gray-600 flex-grow mb-4 line-clamp-4">
The quality is fantastic, and it fits perfectly. I received so many compliments. Shipping was fast too!
</p>
<div class="flex items-center gap-4 w-full">
<img alt="Sarah M.'s avatar" loading="lazy" width="56" height="56" decoding="async" class="rounded-full object-cover border-2 border-orange-100"
src="https://landinggo.com/assets/img/stock/testimonials/customer-40x40-3.webp">
<div class="flex-grow">
<p class="font-semibold text-gray-900">Sarah M.</p>
<p class="text-sm text-gray-500">July 28, 2025</p>
</div>
</div>
</div>
<div class="bg-gray-50 p-8 rounded-xl shadow-md flex flex-col items-start text-left transition-all duration-300 hover:shadow-lg hover:scale-[1.02]">
<div class="flex items-center mb-4">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="lucide lucide-star h-5 h-5 text-orange-500 fill-orange-500">
<polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2">
</polygon>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="lucide lucide-star h-5 h-5 text-orange-500 fill-orange-500">
<polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2">
</polygon>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="lucide lucide-star h-5 h-5 text-orange-500 fill-orange-500">
<polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2">
</polygon>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="lucide lucide-star h-5 h-5 text-orange-500 fill-orange-500">
<polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2">
</polygon>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-star h-5 h-5 text-gray-300">
<polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2">
</polygon>
</svg>
</div>
<h3 class="text-xl font-semibold text-gray-900 mb-2">Great Quality, Minor Delay</h3>
<p class="text-gray-600 flex-grow mb-4 line-clamp-4">The watch is stunning and feels very premium. There was a
slight delay in delivery, but customer service was helpful.</p>
<div class="flex items-center gap-4 w-full">
<img alt="David P.'s avatar" loading="lazy" width="56" height="56" decoding="async" class="rounded-full object-cover border-2 border-orange-100"
src="https://landinggo.com/assets/img/stock/testimonials/customer-40x40-2.webp">
<div class="flex-grow">
<p class="font-semibold text-gray-900">David P.</p>
<p class="text-sm text-gray-500">July 25, 2025</p>
</div>
</div>
</div>
<div class="bg-gray-50 p-8 rounded-xl shadow-md flex flex-col items-start text-left transition-all duration-300 hover:shadow-lg hover:scale-[1.02]">
<div class="flex items-center mb-4">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="lucide lucide-star h-5 h-5 text-orange-500 fill-orange-500">
<polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2">
</polygon>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="lucide lucide-star h-5 h-5 text-orange-500 fill-orange-500">
<polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2">
</polygon>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="lucide lucide-star h-5 h-5 text-orange-500 fill-orange-500">
<polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2">
</polygon>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="lucide lucide-star h-5 h-5 text-orange-500 fill-orange-500">
<polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2">
</polygon>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="lucide lucide-star h-5 h-5 text-orange-500 fill-orange-500">
<polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2">
</polygon>
</svg>
</div>
<h3 class="text-xl font-semibold text-gray-900 mb-2">My Go-To for Electronics!</h3>
<p class="text-gray-600 flex-grow mb-4 line-clamp-4">Always find the latest gadgets here at competitive prices.
The headphones are exactly what I needed.</p>
<div class="flex items-center gap-4 w-full"><img alt="Jessica L.'s avatar" loading="lazy" width="56" height="56"
decoding="async" class="rounded-full object-cover border-2 border-orange-100"
src="https://landinggo.com/assets/img/stock/testimonials/customer-40x40-1.webp">
<div class="flex-grow">
<p class="font-semibold text-gray-900">Jessica L.</p>
<p class="text-sm text-gray-500">July 22, 2025</p>
</div>
</div>
</div>
</div>
<div class="flex flex-col gap-4 min-[400px]:flex-row mt-12 justify-center">
<button data-slot="button"
class="inline-flex items-center justify-center px-6 py-3 border border-transparent rounded-lg text-lg font-semibold text-white bg-orange-500 hover:bg-orange-600 transition duration-150 ease-in-out cursor-pointer hover:shadow-lg">
Write a Review
</button>
<button data-slot="button"
class="inline-flex items-center justify-center px-6 py-3 border-2 border-gray-200 rounded-lg text-lg font-semibold text-gray-700 hover:bg-gray-50 transition duration-150 ease-in-out cursor-pointer hover:shadow-lg">
View All Reviews
</button>
</div>
</div>
</section>
