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