Component:
Testimonial SaaS Minimal
Colors:
Description:
This carefully crafted Testimonial component is perfect for SaaS landing pages, featuring a Minimal 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: Testimonial
@industry: SaaS
@style: Minimal
@category: Social Proof, Feedback
@framework: HTML/CSS
@license: Free
-->
<style>
/* CSS Custom Properties */
:root {
--color-white: #ffffff;
--color-gray-200: #e5e7eb;
--color-gray-600: #4b5563;
--color-gray-900: #111827;
--color-blue-500: #3b82f6;
--color-blue-600: #2563eb;
--color-blue-700: #1d4ed8;
}
/* Reset */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}
/* Component Styles */
.testimonials-section {
padding: 3rem 0;
background-color: var(--color-white);
}
.container {
max-width: 80rem;
margin: 0 auto;
padding: 0 1rem;
}
.section-header {
max-width: 42rem;
margin: 0 auto 3rem;
text-align: center;
}
.section-title {
font-size: 1.875rem;
font-weight: 600;
color: var(--color-gray-900);
margin-bottom: 1rem;
}
.section-description {
margin-top: 1rem;
font-size: 1.125rem;
line-height: 2rem;
color: var(--color-gray-600);
}
/* Featured Testimonial */
.featured-testimonial {
max-width: 56rem;
margin: 0 auto 4rem;
}
.testimonial-card {
position: relative;
background-color: var(--color-white);
border: 1px solid var(--color-gray-200);
border-radius: 1rem;
padding: 2rem;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}
.customer-info {
display: flex;
align-items: center;
gap: 1rem;
margin-bottom: 1.5rem;
}
.customer-image {
width: 3rem;
height: 3rem;
border-radius: 9999px;
}
.customer-name {
font-weight: 600;
color: var(--color-gray-900);
}
.customer-title {
font-size: 0.875rem;
color: var(--color-gray-600);
}
.testimonial-quote {
font-size: 1.25rem;
color: var(--color-gray-900);
line-height: 2rem;
margin-bottom: 1.5rem;
}
.rating {
display: flex;
align-items: center;
gap: 1rem;
}
.stars {
display: flex;
color: var(--color-blue-600);
}
.star-icon {
width: 1.25rem;
height: 1.25rem;
}
.verified-badge {
font-size: 0.875rem;
color: var(--color-gray-600);
}
/* Grid Testimonials */
.testimonials-grid {
display: grid;
grid-template-columns: 1fr;
gap: 1.5rem;
}
.grid-testimonial {
border-radius: 0.5rem;
border: 1px solid var(--color-gray-200);
padding: 1.5rem;
background-color: var(--color-white);
}
.grid-quote {
margin-bottom: 1rem;
font-size: 1rem;
color: var(--color-gray-900);
}
.grid-customer-image {
width: 2.5rem;
height: 2.5rem;
border-radius: 9999px;
}
.grid-customer-name {
font-weight: 500;
color: var(--color-gray-900);
}
/* CTA Section */
.cta-section {
margin-top: 4rem;
text-align: center;
}
.cta-button {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.75rem 1.5rem;
font-size: 1rem;
font-weight: 500;
color: var(--color-white);
background-color: var(--color-blue-600);
border: 1px solid transparent;
border-radius: 0.375rem;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
text-decoration: none;
transition: background-color 0.2s;
}
.cta-button:hover {
background-color: var(--color-blue-700);
}
.cta-button:focus {
outline: none;
box-shadow: 0 0 0 2px var(--color-white), 0 0 0 4px var(--color-blue-500);
}
.cta-icon {
margin-left: 0.5rem;
margin-right: -0.25rem;
width: 1.25rem;
height: 1.25rem;
}
.cta-note {
margin-top: 1rem;
font-size: 0.875rem;
color: var(--color-gray-600);
}
/* Responsive Breakpoints */
@media (min-width: 640px) {
.testimonials-section {
padding: 4rem 0;
}
.container {
padding: 0 1.5rem;
}
.section-title {
font-size: 2.25rem;
}
.testimonials-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1024px) {
.testimonials-section {
padding: 5rem 0;
}
.container {
padding: 0 2rem;
}
.testimonials-grid {
grid-template-columns: repeat(3, 1fr);
}
}
</style>
<section class="testimonials-section" aria-labelledby="testimonials-title">
<div class="container">
<!-- Section Header -->
<div class="section-header">
<h2 id="testimonials-title" class="section-title">
Trusted by Industry Leaders
</h2>
<p class="section-description">
See what our customers are saying about their experience with our platform
</p>
</div>
<!-- Featured Testimonial -->
<div class="featured-testimonial">
<figure class="testimonial-card">
<blockquote>
<div class="customer-info">
<img class="customer-image" src="https://landinggo.com/assets/img/stock/testimonials/customer-40x40-1.webp" alt="Sarah Thompson" width="48" height="48" loading="lazy">
<div>
<div class="customer-name">Sarah Thompson</div>
<div class="customer-title">CTO at TechFlow Solutions</div>
</div>
</div>
<p class="testimonial-quote">
"This platform has completely transformed how we handle our workflow automation. The ROI has been incredible - we've seen a 40% increase in team productivity within just three months of implementation."
</p>
<div class="rating">
<div class="stars" aria-hidden="true">
<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>
<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>
<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>
<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>
<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>
</div>
<p class="verified-badge">Verified Customer</p>
</div>
</blockquote>
</figure>
</div>
<!-- Grid of Testimonials -->
<div class="testimonials-grid">
<!-- Testimonial 1 -->
<figure class="grid-testimonial">
<blockquote class="grid-quote">
<p>"The analytics dashboard is incredibly intuitive. It's helped us make data-driven decisions faster than ever before."</p>
</blockquote>
<figcaption class="customer-info">
<img class="grid-customer-image" src="https://landinggo.com/assets/img/stock/testimonials/customer-40x40-2.webp" alt="Michael Chen" width="40" height="40" loading="lazy">
<div>
<div class="grid-customer-name">Michael Chen</div>
<div class="customer-title">Product Manager</div>
</div>
</figcaption>
</figure>
<!-- Testimonial 2 -->
<figure class="grid-testimonial">
<blockquote class="grid-quote">
<p>"Setup was a breeze, and the customer support team has been exceptional whenever we needed help."</p>
</blockquote>
<figcaption class="customer-info">
<img class="grid-customer-image" src="https://landinggo.com/assets/img/stock/testimonials/customer-40x40-3.webp" alt="Emily Rodriguez" width="40" height="40" loading="lazy">
<div>
<div class="grid-customer-name">Emily Rodriguez</div>
<div class="customer-title">Operations Director</div>
</div>
</figcaption>
</figure>
<!-- Testimonial 3 -->
<figure class="grid-testimonial">
<blockquote class="grid-quote">
<p>"The automation features have eliminated hours of manual work. It's been a game-changer for our team."</p>
</blockquote>
<figcaption class="customer-info">
<img class="grid-customer-image" src="https://landinggo.com/assets/img/stock/testimonials/customer-40x40-4.webp" alt="David Kim" width="40" height="40" loading="lazy">
<div>
<div class="grid-customer-name">David Kim</div>
<div class="customer-title">Tech Lead</div>
</div>
</figcaption>
</figure>
</div>
<!-- CTA Section -->
<div class="cta-section">
<a href="#" class="cta-button" aria-label="Start free trial">
Start Free Trial
<svg class="cta-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd" />
</svg>
</a>
<p class="cta-note">14-day free trial • No credit card required</p>
</div>
</div>
</section>
<!--
@type: Testimonial
@industry: SaaS
@style: Minimal
@category: Social Proof, Feedback
@framework: Tailwind
@license: Free
-->
<section class="py-12 sm:py-16 lg:py-20 bg-white" aria-labelledby="testimonials-title">
<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
<!-- Section Header -->
<div class="mx-auto max-w-2xl text-center mb-12">
<h2 id="testimonials-title" class="text-3xl font-semibold text-gray-900 sm:text-4xl mb-4">
Trusted by Industry Leaders
</h2>
<p class="mt-4 text-lg leading-8 text-gray-600">
See what our customers are saying about their experience with our platform
</p>
</div>
<!-- Featured Testimonial -->
<div class="mx-auto max-w-4xl mb-16">
<figure class="relative bg-white border border-gray-200 rounded-2xl p-8 shadow-sm">
<blockquote class="relative">
<div class="flex items-center gap-4 mb-6">
<!-- Customer image by Pexels (CC0) -->
<img class="h-12 w-12 rounded-full" src="https://landinggo.com/assets/img/stock/testimonials/customer-40x40-1.webp" alt="Sarah Thompson" width="48" height="48" loading="lazy">
<div>
<div class="font-semibold text-gray-900">Sarah Thompson</div>
<div class="text-sm text-gray-600">CTO at TechFlow Solutions</div>
</div>
</div>
<p class="text-xl text-gray-900 leading-8 mb-6">
"This platform has completely transformed how we handle our workflow automation. The ROI has been incredible - we've seen a 40% increase in team productivity within just three months of implementation."
</p>
<div class="flex items-center gap-4">
<div class="flex text-blue-600" aria-hidden="true">
<svg class="h-5 w-5" 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>
<svg class="h-5 w-5" 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>
<svg class="h-5 w-5" 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>
<svg class="h-5 w-5" 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>
<svg class="h-5 w-5" 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>
</div>
<p class="text-sm text-gray-600">Verified Customer</p>
</div>
</blockquote>
</figure>
</div>
<!-- Grid of Testimonials -->
<div class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
<!-- Testimonial 1 -->
<figure class="rounded-lg border border-gray-200 p-6 bg-white">
<blockquote class="mb-4">
<p class="text-base text-gray-900">"The analytics dashboard is incredibly intuitive. It's helped us make data-driven decisions faster than ever before."</p>
</blockquote>
<figcaption class="flex items-center gap-4">
<!-- Customer image by Pexels (CC0) -->
<img class="h-10 w-10 rounded-full" src="https://landinggo.com/assets/img/stock/testimonials/customer-40x40-2.webp" alt="Michael Chen" width="40" height="40" loading="lazy">
<div>
<div class="font-medium text-gray-900">Michael Chen</div>
<div class="text-sm text-gray-600">Product Manager</div>
</div>
</figcaption>
</figure>
<!-- Testimonial 2 -->
<figure class="rounded-lg border border-gray-200 p-6 bg-white">
<blockquote class="mb-4">
<p class="text-base text-gray-900">"Setup was a breeze, and the customer support team has been exceptional whenever we needed help."</p>
</blockquote>
<figcaption class="flex items-center gap-4">
<!-- Customer image by Pexels (CC0) -->
<img class="h-10 w-10 rounded-full" src="https://landinggo.com/assets/img/stock/testimonials/customer-40x40-3.webp" alt="Emily Rodriguez" width="40" height="40" loading="lazy">
<div>
<div class="font-medium text-gray-900">Emily Rodriguez</div>
<div class="text-sm text-gray-600">Operations Director</div>
</div>
</figcaption>
</figure>
<!-- Testimonial 3 -->
<figure class="rounded-lg border border-gray-200 p-6 bg-white">
<blockquote class="mb-4">
<p class="text-base text-gray-900">"The automation features have eliminated hours of manual work. It's been a game-changer for our team."</p>
</blockquote>
<figcaption class="flex items-center gap-4">
<!-- Customer image by Pexels (CC0) -->
<img class="h-10 w-10 rounded-full" src="https://landinggo.com/assets/img/stock/testimonials/customer-40x40-4.webp" alt="David Kim" width="40" height="40" loading="lazy">
<div>
<div class="font-medium text-gray-900">David Kim</div>
<div class="text-sm text-gray-600">Tech Lead</div>
</div>
</figcaption>
</figure>
</div>
<!-- CTA Section -->
<div class="mt-16 text-center">
<a href="#" class="inline-flex items-center justify-center px-6 py-3 text-base font-medium text-white bg-blue-600 border border-transparent rounded-md shadow-sm hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500" aria-label="Start free trial">
Start Free Trial
<svg class="ml-2 -mr-1 h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd" />
</svg>
</a>
<p class="mt-4 text-sm text-gray-600">14-day free trial • No credit card required</p>
</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