Customer Testimonial Carousel with Auto Slide

Premium testimonial carousel featuring customer reviews, profile avatars, star ratings and smooth slide navigation

This tailwind example is contributed by JUGENDRA GANGWAR, on 05-Nov-2026. Component is made with Tailwind v3.4. It is responsive. similar terms for this example are endorsement,review

Testimonial

Author JUGENDRA GANGWAR

Tailwind v3.4 1

Fork Fullscreen

<section data-testimonial-carousel class="mx-auto w-full max-w-6xl px-5 py-14 sm:py-20">
  <div class="mx-auto max-w-2xl text-center">
    <span class="rounded-full bg-violet-50 px-4 py-2 text-xs font-bold uppercase tracking-wider text-violet-600">Customer Stories</span>
    <h2 class="mt-5 text-3xl font-semibold tracking-tight text-slate-900 sm:text-4xl uppercase">Loved by teams that build better.</h2>
    <p class="mt-4 text-sm leading-7 text-slate-500 sm:text-base">Real experiences from people who use our platform every day.</p>
  </div>

<div class="relative mx-auto mt-12 max-w-4xl overflow-hidden rounded-3xl border border-slate-200 bg-white shadow-xl shadow-slate-200/40">
    <div class="testimonial-track relative">
      <article class="testimonial-slide p-7 sm:p-12" data-slide="0">
        <div class="flex items-center gap-1 text-amber-400" aria-label="5 out of 5 stars">
          ★★★★★
        </div>
        <div class="mt-8">
          <span class="font-serif text-6xl leading-none text-violet-200">“</span>
          <blockquote class="-mt-2 text-2xl font-semibold leading-relaxed tracking-tight text-slate-900 sm:text-3xl">
            This platform completely transformed how our team manages projects. Everything feels simpler, faster and more organized.
          </blockquote>
        </div>
        <div class="mt-10 flex flex-wrap items-center justify-between gap-5 border-t border-slate-100 pt-7">
          <div class="flex items-center gap-4">
            <img src="https://i.pravatar.cc/100?img=47" alt="Sarah Johnson" class="h-12 w-12 rounded-full object-cover ring-4 ring-violet-50">
            <div>
              <h3 class="text-sm font-bold text-slate-900">Sarah Johnson</h3>
              <p class="mt-1 text-xs text-slate-500">Product Manager · TechFlow</p>
            </div>
          </div>
          <span class="rounded-full bg-violet-50 px-4 py-2 text-xs font-semibold text-violet-600">Verified Customer</span>
        </div>
      </article>

<article class="testimonial-slide hidden p-7 sm:p-12" data-slide="1" aria-hidden="true">
        <div class="flex items-center gap-1 text-amber-400" aria-label="5 out of 5 stars">★★★★★</div>
        <div class="mt-8">
          <span class="font-serif text-6xl leading-none text-violet-200">“</span>
          <blockquote class="-mt-2 text-2xl font-semibold leading-relaxed tracking-tight text-slate-900 sm:text-3xl">
            The experience is incredibly intuitive. We reduced repetitive work and gave our team more time to focus on what really matters.
          </blockquote>
        </div>
        <div class="mt-10 flex flex-wrap items-center justify-between gap-5 border-t border-slate-100 pt-7">
          <div class="flex items-center gap-4">
            <img src="https://i.pravatar.cc/100?img=44" alt="Michael Chen" class="h-12 w-12 rounded-full object-cover ring-4 ring-violet-50">
            <div>
              <h3 class="text-sm font-bold text-slate-900">Michael Chen</h3>
              <p class="mt-1 text-xs text-slate-500">Founder · GrowthLabs</p>
            </div>
          </div>
          <span class="rounded-full bg-violet-50 px-4 py-2 text-xs font-semibold text-violet-600">Verified Customer</span>
        </div>
      </article>

<article class="testimonial-slide hidden p-7 sm:p-12" data-slide="2" aria-hidden="true">
        <div class="flex items-center gap-1 text-amber-400" aria-label="5 out of 5 stars">★★★★★</div>
        <div class="mt-8">
          <span class="font-serif text-6xl leading-none text-violet-200">“</span>
          <blockquote class="-mt-2 text-2xl font-semibold leading-relaxed tracking-tight text-slate-900 sm:text-3xl">
            An excellent solution for growing businesses. The interface is beautiful, the workflow is smooth and our team adopted it immediately.
          </blockquote>
        </div>
        <div class="mt-10 flex flex-wrap items-center justify-between gap-5 border-t border-slate-100 pt-7">
          <div class="flex items-center gap-4">
            <img src="https://i.pravatar.cc/100?img=49" alt="Emily Parker" class="h-12 w-12 rounded-full object-cover ring-4 ring-violet-50">
            <div>
              <h3 class="text-sm font-bold text-slate-900">Emily Parker</h3>
              <p class="mt-1 text-xs text-slate-500">Creative Director · Studio North</p>
            </div>
          </div>
          <span class="rounded-full bg-violet-50 px-4 py-2 text-xs font-semibold text-violet-600">Verified Customer</span>
        </div>
      </article>
    </div>

function stopAuto(){
    if(timer)clearInterval(timer);
    timer=null;
  }

function startAuto(){
    stopAuto();
    if(!prefersReducedMotion){
      timer=setInterval(()=>{
        if(!paused)showSlide(current+1);
      },5000);
    }
  }

prev.addEventListener("click",()=>{
    showSlide(current-1);
    startAuto();
  });

next.addEventListener("click",()=>{
    showSlide(current+1);
    startAuto();
  });

dots.forEach((dot,i)=>{
    dot.addEventListener("click",()=>{
      showSlide(i);
      startAuto();
    });
  });

component.addEventListener("mouseenter",()=>paused=true);
  component.addEventListener("mouseleave",()=>paused=false);
  component.addEventListener("focusin",()=>paused=true);
  component.addEventListener("focusout",event=>{
    if(!component.contains(event.relatedTarget))paused=false;
  });

showSlide(0);
  startAuto();
});
</script>

Related Examples

Testimonial Card

Anonymous

1 year ago

1.4k
Enhanced Student Testimonials Section
A modern, interactive testimonials section featuring glassmorphism design, floating animations, and social proof elements. Includes star ratings, course badges, user profiles with online status indicators, and a stats section. Built with Tailwind CSS and features gradient backgrounds, hover effects, and responsive design optimized for showcasing student success stories and building credibility.

Muhammad Umair Arshad

1 year ago

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

Bernard Omuse

2 years ago

3.3k
Testimonial card

Leon Bachmann

3 years ago

13k
Testimonial examples in Tailwind CSS
Here are some testimonial section examples using Tailwind CSS:

zobaidul kaziex

2 years ago

1.8k
Test99
test

Shakil Abdus Shohid

5 months ago

312
Testimonial Section
A responsive, SEO-friendly testimonial section for Ab Nahid Agency clients

Abdul Jabbar Al Nahid

1 year ago

1.3k
Premium Testimonial Carousel
It is a premium Testimonial Carousel

ishimwe shadad

1 year ago

2.3k
User product review card

Brandon D

3 years ago

15k
Testimonial card

Mr Robot

4 years ago

11.9k
Testimonial section
Gradient background and a testimonial quote with a highlighted phrase. The testimonial includes an image, name, and occupation.

Carla Hoffman

2 years ago

3.5k
Landing page

Maxim

1 year ago

2.8k