Component:
Review Business Modern
Colors:
Description:
This carefully crafted Review component is perfect for Business 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: Business
@style: Modern
@category: Social Proof, Support, Feedback
@framework: HTML/CSS
@license: Free
-->
<style>
:root {
--color-slate-50: #f8fafc;
--color-slate-200: #e2e8f0;
--color-slate-300: #cbd5e1;
--color-slate-400: #94a3b8;
--color-slate-600: #475569;
--color-slate-900: #0f172a;
--color-indigo-600: #4f46e5;
--color-white: #ffffff;
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
--font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}
/* Reset */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: var(--font-sans);
}
/* Component styles */
.reviews-section {
background-color: var(--color-slate-50);
padding: 2.5rem 1rem;
font-family: var(--font-sans);
}
.reviews-container {
max-width: 48rem; /* 3xl = 48rem */
margin-left: auto;
margin-right: auto;
text-align: center;
margin-bottom: 2.5rem;
}
.reviews-title {
font-size: 1.5rem;
font-weight: 700;
color: var(--color-slate-900);
margin-bottom: 1rem;
}
.reviews-description {
font-size: 1rem;
color: var(--color-slate-600);
margin-bottom: 1.5rem;
}
.reviews-grid {
display: grid;
gap: 2rem;
max-width: 72rem; /* 6xl = 72rem */
margin-left: auto;
margin-right: auto;
}
.review-card {
background-color: var(--color-white);
border-radius: 0.75rem;
padding: 1.5rem;
box-shadow: var(--shadow-lg);
border: 1px solid var(--color-slate-200);
display: flex;
flex-direction: column;
height: 100%;
}
.reviewer {
display: flex;
align-items: center;
gap: 1rem;
margin-bottom: 1rem;
}
.reviewer-image {
width: 3rem;
height: 3rem;
border-radius: 9999px;
object-fit: cover;
border: 1px solid var(--color-slate-200);
}
.reviewer-name {
display: block;
color: var(--color-slate-900);
font-weight: 600;
}
.reviewer-position {
display: block;
color: var(--color-slate-600);
font-size: 0.875rem;
}
.stars {
display: flex;
align-items: center;
margin-bottom: 0.5rem;
}
.star {
width: 1.25rem;
height: 1.25rem;
}
.star-filled {
color: var(--color-indigo-600);
}
.star-empty {
color: var(--color-slate-300);
}
.review-text {
color: var(--color-slate-600);
font-size: 1rem;
margin-bottom: 1rem;
flex-grow: 1;
}
.review-date {
color: var(--color-slate-400);
font-size: 0.875rem;
}
/* Responsive breakpoints */
@media (min-width: 640px) {
.reviews-section {
padding-left: 2rem;
padding-right: 2rem;
}
.reviews-title {
font-size: 1.875rem;
}
.reviews-description {
font-size: 1.125rem;
}
}
@media (min-width: 768px) {
.reviews-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1024px) {
.reviews-section {
padding-left: 0;
padding-right: 0;
}
.reviews-grid {
grid-template-columns: repeat(3, 1fr);
}
}
</style>
<section class="reviews-section" aria-labelledby="reviews-title">
<div>
<h2 id="reviews-title" class="reviews-title">Latest Reviews</h2>
<p class="reviews-description">Real feedback from business leaders who trust our solutions to drive their success.</p>
</div>
<div class="reviews-grid">
<!-- Business image by Pexels -->
<div class="review-card">
<div class="reviewer">
<img src="https://landinggo.com/assets/img/stock/team/team-40x40-1.webp" alt="Sarah Lee, CEO at FinCorp" class="reviewer-image" width="40" height="40" loading="lazy">
<div>
<span class="reviewer-name">Sarah Lee</span>
<span class="reviewer-position">CEO, FinCorp</span>
</div>
</div>
<div class="stars" aria-label="5 out of 5 stars">
<svg class="star star-filled" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true"><title>5 stars</title><polygon points="10,1.5 12.59,7.36 18.9,7.64 13.97,11.97 15.54,18.09 10,14.5 4.46,18.09 6.03,11.97 1.1,7.64 7.41,7.36"/></svg>
<svg class="star star-filled" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true"><polygon points="10,1.5 12.59,7.36 18.9,7.64 13.97,11.97 15.54,18.09 10,14.5 4.46,18.09 6.03,11.97 1.1,7.64 7.41,7.36"/></svg>
<svg class="star star-filled" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true"><polygon points="10,1.5 12.59,7.36 18.9,7.64 13.97,11.97 15.54,18.09 10,14.5 4.46,18.09 6.03,11.97 1.1,7.64 7.41,7.36"/></svg>
<svg class="star star-filled" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true"><polygon points="10,1.5 12.59,7.36 18.9,7.64 13.97,11.97 15.54,18.09 10,14.5 4.46,18.09 6.03,11.97 1.1,7.64 7.41,7.36"/></svg>
<svg class="star star-filled" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true"><polygon points="10,1.5 12.59,7.36 18.9,7.64 13.97,11.97 15.54,18.09 10,14.5 4.46,18.09 6.03,11.97 1.1,7.64 7.41,7.36"/></svg>
</div>
<blockquote class="review-text">"LandingGo transformed our workflow. The intuitive interface and robust features helped us scale faster than we imagined."</blockquote>
<span class="review-date">March 2024</span>
</div>
<!-- Business image by Pexels -->
<div class="review-card">
<div class="reviewer">
<img src="https://landinggo.com/assets/img/stock/team/team-40x40-2.webp" alt="James Carter, COO at MarketWise" class="reviewer-image" width="40" height="40" loading="lazy">
<div>
<span class="reviewer-name">James Carter</span>
<span class="reviewer-position">COO, MarketWise</span>
</div>
</div>
<div class="stars" aria-label="4.5 out of 5 stars">
<svg class="star star-filled" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true"><title>5 stars</title><polygon points="10,1.5 12.59,7.36 18.9,7.64 13.97,11.97 15.54,18.09 10,14.5 4.46,18.09 6.03,11.97 1.1,7.64 7.41,7.36"/></svg>
<svg class="star star-filled" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true"><polygon points="10,1.5 12.59,7.36 18.9,7.64 13.97,11.97 15.54,18.09 10,14.5 4.46,18.09 6.03,11.97 1.1,7.64 7.41,7.36"/></svg>
<svg class="star star-filled" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true"><polygon points="10,1.5 12.59,7.36 18.9,7.64 13.97,11.97 15.54,18.09 10,14.5 4.46,18.09 6.03,11.97 1.1,7.64 7.41,7.36"/></svg>
<svg class="star star-filled" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true"><polygon points="10,1.5 12.59,7.36 18.9,7.64 13.97,11.97 15.54,18.09 10,14.5 4.46,18.09 6.03,11.97 1.1,7.64 7.41,7.36"/></svg>
<svg class="star star-empty" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true"><polygon points="10,1.5 12.59,7.36 18.9,7.64 13.97,11.97 15.54,18.09 10,14.5 4.46,18.09 6.03,11.97 1.1,7.64 7.41,7.36"/></svg>
</div>
<blockquote class="review-text">"The support team is outstanding. We saw a 30% increase in productivity after switching to LandingGo."</blockquote>
<span class="review-date">February 2024</span>
</div>
<!-- Business image by Pexels -->
<div class="review-card">
<div class="reviewer">
<img src="https://landinggo.com/assets/img/stock/team/team-40x40-3.webp" alt="Priya Patel, Head of Operations at BizGrowth" class="reviewer-image" width="40" height="40" loading="lazy">
<div>
<span class="reviewer-name">Priya Patel</span>
<span class="reviewer-position">Head of Operations, BizGrowth</span>
</div>
</div>
<div class="stars" aria-label="5 out of 5 stars">
<svg class="star star-filled" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true"><title>5 stars</title><polygon points="10,1.5 12.59,7.36 18.9,7.64 13.97,11.97 15.54,18.09 10,14.5 4.46,18.09 6.03,11.97 1.1,7.64 7.41,7.36"/></svg>
<svg class="star star-filled" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true"><polygon points="10,1.5 12.59,7.36 18.9,7.64 13.97,11.97 15.54,18.09 10,14.5 4.46,18.09 6.03,11.97 1.1,7.64 7.41,7.36"/></svg>
<svg class="star star-filled" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true"><polygon points="10,1.5 12.59,7.36 18.9,7.64 13.97,11.97 15.54,18.09 10,14.5 4.46,18.09 6.03,11.97 1.1,7.64 7.41,7.36"/></svg>
<svg class="star star-filled" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true"><polygon points="10,1.5 12.59,7.36 18.9,7.64 13.97,11.97 15.54,18.09 10,14.5 4.46,18.09 6.03,11.97 1.1,7.64 7.41,7.36"/></svg>
<svg class="star star-filled" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true"><polygon points="10,1.5 12.59,7.36 18.9,7.64 13.97,11.97 15.54,18.09 10,14.5 4.46,18.09 6.03,11.97 1.1,7.64 7.41,7.36"/></svg>
</div>
<blockquote class="review-text">"Exceptional value and reliability. Our team collaboration has never been smoother."</blockquote>
<span class="review-date">January 2024</span>
</div>
</div>
</section>
<!--
@type: Review
@industry: Business
@style: Modern
@category: Social Proof, Support, Feedback
@framework: Tailwind
@license: Free
-->
<section class="bg-slate-50 py-10 px-4 sm:px-8 lg:px-0 font-sans" aria-labelledby="reviews-title">
<div class="max-w-3xl mx-auto text-center mb-10">
<h2 id="reviews-title" class="text-2xl sm:text-3xl font-bold text-slate-900 mb-4">Latest Reviews</h2>
<p class="text-base sm:text-lg text-slate-600 mb-6">Real feedback from business leaders who trust our solutions to drive their success.</p>
</div>
<div class="grid gap-8 md:grid-cols-2 lg:grid-cols-3 max-w-6xl mx-auto">
<!-- Business image by Pexels -->
<div class="bg-white rounded-xl p-6 shadow-lg border border-slate-200 flex flex-col h-full">
<div class="flex items-center gap-4 mb-4">
<img src="https://landinggo.com/assets/img/stock/team/team-40x40-1.webp" alt="Sarah Lee, CEO at FinCorp" class="w-12 h-12 rounded-full object-cover border border-slate-200" width="40" height="40" loading="lazy">
<div>
<span class="block text-slate-900 font-semibold">Sarah Lee</span>
<span class="block text-slate-600 text-sm">CEO, FinCorp</span>
</div>
</div>
<div class="flex items-center mb-2" aria-label="5 out of 5 stars">
<svg class="w-5 h-5 text-indigo-600" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true"><title>5 stars</title><polygon points="10,1.5 12.59,7.36 18.9,7.64 13.97,11.97 15.54,18.09 10,14.5 4.46,18.09 6.03,11.97 1.1,7.64 7.41,7.36"/></svg>
<svg class="w-5 h-5 text-indigo-600" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true"><polygon points="10,1.5 12.59,7.36 18.9,7.64 13.97,11.97 15.54,18.09 10,14.5 4.46,18.09 6.03,11.97 1.1,7.64 7.41,7.36"/></svg>
<svg class="w-5 h-5 text-indigo-600" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true"><polygon points="10,1.5 12.59,7.36 18.9,7.64 13.97,11.97 15.54,18.09 10,14.5 4.46,18.09 6.03,11.97 1.1,7.64 7.41,7.36"/></svg>
<svg class="w-5 h-5 text-indigo-600" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true"><polygon points="10,1.5 12.59,7.36 18.9,7.64 13.97,11.97 15.54,18.09 10,14.5 4.46,18.09 6.03,11.97 1.1,7.64 7.41,7.36"/></svg>
<svg class="w-5 h-5 text-indigo-600" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true"><polygon points="10,1.5 12.59,7.36 18.9,7.64 13.97,11.97 15.54,18.09 10,14.5 4.46,18.09 6.03,11.97 1.1,7.64 7.41,7.36"/></svg>
</div>
<blockquote class="text-slate-600 text-base mb-4 flex-1">“LandingGo transformed our workflow. The intuitive interface and robust features helped us scale faster than we imagined.”</blockquote>
<span class="text-slate-400 text-sm">March 2024</span>
</div>
<!-- Business image by Pexels -->
<div class="bg-white rounded-xl p-6 shadow-lg border border-slate-200 flex flex-col h-full">
<div class="flex items-center gap-4 mb-4">
<img src="https://landinggo.com/assets/img/stock/team/team-40x40-2.webp" alt="James Carter, COO at MarketWise" class="w-12 h-12 rounded-full object-cover border border-slate-200" width="40" height="40" loading="lazy">
<div>
<span class="block text-slate-900 font-semibold">James Carter</span>
<span class="block text-slate-600 text-sm">COO, MarketWise</span>
</div>
</div>
<div class="flex items-center mb-2" aria-label="4.5 out of 5 stars">
<svg class="w-5 h-5 text-indigo-600" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true"><title>5 stars</title><polygon points="10,1.5 12.59,7.36 18.9,7.64 13.97,11.97 15.54,18.09 10,14.5 4.46,18.09 6.03,11.97 1.1,7.64 7.41,7.36"/></svg>
<svg class="w-5 h-5 text-indigo-600" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true"><polygon points="10,1.5 12.59,7.36 18.9,7.64 13.97,11.97 15.54,18.09 10,14.5 4.46,18.09 6.03,11.97 1.1,7.64 7.41,7.36"/></svg>
<svg class="w-5 h-5 text-indigo-600" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true"><polygon points="10,1.5 12.59,7.36 18.9,7.64 13.97,11.97 15.54,18.09 10,14.5 4.46,18.09 6.03,11.97 1.1,7.64 7.41,7.36"/></svg>
<svg class="w-5 h-5 text-indigo-600" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true"><polygon points="10,1.5 12.59,7.36 18.9,7.64 13.97,11.97 15.54,18.09 10,14.5 4.46,18.09 6.03,11.97 1.1,7.64 7.41,7.36"/></svg>
<svg class="w-5 h-5 text-slate-300" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true"><polygon points="10,1.5 12.59,7.36 18.9,7.64 13.97,11.97 15.54,18.09 10,14.5 4.46,18.09 6.03,11.97 1.1,7.64 7.41,7.36"/></svg>
</div>
<blockquote class="text-slate-600 text-base mb-4 flex-1">“The support team is outstanding. We saw a 30% increase in productivity after switching to LandingGo.”</blockquote>
<span class="text-slate-400 text-sm">February 2024</span>
</div>
<!-- Business image by Pexels -->
<div class="bg-white rounded-xl p-6 shadow-lg border border-slate-200 flex flex-col h-full">
<div class="flex items-center gap-4 mb-4">
<img src="https://landinggo.com/assets/img/stock/team/team-40x40-3.webp" alt="Priya Patel, Head of Operations at BizGrowth" class="w-12 h-12 rounded-full object-cover border border-slate-200" width="40" height="40" loading="lazy">
<div>
<span class="block text-slate-900 font-semibold">Priya Patel</span>
<span class="block text-slate-600 text-sm">Head of Operations, BizGrowth</span>
</div>
</div>
<div class="flex items-center mb-2" aria-label="5 out of 5 stars">
<svg class="w-5 h-5 text-indigo-600" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true"><title>5 stars</title><polygon points="10,1.5 12.59,7.36 18.9,7.64 13.97,11.97 15.54,18.09 10,14.5 4.46,18.09 6.03,11.97 1.1,7.64 7.41,7.36"/></svg>
<svg class="w-5 h-5 text-indigo-600" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true"><polygon points="10,1.5 12.59,7.36 18.9,7.64 13.97,11.97 15.54,18.09 10,14.5 4.46,18.09 6.03,11.97 1.1,7.64 7.41,7.36"/></svg>
<svg class="w-5 h-5 text-indigo-600" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true"><polygon points="10,1.5 12.59,7.36 18.9,7.64 13.97,11.97 15.54,18.09 10,14.5 4.46,18.09 6.03,11.97 1.1,7.64 7.41,7.36"/></svg>
<svg class="w-5 h-5 text-indigo-600" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true"><polygon points="10,1.5 12.59,7.36 18.9,7.64 13.97,11.97 15.54,18.09 10,14.5 4.46,18.09 6.03,11.97 1.1,7.64 7.41,7.36"/></svg>
<svg class="w-5 h-5 text-indigo-600" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true"><polygon points="10,1.5 12.59,7.36 18.9,7.64 13.97,11.97 15.54,18.09 10,14.5 4.46,18.09 6.03,11.97 1.1,7.64 7.41,7.36"/></svg>
</div>
<blockquote class="text-slate-600 text-base mb-4 flex-1">“Exceptional value and reliability. Our team collaboration has never been smoother.”</blockquote>
<span class="text-slate-400 text-sm">January 2024</span>
</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