Component:
Review E-commerce Modern
Colors:
Description:
This carefully crafted Review component is perfect for E-commerce landing pages, featuring a Modern design that looks great and converts well.
Simply copy the code with the "Copy" button, paste it into your project and customize the colors, text and images to match your brand.
<!--
@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> This is a Pro component
Access the full component collection
Get all premium components and focus on building your business
Only 42 early bird spots left 40% offUnlock for $29
(one-time payment)Early bird discount. Regular price $49
Premium components
Get access to all pro Tailwind CSS components. New ones added monthly
Save components
Save your favorite components to your account
Unlimited usage
Use components as often as you want
Landing page submissions
Get your landing pages featured on LandingGo and earn a
strong backlink
21 DR dofollow backlink from the main page