Home
yousef
Testimonial wall

Testimonial wall

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

Testimonial

Author yousef

2.4k

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

Author:
Sameer Sultana

2 years ago

18.2k
Testimonial wall
added light mode support

Author:
yousef

1 year ago

2.5k
Responsive Testimonial Card with stars ratings

Author:
Quentin Rivers

6 months ago

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

Author:
Bernard Omuse

8 months ago

1.7k
Testimonial cards
each card contains a customer quote, an image of the customer, and their name.

Author:
Komal Jain

1 year ago

9.7k
Testimonial card with image

Author:
Simon Scheffer

2 years ago

10.9k
Testimonial for dark theme

Author:
Sophia Baker

2 years ago

9.5k
User testimonials

Author:
Conan Hilton

2 years ago

12.3k
masonary grids effect for cards using columns
As part of the redesign I was trying to think of ways to lay out testimonials from students, which may have varying length/content, I stumbled onto the idea of using a masonry layout (think bricks, think Pinterest).

Author:
rohit whyphy

1 month ago

392
Designing a Responsive Activity Feed with Tailwind CSS
Enhance your web application by building a sleek and responsive activity feed using Tailwind CSS. This comprehensive guide walks you through creating an interactive feed section featuring customizable icons, links, and timestamps. Learn how to implement a visually appealing and accessible timeline that adapts seamlessly to any device, improving user engagement and overall experience

Author:
zobaidul kaziex

8 months ago

1.5k
Testimonial

Author:
Steven Kuhn

2 years ago

13.5k
Testimonial

Author:
Leon Bachmann

2 years ago

9.1k

Explore components by Tags

Didn't find component you were looking for?

Search from 2100+ components