sectiontestimonialbeginner

Testimonial Section

A testimonials section with a large centered quote and author attribution.

Preview
"Tailwind CSS has completely changed how we build user interfaces. Our team ships features 3x faster."

Sarah Johnson

VP of Engineering, TechCorp

<section class="bg-gray-950 py-20 px-4">
  <div class="max-w-3xl mx-auto text-center">
    <svg class="w-10 h-10 text-indigo-500 mx-auto mb-6" 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"></path></svg>
    <blockquote class="text-2xl md:text-3xl font-medium text-white leading-relaxed mb-8">"Tailwind CSS has completely changed how we build user interfaces. Our team ships features 3x faster."</blockquote>
    <div>
      <p class="text-white font-semibold">Sarah Johnson</p>
      <p class="text-gray-400 text-sm">VP of Engineering, TechCorp</p>
    </div>
  </div>
</section>

Color Breakdown

Background

bg-gray-950

#030712

Quote Icon

text-indigo-500

#6366f1

Quote Text

text-white

#ffffff

Author Name

text-white

#ffffff

Author Title

text-gray-400

#9ca3af

Use Cases

SaaS landing pagesProduct pagesCase study sections

Browser Support

All modern browsers.

Related Recipes

Build Your Own Color Recipe

Use our Tailwind CSS tools to experiment with colors, gradients, and component styles.

Explore Tools

Frequently Asked Questions

How do I add multiple testimonials?
Wrap testimonials in a carousel/slider or use a grid with grid-cols-1 md:grid-cols-3 to show multiple quotes side by side.