How can I create a testimonial section with flex or grid in Tailwind CSS?
Asked on Sep 19, 2025
Answer
To create a testimonial section using Tailwind CSS, you can utilize either the Flexbox or Grid utilities to arrange your content. Here's a simple example using the Grid layout, which is ideal for creating structured sections like testimonials.
<!-- BEGIN COPY / PASTE -->
<div class="bg-gray-100 p-6">
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
<div class="bg-white p-4 shadow-md rounded">
<p class="text-gray-700">"Great service and support!"</p>
<p class="text-sm text-gray-500 mt-2">- Customer A</p>
</div>
<div class="bg-white p-4 shadow-md rounded">
<p class="text-gray-700">"Highly recommend this product."</p>
<p class="text-sm text-gray-500 mt-2">- Customer B</p>
</div>
<div class="bg-white p-4 shadow-md rounded">
<p class="text-gray-700">"Exceptional quality and value."</p>
<p class="text-sm text-gray-500 mt-2">- Customer C</p>
</div>
</div>
</div>
<!-- END COPY / PASTE -->Additional Comment:
- The "grid-cols-1 md:grid-cols-3" classes create a single column layout on small screens and a three-column layout on medium and larger screens.
- Use "gap-4" to add spacing between the grid items.
- Each testimonial is styled with a white background, padding, shadow, and rounded corners for a clean appearance.
- Adjust the text and spacing classes as needed to fit your design requirements.
Recommended Links: