Component:
Quote SaaS Minimal
Colors:
Description:
This carefully crafted Quote 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: Quote
@industry: SaaS
@style: Minimal
@category: Social Proof
@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;
--spacing-4: 1rem;
--spacing-6: 1.5rem;
--spacing-8: 2rem;
--spacing-12: 3rem;
--font-size-sm: 0.875rem;
--font-size-base: 1rem;
--font-size-lg: 1.125rem;
--line-height-8: 2rem;
--rounded-lg: 0.5rem;
--rounded-full: 9999px;
}
/* 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 */
.quote-section {
background-color: var(--color-white);
padding: var(--spacing-12) var(--spacing-4);
}
.quote-container {
max-width: 48rem; /* 3xl = 768px = 48rem */
margin-left: auto;
margin-right: auto;
}
.quote-card {
position: relative;
background-color: var(--color-white);
border: 1px solid var(--color-gray-200);
border-radius: var(--rounded-lg);
padding: var(--spacing-6);
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}
.quote-mark {
position: absolute;
top: var(--spacing-6);
left: var(--spacing-6);
color: var(--color-gray-200);
pointer-events: none;
}
.quote-mark svg {
width: 2rem;
height: 2rem;
}
.quote-content {
position: relative;
margin-top: var(--spacing-8);
}
.quote-text {
font-size: var(--font-size-lg);
color: var(--color-gray-900);
line-height: var(--line-height-8);
font-weight: 500;
margin-bottom: var(--spacing-4);
}
.quote-footer {
margin-top: var(--spacing-6);
}
.author-container {
display: flex;
align-items: center;
gap: var(--spacing-4);
}
.author-image {
width: 2.5rem;
height: 2.5rem;
border-radius: var(--rounded-full);
}
.author-name {
font-size: var(--font-size-base);
font-weight: 500;
color: var(--color-gray-900);
}
.author-title {
font-size: var(--font-size-sm);
color: var(--color-gray-600);
}
/* Responsive breakpoints */
@media (min-width: 640px) {
.quote-section {
padding-left: var(--spacing-6);
padding-right: var(--spacing-6);
}
}
@media (min-width: 1024px) {
.quote-section {
padding-left: var(--spacing-8);
padding-right: var(--spacing-8);
}
}
</style>
<section class="quote-section" aria-labelledby="testimonial-heading">
<div class="quote-container">
<!-- Quote container -->
<figure class="quote-card">
<!-- Quote mark decoration -->
<div class="quote-mark" aria-hidden="true">
<svg fill="currentColor" viewBox="0 0 24 24">
<path d="M14.017 21v-7.391c0-5.704 3.731-9.57 8.983-10.609l.995 2.151c-2.432.917-3.995 3.638-3.995 5.849h4v10h-9.983zm-14.017 0v-7.391c0-5.704 3.748-9.57 9-10.609l.996 2.151c-2.433.917-3.996 3.638-3.996 5.849h3.983v10h-9.983z"/>
</svg>
</div>
<!-- Quote content -->
<blockquote class="quote-content">
<p class="quote-text">
"CloudScale has transformed how we manage our infrastructure. The automated scaling and real-time analytics have reduced our operational costs by 40%. It's not just a tool – it's become an integral part of our tech stack."
</p>
<!-- Author info -->
<footer class="quote-footer">
<div class="author-container">
<!-- Customer testimonial image by Pexels (Free license) -->
<img src="https://landinggo.com/assets/img/stock/testimonials/customer-40x40-1.webp"
alt="Sarah Chen"
class="author-image"
loading="lazy"
width="40"
height="40">
<div>
<div class="author-name">Sarah Chen</div>
<div class="author-title">CTO at TechForward</div>
</div>
</div>
</footer>
</blockquote>
</figure>
</div>
</section>
<!--
@type: Quote
@industry: SaaS
@style: Minimal
@category: Social Proof
@framework: Tailwind
@license: Free
-->
<section class="bg-white py-12 px-4 sm:px-6 lg:px-8" aria-labelledby="testimonial-heading">
<div class="max-w-3xl mx-auto">
<!-- Quote container -->
<figure class="relative bg-white border border-gray-200 rounded-lg p-6 shadow-sm">
<!-- Quote mark decoration -->
<div class="absolute top-6 left-6 text-gray-200 pointer-events-none" aria-hidden="true">
<svg class="w-8 h-8" fill="currentColor" viewBox="0 0 24 24">
<path d="M14.017 21v-7.391c0-5.704 3.731-9.57 8.983-10.609l.995 2.151c-2.432.917-3.995 3.638-3.995 5.849h4v10h-9.983zm-14.017 0v-7.391c0-5.704 3.748-9.57 9-10.609l.996 2.151c-2.433.917-3.996 3.638-3.996 5.849h3.983v10h-9.983z"/>
</svg>
</div>
<!-- Quote content -->
<blockquote class="relative mt-8">
<p class="text-lg text-gray-900 leading-8 font-medium mb-4">
"CloudScale has transformed how we manage our infrastructure. The automated scaling and real-time analytics have reduced our operational costs by 40%. It's not just a tool – it's become an integral part of our tech stack."
</p>
<!-- Author info -->
<footer class="mt-6">
<div class="flex items-center space-x-4">
<!-- Customer testimonial image by Pexels (Free license) -->
<img src="https://landinggo.com/assets/img/stock/testimonials/customer-40x40-1.webp"
alt="Sarah Chen"
class="w-10 h-10 rounded-full"
loading="lazy"
width="40"
height="40">
<div>
<div class="text-base font-medium text-gray-900">Sarah Chen</div>
<div class="text-sm text-gray-600">CTO at TechForward</div>
</div>
</div>
</footer>
</blockquote>
</figure>
</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