Home
Muhammad Umair Arshad
Tailwind Flex Component: Responsive Testimonial Section UI

Tailwind Flex Component: Responsive Testimonial Section UI

A clean, modern, and fully responsive Testimonial Section built using Tailwind CSS and Flexbox. Ideal for portfolios, agency websites, SaaS landing pages, or any modern UI project.

This reusable component includes user images, job titles, and quotes—perfect for showcasing feedback and adding trust to your UI.

This tailwind example is contributed by Muhammad Umair Arshad, on 26-May-2025. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are endorsement,review,about me

Card Testimonial Grid About us

Author Muhammad Umair Arshad

227

Fork Fullscreen

<section class="bg-gray-50 py-12 px-4 sm:px-6 lg:px-8">
  <div class="max-w-7xl mx-auto">
    <h2 class="text-3xl font-extrabold text-gray-900 text-center mb-10">What People Are Saying</h2>

<div class="flex flex-wrap gap-6 justify-center">
      
      <div class="bg-white shadow-md rounded-2xl p-6 max-w-sm flex flex-col items-start hover:shadow-xl transition">
        <div class="flex items-center mb-4">
          <img class="w-12 h-12 rounded-full border-2 border-indigo-500" src="https://i.pravatar.cc/150?img=12" alt="User avatar">
          <div class="ml-4">
            <h4 class="text-lg font-semibold text-gray-900">Sarah Williams</h4>
            <p class="text-sm text-gray-500">Product Designer</p>
          </div>
        </div>
        <p class="text-gray-600 text-sm">"This UI was a game-changer for our product launch. Everything was smooth and pixel-perfect. Highly recommend!"</p>
      </div>

<div class="bg-white shadow-md rounded-2xl p-6 max-w-sm flex flex-col items-start hover:shadow-xl transition">
        <div class="flex items-center mb-4">
          <img class="w-12 h-12 rounded-full border-2 border-indigo-500" src="https://i.pravatar.cc/150?img=32" alt="User avatar">
          <div class="ml-4">
            <h4 class="text-lg font-semibold text-gray-900">Michael </h4>
            <p class="text-sm text-gray-500">Startup Founder</p>
          </div>
        </div>
        <p class="text-gray-600 text-sm">"Impressive responsiveness and design consistency. The attention to detail is what makes this shine!"</p>
      </div>

<div class="bg-white shadow-md rounded-2xl p-6 max-w-sm flex flex-col items-start hover:shadow-xl transition">
        <div class="flex items-center mb-4">
          <img class="w-12 h-12 rounded-full border-2 border-indigo-500" src="https://i.pravatar.cc/150?img=22" alt="User avatar">
          <div class="ml-4">
            <h4 class="text-lg font-semibold text-gray-900">John</h4>
            <p class="text-sm text-gray-500">Frontend Developer</p>
          </div>
        </div>
        <p class="text-gray-600 text-sm">"Clean layout, optimized for mobile, and extremely flexible with Tailwind. Loved using it!"</p>
      </div>
    </div>
  </div>
</section>

Related Examples