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 ToolsFrequently 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.