<div class="testimonial-card">
  <div class="testimonial-stars">★★★★★</div>
  <blockquote class="testimonial-quote">
    "This is the cleanest component library I've used. Dropped straight into our design system without a single conflict."
  </blockquote>
  <div class="testimonial-author">
    <div class="avatar avatar-fallback" style="width:2.5rem;height:2.5rem;font-size:0.75rem">MK</div>
    <div>
      <p class="testimonial-name">Marcus Kim</p>
      <p class="testimonial-role">Lead Designer at Vercel</p>
    </div>
  </div>
</div>

<style>
.testimonial-card {
  border: 1px solid var(--border); border-radius: 1rem;
  padding: 1.75rem; background: var(--surface);
  display: flex; flex-direction: column; gap: 1rem;
}
.testimonial-stars { color: #F59E0B; font-size: 1rem; letter-spacing: 0.1em; }
.testimonial-quote {
  font-size: 0.9375rem; line-height: 1.65;
  color: var(--text); margin: 0; font-style: italic;
}
.testimonial-author { display: flex; align-items: center; gap: 0.75rem; }
.testimonial-name { font-size: 0.875rem; font-weight: 600; margin: 0; }
.testimonial-role { font-size: 0.75rem; color: var(--muted); margin: 0; }
</style>