HTML
<section class="tm-mwc" aria-label="Customer testimonials">
<header class="tm-mwc-section-label">
<span class="tm-mwc-sl-text">What our customers say</span>
<span class="tm-mwc-sl-line" aria-hidden="true"></span>
</header>
<h2 class="tm-mwc-section-title">Trusted by thousands of teams worldwide</h2>
<div class="tm-mwc-grid">
<article class="tm-mwc-card">
<div class="tm-mwc-portrait tm-mwc-portrait-blue" aria-hidden="true">
<span class="tm-mwc-initials">SC</span>
</div>
<div class="tm-mwc-rating-block">
<span class="tm-mwc-rating-num">5.0</span>
<span class="tm-mwc-stars" aria-label="5 out of 5 stars">
<span class="tm-mwc-star" aria-hidden="true">★</span>
<span class="tm-mwc-star" aria-hidden="true">★</span>
<span class="tm-mwc-star" aria-hidden="true">★</span>
<span class="tm-mwc-star" aria-hidden="true">★</span>
<span class="tm-mwc-star" aria-hidden="true">★</span>
</span>
<span class="tm-mwc-rating-ct">· Verified</span>
</div>
<blockquote class="tm-mwc-quote">"The onboarding was so smooth I had my whole team up and running in <em>a single afternoon</em>. That never happens."</blockquote>
<figcaption class="tm-mwc-author-row">
<span class="tm-mwc-author-portrait tm-mwc-portrait-blue" aria-hidden="true">SC</span>
<span><cite class="tm-mwc-author-name">Sarah Chen</cite><span class="tm-mwc-author-role">Head of Product, Relay</span></span>
</figcaption>
</article>
<article class="tm-mwc-card">
<div class="tm-mwc-portrait tm-mwc-portrait-teal" aria-hidden="true">
<span class="tm-mwc-initials">MW</span>
</div>
<div class="tm-mwc-rating-block">
<span class="tm-mwc-rating-num">5.0</span>
<span class="tm-mwc-stars" aria-label="5 out of 5 stars">
<span class="tm-mwc-star">★</span><span class="tm-mwc-star">★</span><span class="tm-mwc-star">★</span><span class="tm-mwc-star">★</span><span class="tm-mwc-star">★</span>
</span>
<span class="tm-mwc-rating-ct">· Verified</span>
</div>
<blockquote class="tm-mwc-quote">"Replaced three different tools and <em>cut our monthly spend by 40%</em>. The ROI was visible in week one."</blockquote>
<figcaption class="tm-mwc-author-row">
<span class="tm-mwc-author-portrait tm-mwc-portrait-teal" aria-hidden="true">MW</span>
<span><cite class="tm-mwc-author-name">Marcus Williams</cite><span class="tm-mwc-author-role">CTO, Stackframe</span></span>
</figcaption>
</article>
<article class="tm-mwc-card">
<div class="tm-mwc-portrait tm-mwc-portrait-amber" aria-hidden="true">
<span class="tm-mwc-initials">IM</span>
</div>
<div class="tm-mwc-rating-block">
<span class="tm-mwc-rating-num">5.0</span>
<span class="tm-mwc-stars" aria-label="5 out of 5 stars">
<span class="tm-mwc-star">★</span><span class="tm-mwc-star">★</span><span class="tm-mwc-star">★</span><span class="tm-mwc-star">★</span><span class="tm-mwc-star">★</span>
</span>
<span class="tm-mwc-rating-ct">· Verified</span>
</div>
<blockquote class="tm-mwc-quote">"Customer support replied in <em>four minutes</em> on a Sunday. I didn't even know that was possible from a SaaS company."</blockquote>
<figcaption class="tm-mwc-author-row">
<span class="tm-mwc-author-portrait tm-mwc-portrait-amber" aria-hidden="true">IM</span>
<span><cite class="tm-mwc-author-name">Isabelle Morel</cite><span class="tm-mwc-author-role">VP Operations, Cove</span></span>
</figcaption>
</article>
</div>
<div class="tm-mwc-grid2">
<article class="tm-mwc-card tm-mwc-feat">
<div class="tm-mwc-portrait tm-mwc-portrait-indigo" aria-hidden="true">
<span class="tm-mwc-initials">DP</span>
</div>
<div class="tm-mwc-rating-block">
<span class="tm-mwc-rating-num">5.0</span>
<span class="tm-mwc-stars" aria-label="5 out of 5 stars">
<span class="tm-mwc-star">★</span><span class="tm-mwc-star">★</span><span class="tm-mwc-star">★</span><span class="tm-mwc-star">★</span><span class="tm-mwc-star">★</span>
</span>
<span class="tm-mwc-rating-ct">· Verified</span>
</div>
<blockquote class="tm-mwc-quote">"We evaluated six platforms over three months. This one wasn't just the best — it was <em>in a different category</em> from the rest. The depth of integrations, the API quality, the docs — nothing else came close."</blockquote>
<figcaption class="tm-mwc-author-row">
<span class="tm-mwc-author-portrait tm-mwc-portrait-indigo" aria-hidden="true">DP</span>
<span><cite class="tm-mwc-author-name">Daniel Park</cite><span class="tm-mwc-author-role">Engineering Lead, Meridian Cloud</span></span>
</figcaption>
</article>
<article class="tm-mwc-card">
<div class="tm-mwc-portrait tm-mwc-portrait-green" aria-hidden="true">
<span class="tm-mwc-initials">AO</span>
</div>
<span class="tm-mwc-verified-chip">
<span class="tm-mwc-vc-dot" aria-hidden="true"></span> Verified customer
</span>
<div class="tm-mwc-stars" aria-label="5 out of 5 stars" style="margin-bottom:14px">
<span class="tm-mwc-star">★</span><span class="tm-mwc-star">★</span><span class="tm-mwc-star">★</span><span class="tm-mwc-star">★</span><span class="tm-mwc-star">★</span>
</div>
<blockquote class="tm-mwc-quote">"Shipped faster in the first month than the entire previous quarter. The <em>workflow automation</em> alone saved us 15 hours a week."</blockquote>
<figcaption class="tm-mwc-author-row">
<span class="tm-mwc-author-portrait tm-mwc-portrait-green" aria-hidden="true">AO</span>
<span><cite class="tm-mwc-author-name">Amara Osei</cite><span class="tm-mwc-author-role">Founder, Lumen Analytics</span></span>
</figcaption>
</article>
</div>
</section> CSS
/* Minimal White Cards — clean 3-col grid + 2-col bottom row. The
featured card flips to a dark navy panel for contrast. Portraits
use colored initial-circles instead of stock photos so the demo
stays slim and self-contained (no external image dependency). */
.tm-mwc {
--tm-mwc-bg: #f6f7f9;
--tm-mwc-white: #ffffff;
--tm-mwc-ink: #111827;
--tm-mwc-muted: #6b7280;
--tm-mwc-border: #e5e7eb;
--tm-mwc-blue: #2563eb;
position: relative;
padding: clamp(32px, 4vw, 56px) clamp(20px, 3vw, 52px);
background: var(--tm-mwc-bg);
font-family: 'Inter', system-ui, sans-serif;
min-height: 520px;
}
.tm-mwc-section-label {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 10px;
}
.tm-mwc-sl-text {
font-size: 11px;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--tm-mwc-muted);
}
.tm-mwc-sl-line {
flex: 1;
height: 1px;
background: var(--tm-mwc-border);
}
.tm-mwc-section-title {
font-family: 'Lora', Georgia, serif;
font-size: clamp(1.4rem, 2.4vw, 1.7rem);
font-weight: 500;
color: var(--tm-mwc-ink);
margin: 0 0 36px;
max-width: 480px;
line-height: 1.3;
}
.tm-mwc-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
margin-bottom: 20px;
}
.tm-mwc-grid2 {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
.tm-mwc-card {
background: var(--tm-mwc-white);
border: 1px solid var(--tm-mwc-border);
border-radius: 12px;
padding: 30px 26px;
position: relative;
transition: box-shadow 0.25s ease, transform 0.25s ease;
animation: tm-mwc-fadeup 0.6s ease both;
display: flex;
flex-direction: column;
}
.tm-mwc-card:hover {
box-shadow: 0 12px 32px rgba(0,0,0,0.08);
transform: translateY(-3px);
}
.tm-mwc-grid .tm-mwc-card:nth-child(1) { animation-delay: 0.05s; }
.tm-mwc-grid .tm-mwc-card:nth-child(2) { animation-delay: 0.12s; }
.tm-mwc-grid .tm-mwc-card:nth-child(3) { animation-delay: 0.19s; }
.tm-mwc-grid2 .tm-mwc-card:nth-child(1) { animation-delay: 0.26s; }
.tm-mwc-grid2 .tm-mwc-card:nth-child(2) { animation-delay: 0.32s; }
@keyframes tm-mwc-fadeup {
from { opacity: 0; transform: translateY(16px); }
to { opacity: 1; transform: translateY(0); }
}
.tm-mwc-portrait {
width: 60px;
height: 60px;
border-radius: 50%;
margin-bottom: 18px;
border: 2px solid var(--tm-mwc-border);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.tm-mwc-initials {
font-family: 'Inter', system-ui, sans-serif;
font-size: 18px;
font-weight: 600;
color: #fff;
letter-spacing: 0.02em;
}
.tm-mwc-portrait-blue { background: linear-gradient(135deg, #3b82f6, #1d4ed8); }
.tm-mwc-portrait-teal { background: linear-gradient(135deg, #14b8a6, #0f766e); }
.tm-mwc-portrait-amber { background: linear-gradient(135deg, #f59e0b, #b45309); }
.tm-mwc-portrait-indigo { background: linear-gradient(135deg, #6366f1, #4338ca); }
.tm-mwc-portrait-green { background: linear-gradient(135deg, #22c55e, #15803d); }
.tm-mwc-rating-block {
display: flex;
align-items: center;
gap: 6px;
margin-bottom: 10px;
flex-wrap: wrap;
}
.tm-mwc-rating-num {
font-size: 1rem;
font-weight: 600;
color: var(--tm-mwc-ink);
}
.tm-mwc-stars {
display: inline-flex;
gap: 2px;
}
.tm-mwc-star {
color: #f59e0b;
font-size: 13px;
}
.tm-mwc-rating-ct {
font-size: 11px;
color: var(--tm-mwc-muted);
}
.tm-mwc-quote {
font-family: 'Lora', Georgia, serif;
font-style: italic;
font-size: 1rem;
line-height: 1.7;
color: #374151;
margin: 0 0 20px;
flex: 1;
}
.tm-mwc-quote em {
font-style: normal;
color: var(--tm-mwc-blue);
font-weight: 500;
}
.tm-mwc-author-row {
display: flex;
align-items: center;
gap: 12px;
padding-top: 18px;
border-top: 1px solid var(--tm-mwc-border);
}
.tm-mwc-author-portrait {
width: 40px;
height: 40px;
border-radius: 50%;
flex-shrink: 0;
border: 1.5px solid var(--tm-mwc-border);
margin-bottom: 0;
display: flex;
align-items: center;
justify-content: center;
font-family: 'Inter', system-ui, sans-serif;
font-size: 12px;
font-weight: 600;
color: #fff;
}
.tm-mwc-author-name {
display: block;
font-size: 13px;
font-weight: 600;
font-style: normal;
color: var(--tm-mwc-ink);
line-height: 1.3;
}
.tm-mwc-author-role {
font-size: 11px;
color: var(--tm-mwc-muted);
margin-top: 2px;
display: block;
}
.tm-mwc-verified-chip {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 10px;
font-weight: 500;
letter-spacing: 0.06em;
color: #16a34a;
background: #f0fdf4;
border: 1px solid #bbf7d0;
padding: 3px 8px;
border-radius: 20px;
margin-bottom: 14px;
width: fit-content;
}
.tm-mwc-vc-dot {
width: 5px;
height: 5px;
background: #16a34a;
border-radius: 50%;
}
/* Dark featured card */
.tm-mwc-feat {
background: var(--tm-mwc-ink);
border-color: transparent;
}
.tm-mwc-feat .tm-mwc-quote { color: rgba(255,255,255,0.8); }
.tm-mwc-feat .tm-mwc-quote em { color: #93c5fd; }
.tm-mwc-feat .tm-mwc-author-name { color: #fff; }
.tm-mwc-feat .tm-mwc-author-role { color: rgba(255,255,255,0.5); }
.tm-mwc-feat .tm-mwc-author-row { border-top-color: rgba(255,255,255,0.1); }
.tm-mwc-feat .tm-mwc-rating-num { color: #fff; }
.tm-mwc-feat .tm-mwc-rating-ct { color: rgba(255,255,255,0.4); }
.tm-mwc-feat .tm-mwc-portrait,
.tm-mwc-feat .tm-mwc-author-portrait { border-color: rgba(255,255,255,0.15); }
@media (max-width: 820px) {
.tm-mwc-grid, .tm-mwc-grid2 { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
.tm-mwc-card { animation: none; transition: none; }
.tm-mwc-card:hover { transform: none; }
}