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.4k
Testimonial wall
added light mode support

yousef

2 years ago

3.9k
Tailwind CSS Testimonial Slider
Descriptive background image with Testimonial Slider .

Bernard Omuse

2 years ago

3.3k
Testimonial Card with stars ratings

Quentin Rivers

2 years ago

2.4k
Simple testimonial

Samuel Dawson

3 years ago

12.4k
Testimonials section

Bunny

3 years ago

10.7k
Twitter testimonial card

wtfbrh

2 years ago

2.1k
The future ai
The is technology

ORGIN_DREAMS

1 year ago

1.5k
tailwind testimonial card

Ron Hicks

3 years ago

10.6k
Skyhaven International
This is a responsive, modern airport website built with Tailwind CSS (a utility-first CSS framework) and Font Awesome for icons. It includes key sections that an airport website would typically have, such as flight information, services, parking, terminal maps, and contact details

INGRIDE MUZIRANENGE

1 year ago

1.1k
basichtml
this is basic html

Anonymous

1 year ago

930
Testimonial for dark theme

Sophia Baker

3 years ago

10.9k