Testimonial wall

This tailwind example is contributed by yousef, on 02-Apr-2024. Component is made with Tailwind v3.4. It is responsive. similar terms for this example are endorsement,review

Testimonial

Author yousef

Tailwind v3.4 4.1k 8

Fork Fullscreen

<div class="bg-neutral-950">
  <section class="max-w-5xl mx-auto w-full px-10 py-10">
    <div class="flex items-center justify-center flex-col gap-y-2 py-5">
      <h2 class="text-2xl md:text-3xl lg:text-4xl font-bold max-w-md mx-auto text-center text-white">Here's what our
        <span class="text-[#45B3BA]">customers</span> have to say
      </h2>
      <p class="text-lg font-medium text-slate-400/70">Discover how our service can benefit you</p>
    </div>
    <div class="grid grid-cols-1 lg:grid-cols-5 gap-5 w-full">
      <div
        class="border p-7 rounded-xl bg-neutral-900 drop-shadow-md border-neutral-800/50 col-span-2 flex flex-col gap-y-10 justify-between">
        <div class="flex flex-col gap-y-3.5">
          <p class="font-bold text-xl text-white">Efficient customer support</p>
          <p class="font-medium text-white">The customer support team at our service is incredibly responsive and
            helpful. They went above and beyond to assist me with my issue.</p>
        </div>
        <div class="flex flex-col"><img src="https://randomuser.me/api/portraits/women/43.jpg" alt="Emily Smith" class="h-10 w-10">
          <p class="pt-2 text-sm font-semibold text-white">Emily Smith</p>
          <p class="text-sm font-medium text-slate-100/70">Marketing Manager at ABC Company</p>
        </div>
      </div>
      <div
        class="border p-7 rounded-xl bg-neutral-900 drop-shadow-md border-neutral-800/50 col-span-3 flex flex-col gap-y-10 justify-between">
        <div class="flex flex-col gap-y-3.5">
          <p class="font-bold text-xl text-white">Excellent product features</p>
          <p class="font-medium text-white">The features offered by our service are outstanding. They have greatly
            improved our workflow and efficiency.</p>
        </div>
        <div class="flex flex-col"><img src="https://randomuser.me/api/portraits/men/34.jpg" alt="Michael Johnson" class="h-10 w-10">
          <p class="pt-2 text-sm font-semibold text-white">Michael Johnson</p>
          <p class="text-sm font-medium text-slate-100/70">CEO at XYZ Corporation</p>
        </div>
      </div>
      <div
        class="border p-7 rounded-xl bg-neutral-900 drop-shadow-md border-neutral-800/50 col-span-3 flex flex-col gap-y-10 justify-between">
        <div class="flex flex-col gap-y-3.5">
          <p class="font-bold text-xl text-white">Seamless integration process</p>
          <p class="font-medium text-white">Integrating our systems with our service was smooth and hassle-free. The
            support team guided us through every step of the process.</p>
        </div>
        <div class="flex flex-col"><img src="https://randomuser.me/api/portraits/women/71.jpg" alt="Sarah Brown" class="h-10 w-10">
          <p class="pt-2 text-sm font-semibold text-white">Sarah Brown</p>
          <p class="text-sm font-medium text-slate-100/70">CTO at XYZ Corporation</p>
        </div>
      </div>
      <div
        class="border p-7 rounded-xl bg-neutral-900 drop-shadow-md border-neutral-800/50 col-span-2 flex flex-col gap-y-10 justify-between">
        <div class="flex flex-col gap-y-3.5">
          <p class="font-bold text-xl text-white">Reliable service uptime</p>
          <p class="font-medium text-white">Our service has consistently maintained high uptime, ensuring that our
            operations run smoothly without any disruptions.</p>
        </div>
        <div class="flex flex-col"><img src="https://randomuser.me/api/portraits/men/71.jpg" alt="James White" class="h-10 w-10">
          <p class="pt-2 text-sm font-semibold text-white">James White</p>
          <p class="text-sm font-medium text-slate-100/70">COO at XYZ Corporation</p>
        </div>
      </div>
    </div>
  </section>
</div>

Related Examples

Customer testimonies grid

Sameer Sultana

3 years ago

21.3k
Testimonial wall
added light mode support

yousef

2 years ago

3.8k
Testimonials
Testimonial Card for landing pages.

Prashant

4 years ago

11.9k
beautifull web page
I create a web page using cloude ai its amazing.

Akram Khan

2 years ago

3.5k
Minimal Testimonial Card

Amit Pachange

3 years ago

9.5k
Testimonials

Lîmåã M

3 years ago

12.4k
Testimonial Card with stars ratings

Quentin Rivers

1 year ago

2.4k
Review cards with social proof icons

kishan pc

2 years ago

2.4k
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.

Muhammad Umair Arshad

1 year ago

1.9k
Simple testimonial card

Laurits

3 years ago

12.1k
Testimonial that What Client Says

Abdul Baset Bappy

1 year ago

1.9k
Testimonial full width

Piet Vriend

3 years ago

13.8k