Component:
Review Product Light
Colors:
Description:
This carefully crafted Review component is perfect for Product landing pages, featuring a Light 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: Product
@style: Light
@category: Social Proof, Support, Feedback
@framework: HTML/CSS
@license: Free
-->
<style>
:root {
/* Colors */
--color-white: #ffffff;
--color-gray-50: #f9fafb;
--color-gray-200: #e5e7eb;
--color-gray-600: #4b5563;
--color-gray-800: #1f2937;
--color-blue-100: #dbeafe;
--color-blue-300: #93c5fd;
--color-blue-600: #2563eb;
--color-blue-700: #1d4ed8;
--color-yellow-400: #facc15;
/* Spacing */
--spacing-1: 0.25rem;
--spacing-4: 1rem;
--spacing-6: 1.5rem;
--spacing-8: 2rem;
--spacing-12: 3rem;
--spacing-16: 4rem;
--spacing-20: 5rem;
/* Container */
--container-max-width: 80rem; /* max-w-7xl */
}
/* Reset */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
/* Base Styles */
body {
font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
line-height: 1.5;
}
/* Component Styles */
.review-section {
background-color: var(--color-gray-50);
padding: var(--spacing-12) var(--spacing-4);
}
.review-container {
max-width: var(--container-max-width);
margin: 0 auto;
}
.review-header {
text-align: center;
}
.review-title {
font-size: 1.875rem;
font-weight: 500;
color: var(--color-gray-800);
}
.review-description {
margin-top: var(--spacing-4);
font-size: 1rem;
color: var(--color-gray-600);
}
.review-grid {
margin-top: var(--spacing-12);
display: grid;
gap: var(--spacing-8);
grid-template-columns: 1fr;
}
.review-card {
background-color: var(--color-white);
border: 1px solid var(--color-gray-200);
border-radius: 1rem;
padding: var(--spacing-8);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.review-card-header {
display: flex;
align-items: center;
justify-content: space-between;
}
.customer-info {
display: flex;
align-items: center;
}
.customer-image {
height: 2.5rem;
width: 2.5rem;
border-radius: 9999px;
}
.customer-details {
margin-left: var(--spacing-4);
}
.customer-name {
font-size: 1rem;
font-weight: 500;
color: var(--color-gray-800);
}
.customer-role {
font-size: 0.875rem;
color: var(--color-gray-600);
}
.rating {
display: flex;
align-items: center;
}
.star-icon {
height: 1.25rem;
width: 1.25rem;
color: var(--color-yellow-400);
}
.rating-value {
margin-left: var(--spacing-1);
font-size: 0.875rem;
color: var(--color-gray-600);
}
.review-content {
margin-top: var(--spacing-6);
font-size: 1rem;
color: var(--color-gray-600);
}
.review-actions {
margin-top: var(--spacing-12);
text-align: center;
}
.action-buttons {
display: inline-flex;
align-items: center;
gap: var(--spacing-4);
}
.review-button {
background-color: var(--color-white);
border: 1px solid var(--color-blue-300);
color: var(--color-gray-800);
font-size: 1rem;
font-weight: 500;
padding: var(--spacing-4) var(--spacing-6);
border-radius: 0.5rem;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
transition: all 0.15s ease-in-out;
cursor: pointer;
}
.review-button:hover {
background-color: var(--color-gray-50);
}
.review-button:focus {
outline: none;
box-shadow: 0 0 0 2px var(--color-blue-100);
}
.review-link {
color: var(--color-blue-600);
font-weight: 500;
text-decoration: none;
transition: color 0.15s ease-in-out;
}
.review-link:hover {
color: var(--color-blue-700);
}
/* Responsive Breakpoints */
@media (min-width: 640px) {
.review-section {
padding: var(--spacing-16) var(--spacing-6);
}
.review-title {
font-size: 2.25rem;
}
.review-description {
font-size: 1.125rem;
}
.review-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1024px) {
.review-section {
padding: var(--spacing-20) var(--spacing-8);
}
.review-grid {
grid-template-columns: repeat(3, 1fr);
}
}
</style>
<section class="review-section" aria-labelledby="reviews-heading">
<div class="review-container">
<div class="review-header">
<h2 id="reviews-heading" class="review-title">
Trusted by thousands of satisfied customers
</h2>
<p class="review-description">
See what our customers have to say about their experience with our product
</p>
</div>
<div class="review-grid">
<!-- Review Card 1 -->
<div class="review-card">
<div class="review-card-header">
<div class="customer-info">
<img class="customer-image" src="https://landinggo.com/assets/img/stock/testimonials/customer-40x40-1.webp" alt="Sarah Thompson" />
<div class="customer-details">
<h3 class="customer-name">Sarah Thompson</h3>
<p class="customer-role">Product Designer</p>
</div>
</div>
<div class="rating" aria-label="5 out of 5 stars">
<svg class="star-icon" fill="currentColor" viewBox="0 0 20 20">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
</svg>
<span class="rating-value">5.0</span>
</div>
</div>
<p class="review-content">
"The interface is incredibly intuitive and the features are exactly what we needed. It has streamlined our workflow significantly."
</p>
</div>
<!-- Review Card 2 -->
<div class="review-card">
<div class="review-card-header">
<div class="customer-info">
<img class="customer-image" src="https://landinggo.com/assets/img/stock/testimonials/customer-40x40-2.webp" alt="Michael Chen" />
<div class="customer-details">
<h3 class="customer-name">Michael Chen</h3>
<p class="customer-role">Tech Lead</p>
</div>
</div>
<div class="rating" aria-label="4.8 out of 5 stars">
<svg class="star-icon" fill="currentColor" viewBox="0 0 20 20">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
</svg>
<span class="rating-value">4.8</span>
</div>
</div>
<p class="review-content">
"Implementation was smooth and the support team was incredibly helpful. The ROI has been remarkable."
</p>
</div>
<!-- Review Card 3 -->
<div class="review-card">
<div class="review-card-header">
<div class="customer-info">
<img class="customer-image" src="https://landinggo.com/assets/img/stock/testimonials/customer-40x40-3.webp" alt="Emily Rodriguez" />
<div class="customer-details">
<h3 class="customer-name">Emily Rodriguez</h3>
<p class="customer-role">Marketing Director</p>
</div>
</div>
<div class="rating" aria-label="4.9 out of 5 stars">
<svg class="star-icon" fill="currentColor" viewBox="0 0 20 20">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
</svg>
<span class="rating-value">4.9</span>
</div>
</div>
<p class="review-content">
"The analytics features have given us invaluable insights into our customer behavior. Highly recommended!"
</p>
</div>
</div>
<div class="review-actions">
<div class="action-buttons">
<button class="review-button">
Read more reviews
</button>
<a href="#" class="review-link">
View all customer stories →
</a>
</div>
</div>
</div>
</section>
<!--
@type: Review
@industry: Product
@style: Light
@category: Social Proof, Support, Feedback
@framework: Tailwind
@license: Free
-->
<section class="bg-gray-50 py-12 sm:py-16 lg:py-20" aria-labelledby="reviews-heading">
<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
<div class="text-center">
<h2 id="reviews-heading" class="text-3xl font-medium text-gray-800 sm:text-4xl">
Trusted by thousands of satisfied customers
</h2>
<p class="mt-4 text-base text-gray-600 sm:text-lg">
See what our customers have to say about their experience with our product
</p>
</div>
<div class="mt-12 grid gap-8 sm:grid-cols-2 lg:grid-cols-3">
<!-- Review Card 1 -->
<div class="bg-white border border-gray-200 rounded-2xl p-8 shadow-sm">
<div class="flex items-center justify-between">
<div class="flex items-center">
<!-- Customer image by Figcomponents (CC BY 4.0) -->
<img class="h-10 w-10 rounded-full" src="https://landinggo.com/assets/img/stock/testimonials/customer-40x40-1.webp" alt="Sarah Thompson" />
<div class="ml-4">
<h3 class="text-base font-medium text-gray-800">Sarah Thompson</h3>
<p class="text-sm text-gray-600">Product Designer</p>
</div>
</div>
<div class="flex items-center" aria-label="5 out of 5 stars">
<svg class="h-5 w-5 text-yellow-400" fill="currentColor" viewBox="0 0 20 20">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
</svg>
<span class="ml-1 text-sm text-gray-600">5.0</span>
</div>
</div>
<p class="mt-6 text-base text-gray-600">
"The interface is incredibly intuitive and the features are exactly what we needed. It has streamlined our workflow significantly."
</p>
</div>
<!-- Review Card 2 -->
<div class="bg-white border border-gray-200 rounded-2xl p-8 shadow-sm">
<div class="flex items-center justify-between">
<div class="flex items-center">
<!-- Customer image by Figcomponents (CC BY 4.0) -->
<img class="h-10 w-10 rounded-full" src="https://landinggo.com/assets/img/stock/testimonials/customer-40x40-2.webp" alt="Michael Chen" />
<div class="ml-4">
<h3 class="text-base font-medium text-gray-800">Michael Chen</h3>
<p class="text-sm text-gray-600">Tech Lead</p>
</div>
</div>
<div class="flex items-center" aria-label="4.8 out of 5 stars">
<svg class="h-5 w-5 text-yellow-400" fill="currentColor" viewBox="0 0 20 20">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
</svg>
<span class="ml-1 text-sm text-gray-600">4.8</span>
</div>
</div>
<p class="mt-6 text-base text-gray-600">
"Implementation was smooth and the support team was incredibly helpful. The ROI has been remarkable."
</p>
</div>
<!-- Review Card 3 -->
<div class="bg-white border border-gray-200 rounded-2xl p-8 shadow-sm">
<div class="flex items-center justify-between">
<div class="flex items-center">
<!-- Customer image by Figcomponents (CC BY 4.0) -->
<img class="h-10 w-10 rounded-full" src="https://landinggo.com/assets/img/stock/testimonials/customer-40x40-3.webp" alt="Emily Rodriguez" />
<div class="ml-4">
<h3 class="text-base font-medium text-gray-800">Emily Rodriguez</h3>
<p class="text-sm text-gray-600">Marketing Director</p>
</div>
</div>
<div class="flex items-center" aria-label="4.9 out of 5 stars">
<svg class="h-5 w-5 text-yellow-400" fill="currentColor" viewBox="0 0 20 20">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
</svg>
<span class="ml-1 text-sm text-gray-600">4.9</span>
</div>
</div>
<p class="mt-6 text-base text-gray-600">
"The analytics features have given us invaluable insights into our customer behavior. Highly recommended!"
</p>
</div>
</div>
<div class="mt-12 text-center">
<div class="inline-flex items-center space-x-4">
<button class="bg-white border border-blue-300 text-gray-800 font-medium px-6 py-3 rounded-lg hover:bg-gray-50 shadow-sm transition duration-150 ease-in-out focus:outline-none focus:ring-2 focus:ring-blue-100">
Read more reviews
</button>
<a href="#" class="text-blue-600 hover:text-blue-700 font-medium">
View all customer stories →
</a>
</div>
</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