Component:
Testimonial Business Modern
Colors:
Description:
This carefully crafted Testimonial 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: Testimonial
@industry: Business
@style: Modern
@category: Social Proof, Feedback
@framework: HTML/CSS
@license: Free
-->
<style>
:root {
--slate-50: #f8fafc;
--slate-200: #e2e8f0;
--slate-600: #475569;
--slate-900: #0f172a;
--white: #ffffff;
}
/* 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 {
background-color: var(--slate-50);
padding: 2.5rem 1rem; /* py-10 px-4 */
}
.testimonials-header {
max-width: 48rem; /* max-w-3xl */
margin-left: auto;
margin-right: auto;
text-align: center;
margin-bottom: 2.5rem; /* mb-10 */
}
.testimonials-title {
font-size: 1.5rem; /* text-2xl */
font-weight: 700; /* font-bold */
color: var(--slate-900);
margin-bottom: 1rem; /* mb-4 */
}
.testimonials-description {
font-size: 1rem; /* text-base */
color: var(--slate-600);
margin-bottom: 1.5rem; /* mb-6 */
}
.testimonials-grid {
max-width: 64rem; /* max-w-5xl */
margin-left: auto;
margin-right: auto;
display: grid;
gap: 2rem; /* gap-8 */
}
.testimonial-card {
background-color: var(--white);
border-radius: 0.75rem; /* rounded-xl */
padding: 1.5rem; /* p-6 */
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* shadow-lg */
border: 1px solid var(--slate-200);
display: flex;
flex-direction: column;
height: 100%;
}
.testimonial-avatar {
width: 3rem; /* w-12 */
height: 3rem; /* h-12 */
border-radius: 9999px; /* rounded-full */
margin-bottom: 1rem; /* mb-4 */
margin-left: auto;
margin-right: auto;
}
.testimonial-quote {
flex: 1;
}
.testimonial-text {
color: var(--slate-900);
font-size: 1rem; /* text-base */
margin-bottom: 1rem; /* mb-4 */
}
.testimonial-author {
margin-top: 1rem; /* mt-4 */
text-align: center;
}
.testimonial-name {
display: block;
font-weight: 600; /* font-semibold */
color: var(--slate-900);
}
.testimonial-position {
display: block;
color: var(--slate-600);
font-size: 0.875rem; /* text-sm */
}
/* Responsive breakpoints */
@media (min-width: 640px) {
.testimonials-section {
padding-left: 1.5rem; /* sm:px-6 */
padding-right: 1.5rem; /* sm:px-6 */
}
.testimonials-title {
font-size: 1.875rem; /* sm:text-3xl */
}
}
@media (min-width: 768px) {
.testimonials-grid {
grid-template-columns: repeat(2, 1fr); /* md:grid-cols-2 */
}
}
@media (min-width: 1024px) {
.testimonials-section {
padding-left: 2rem; /* lg:px-8 */
padding-right: 2rem; /* lg:px-8 */
}
.testimonials-grid {
grid-template-columns: repeat(3, 1fr); /* lg:grid-cols-3 */
}
}
</style>
<section class="testimonials-section" aria-labelledby="testimonials-title">
<div class="testimonials-header">
<h2 id="testimonials-title" class="testimonials-title">What Our Clients Say</h2>
<p class="testimonials-description">Discover how leading businesses have transformed their operations and achieved outstanding results with our solutions.</p>
</div>
<div class="testimonials-grid">
<!-- Business image by Pexels (public domain) -->
<div class="testimonial-card">
<img src="https://landinggo.com/assets/img/stock/team/team-40x40-1.webp" alt="Photo of Olivia Carter, CEO at Finwise" class="testimonial-avatar" loading="lazy" width="40" height="40">
<blockquote class="testimonial-quote">
<p class="testimonial-text">"LandingGo helped us streamline our workflow and boost productivity by 40%. Their team is responsive, professional, and truly understands business needs."</p>
</blockquote>
<div class="testimonial-author">
<span class="testimonial-name">Olivia Carter</span>
<span class="testimonial-position">CEO, Finwise</span>
</div>
</div>
<!-- Business image by Pexels (public domain) -->
<div class="testimonial-card">
<img src="https://landinggo.com/assets/img/stock/team/team-40x40-2.webp" alt="Photo of Daniel Kim, Operations Director at Marketly" class="testimonial-avatar" loading="lazy" width="40" height="40">
<blockquote class="testimonial-quote">
<p class="testimonial-text">"The intuitive interface and robust features have made a significant impact on our daily operations. Highly recommended for any growing business."</p>
</blockquote>
<div class="testimonial-author">
<span class="testimonial-name">Daniel Kim</span>
<span class="testimonial-position">Operations Director, Marketly</span>
</div>
</div>
<!-- Business image by Pexels (public domain) -->
<div class="testimonial-card">
<img src="https://landinggo.com/assets/img/stock/team/team-40x40-3.webp" alt="Photo of Sophia Lee, Head of HR at InnovateX" class="testimonial-avatar" loading="lazy" width="40" height="40">
<blockquote class="testimonial-quote">
<p class="testimonial-text">"Exceptional support and seamless integration. Our team collaboration has never been better. LandingGo is a game changer!"</p>
</blockquote>
<div class="testimonial-author">
<span class="testimonial-name">Sophia Lee</span>
<span class="testimonial-position">Head of HR, InnovateX</span>
</div>
</div>
</div>
</section>
<!--
@type: Testimonial
@industry: Business
@style: Modern
@category: Social Proof, Feedback
@framework: Tailwind
@license: Free
-->
<section class="bg-slate-50 py-10 px-4 sm:px-6 lg:px-8 font-sans" aria-labelledby="testimonials-title">
<div class="max-w-3xl mx-auto text-center mb-10">
<h2 id="testimonials-title" class="text-2xl sm:text-3xl font-bold text-slate-900 mb-4">What Our Clients Say</h2>
<p class="text-base text-slate-600 mb-6">Discover how leading businesses have transformed their operations and achieved outstanding results with our solutions.</p>
</div>
<div class="max-w-5xl mx-auto grid gap-8 md:grid-cols-2 lg:grid-cols-3">
<!-- Business image by Pexels (public domain) -->
<div class="bg-white rounded-xl p-6 shadow-lg border border-slate-200 flex flex-col h-full">
<img src="https://landinggo.com/assets/img/stock/team/team-40x40-1.webp" alt="Photo of Olivia Carter, CEO at Finwise" class="w-12 h-12 rounded-full mb-4 mx-auto" loading="lazy" width="40" height="40">
<blockquote class="flex-1">
<p class="text-slate-900 text-base mb-4">“LandingGo helped us streamline our workflow and boost productivity by 40%. Their team is responsive, professional, and truly understands business needs.”</p>
</blockquote>
<div class="mt-4 text-center">
<span class="block font-semibold text-slate-900">Olivia Carter</span>
<span class="block text-slate-600 text-sm">CEO, Finwise</span>
</div>
</div>
<!-- Business image by Pexels (public domain) -->
<div class="bg-white rounded-xl p-6 shadow-lg border border-slate-200 flex flex-col h-full">
<img src="https://landinggo.com/assets/img/stock/team/team-40x40-2.webp" alt="Photo of Daniel Kim, Operations Director at Marketly" class="w-12 h-12 rounded-full mb-4 mx-auto" loading="lazy" width="40" height="40">
<blockquote class="flex-1">
<p class="text-slate-900 text-base mb-4">“The intuitive interface and robust features have made a significant impact on our daily operations. Highly recommended for any growing business.”</p>
</blockquote>
<div class="mt-4 text-center">
<span class="block font-semibold text-slate-900">Daniel Kim</span>
<span class="block text-slate-600 text-sm">Operations Director, Marketly</span>
</div>
</div>
<!-- Business image by Pexels (public domain) -->
<div class="bg-white rounded-xl p-6 shadow-lg border border-slate-200 flex flex-col h-full">
<img src="https://landinggo.com/assets/img/stock/team/team-40x40-3.webp" alt="Photo of Sophia Lee, Head of HR at InnovateX" class="w-12 h-12 rounded-full mb-4 mx-auto" loading="lazy" width="40" height="40">
<blockquote class="flex-1">
<p class="text-slate-900 text-base mb-4">“Exceptional support and seamless integration. Our team collaboration has never been better. LandingGo is a game changer!”</p>
</blockquote>
<div class="mt-4 text-center">
<span class="block font-semibold text-slate-900">Sophia Lee</span>
<span class="block text-slate-600 text-sm">Head of HR, InnovateX</span>
</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