<!--
@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>
