Component:
Quote Product Light
Colors:
Description:
This carefully crafted Quote 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: Quote
@industry: Product
@style: Light
@category: Social Proof
@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-50: #eff6ff;
--color-blue-100: #dbeafe;
--color-blue-300: #93c5fd;
/* Spacing */
--spacing-2: 0.5rem;
--spacing-3: 0.75rem;
--spacing-4: 1rem;
--spacing-6: 1.5rem;
--spacing-8: 2rem;
--spacing-10: 2.5rem;
--spacing-12: 3rem;
--spacing-16: 4rem;
--spacing-24: 6rem;
/* Container */
--container-max-width: 64rem; /* max-w-5xl */
}
/* 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 */
.quote-section {
background-color: var(--color-gray-50);
padding: var(--spacing-16) var(--spacing-4);
}
.quote-container {
max-width: var(--container-max-width);
margin: 0 auto;
}
.quote-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);
position: relative;
overflow: hidden;
}
.decorative-circle-1 {
position: absolute;
top: 0;
left: 0;
width: 6rem;
height: 6rem;
background-color: var(--color-blue-50);
border-bottom-right-radius: 100%;
opacity: 0.7;
}
.decorative-circle-2 {
position: absolute;
bottom: 0;
right: 0;
width: 8rem;
height: 8rem;
background-color: var(--color-blue-50);
border-top-left-radius: 100%;
opacity: 0.7;
}
.quote-content {
position: relative;
z-index: 10;
}
.quote-mark {
width: 3rem;
height: 3rem;
color: var(--color-blue-100);
margin-bottom: var(--spacing-6);
}
.quote-text {
color: var(--color-gray-800);
font-size: 1.25rem;
font-weight: 300;
line-height: 1.75;
margin-bottom: var(--spacing-8);
line-height: 1.5;
}
.author-container {
display: flex;
align-items: center;
}
.author-image {
flex-shrink: 0;
margin-right: var(--spacing-4);
width: 3rem;
height: 3rem;
border-radius: 9999px;
object-fit: cover;
}
.author-name {
color: var(--color-gray-800);
font-weight: 500;
}
.author-title {
color: var(--color-gray-600);
font-size: 0.875rem;
}
.cta-container {
margin-top: var(--spacing-10);
text-align: center;
}
.cta-button {
display: inline-flex;
align-items: center;
background-color: var(--color-white);
border: 1px solid var(--color-blue-300);
color: var(--color-gray-800);
padding: var(--spacing-3) var(--spacing-6);
border-radius: 0.5rem;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
text-decoration: none;
transition: background-color 0.15s ease-in-out;
}
.cta-button:hover {
background-color: var(--color-gray-50);
}
.cta-icon {
margin-left: var(--spacing-2);
width: 1.25rem;
height: 1.25rem;
}
/* Responsive Breakpoints */
@media (min-width: 768px) {
.quote-section {
padding: var(--spacing-24) var(--spacing-4);
}
.quote-card {
padding: var(--spacing-12);
}
.quote-text {
font-size: 1.5rem;
line-height: 1.2;
}
}
</style>
<section class="quote-section">
<div class="quote-container">
<div class="quote-card">
<!-- Decorative elements -->
<div class="decorative-circle-1"></div>
<div class="decorative-circle-2"></div>
<div class="quote-content">
<!-- Quote mark -->
<svg class="quote-mark" fill="currentColor" viewBox="0 0 32 32" aria-hidden="true">
<path d="M9.352 4C4.456 7.456 1 13.12 1 19.36c0 5.088 3.072 8.064 6.624 8.064 3.36 0 5.856-2.688 5.856-5.856 0-3.168-2.208-5.472-5.088-5.472-.576 0-1.344.096-1.536.192.48-3.264 3.552-7.104 6.624-9.024L9.352 4zm16.512 0c-4.8 3.456-8.256 9.12-8.256 15.36 0 5.088 3.072 8.064 6.624 8.064 3.264 0 5.856-2.688 5.856-5.856 0-3.168-2.304-5.472-5.184-5.472-.576 0-1.248.096-1.44.192.48-3.264 3.456-7.104 6.528-9.024L25.864 4z" />
</svg>
<!-- Quote text -->
<blockquote class="quote-text">
Our team was able to cut product development time by 50% after implementing this solution. It's transformed how we approach our design and development workflow.
</blockquote>
<!-- Author info -->
<div class="author-container">
<div>
<img class="author-image" src="https://landinggo.com/assets/img/stock/testimonials/customer-40x40-1.webp" alt="Customer portrait" width="48" height="48" loading="lazy">
</div>
<div>
<p class="author-name">Sarah Johnson</p>
<p class="author-title">Product Director, Acme Design</p>
</div>
</div>
</div>
</div>
<!-- Optional CTA -->
<div class="cta-container">
<a href="#" class="cta-button">
<span>Read more customer stories</span>
<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 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L12.586 11H5a1 1 0 110-2h7.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd" />
</svg>
</a>
</div>
</div>
</section>
<!--
@type: Quote
@industry: Product
@style: Light
@category: Social Proof
@framework: Tailwind
@license: Free
-->
<section class="bg-gray-50 py-16 px-4 sm:py-24">
<div class="max-w-5xl mx-auto">
<div class="bg-white border border-gray-200 rounded-2xl p-8 md:p-12 shadow-sm relative overflow-hidden">
<!-- Decorative elements -->
<div class="absolute top-0 left-0 w-24 h-24 bg-blue-50 rounded-br-full opacity-70"></div>
<div class="absolute bottom-0 right-0 w-32 h-32 bg-blue-50 rounded-tl-full opacity-70"></div>
<div class="relative z-10">
<!-- Quote mark -->
<svg class="w-12 h-12 text-blue-100 mb-6" fill="currentColor" viewBox="0 0 32 32" aria-hidden="true">
<path d="M9.352 4C4.456 7.456 1 13.12 1 19.36c0 5.088 3.072 8.064 6.624 8.064 3.36 0 5.856-2.688 5.856-5.856 0-3.168-2.208-5.472-5.088-5.472-.576 0-1.344.096-1.536.192.48-3.264 3.552-7.104 6.624-9.024L9.352 4zm16.512 0c-4.8 3.456-8.256 9.12-8.256 15.36 0 5.088 3.072 8.064 6.624 8.064 3.264 0 5.856-2.688 5.856-5.856 0-3.168-2.304-5.472-5.184-5.472-.576 0-1.248.096-1.44.192.48-3.264 3.456-7.104 6.528-9.024L25.864 4z" />
</svg>
<!-- Quote text -->
<blockquote class="text-gray-800 text-xl md:text-2xl font-light leading-relaxed mb-8">
Our team was able to cut product development time by 50% after implementing this solution. It's transformed how we approach our design and development workflow.
</blockquote>
<!-- Author info -->
<div class="flex items-center">
<div class="flex-shrink-0 mr-4">
<img class="h-12 w-12 rounded-full object-cover" src="https://landinggo.com/assets/img/stock/testimonials/customer-40x40-1.webp" alt="Customer portrait" width="48" height="48" loading="lazy">
<!-- Customer portrait image -->
</div>
<div>
<p class="text-gray-800 font-medium">Sarah Johnson</p>
<p class="text-gray-600 text-sm">Product Director, Acme Design</p>
</div>
</div>
</div>
</div>
<!-- Optional CTA -->
<div class="mt-10 text-center">
<a href="#" class="inline-flex items-center bg-white border border-blue-300 text-gray-800 px-6 py-3 rounded-lg hover:bg-gray-50 shadow-sm transition duration-150 ease-in-out">
<span>Read more customer stories</span>
<svg class="ml-2 w-5 h-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 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L12.586 11H5a1 1 0 110-2h7.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd" />
</svg>
</a>
</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