Testimonial wall

Forked from @yousef-ali/testimonial-wall

added light mode support

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

Testimonial

Author yousef

Tailwind v3.4 3.9k 10

Fork Fullscreen

<section class="max-w-5xl mx-auto w-full px-10 dark:bg-gray-800 dark:text-white">
  <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">Testimonials</h2>
    <p class="text-lg font-medium text-slate-700/70 dark:text-gray-400">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-white dark:bg-gray-700 drop-shadow-md border-neutral-200/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">Brilliant house to rent</p>
        <p class="font-medium text-slate-700/90 dark:text-gray-300">All eFounders teams have moved to Cycle for all
          things product management and it is truly a game-changer.</p>
      </div>
      <div class="flex flex-col">
        <img src="https://randomuser.me/api/portraits/women/54.jpg" alt="Jane Cooper" class="h-10 w-10">
        <p class="pt-2 text-sm font-semibold">Jane Cooper</p>
        <p class="text-sm font-medium text-slate-700/70 dark:text-gray-400">CEO at ABC Corporation</p>
      </div>
    </div>
    <div
      class="border p-7 rounded-xl bg-white dark:bg-gray-700 drop-shadow-md border-neutral-200/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">Efficient customer support</p>
        <p class="font-medium text-slate-700/90 dark:text-gray-300">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/30.jpg" alt="John Doe" class="h-10 w-10">
        <p class="pt-2 text-sm font-semibold">Emily Smith</p>
        <p class="text-sm font-medium text-slate-700/70 dark:text-gray-400">Marketing Manager at ABC Company</p>
      </div>
    </div>
    <div
      class="border p-7 rounded-xl bg-white dark:bg-gray-700 drop-shadow-md border-neutral-200/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">Seamless integration process</p>
        <p class="font-medium text-slate-700/90 dark:text-gray-300">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/90.jpg" alt="Jane Doe" class="h-10 w-10">
        <p class="pt-2 text-sm font-semibold">Sarah Brown</p>
        <p class="text-sm font-medium text-slate-700/70 dark:text-gray-400">CTO at XYZ Corporation</p>
      </div>
    </div>
    <div
      class="border p-7 rounded-xl bg-white dark:bg-gray-700 drop-shadow-md border-neutral-200/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">Reliable service uptime</p>
        <p class="font-medium text-slate-700/90 dark:text-gray-300">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/90.jpg" alt="Ash Doe" class="h-10 w-10">
        <p class="pt-2 text-sm font-semibold">James White</p>
        <p class="text-sm font-medium text-slate-700/70 dark:text-gray-400">COO at XYZ Corporation</p>
      </div>
    </div>
  </div>
</section>

Related Examples

Testimonial wall

yousef

2 years ago

4.1k
Simple testimonial

Samuel Dawson

3 years ago

12.4k
Testimonials

Lîmåã M

3 years ago

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

Komal Jain

3 years ago

11.6k
Testimonial card

Leon Bachmann

3 years ago

13k
Simple testimonial card

Laurits

3 years ago

12.1k
Testimonial Card with Floating Image and Star Rating
A beautifully designed testimonial card featuring a floating user image, review text, and a 5-star rating. The card uses a rounded layout with a bright yellow border, making it stand out on any page. Ideal for displaying customer feedback or product reviews with a modern look.

Anum Shahana

2 years ago

2.1k
The future ai
The is technology

ORGIN_DREAMS

1 year ago

1.5k
Testimonials

$$@(\/)(\/)¥$ $@(\/)(\/)¥

1 year ago

2.3k
Testimonial card with image

Simon Scheffer

3 years ago

12.8k
Twitter testimonial card

wtfbrh

2 years ago

2.1k
basichtml
this is basic html

Anonymous

1 year ago

929