Home
Kahsay Girmay
testimonial

testimonial

Testimonial as a carousel

This tailwind example is contributed by Kahsay Girmay, on 23-Dec-2024. Component is made with Tailwind CSS v3. similar terms for this example are endorsement,review

Carousel Testimonial

Author Kahsay Girmay

140

1

Fork Fullscreen

<template lang="">
        <div class="flex flex-col items-center justify-center min-h-screen bg-gradient-to-br  from-teal-100 to-indigo-300 mt-0 mb-20">
        <h2 class="text-4xl font-light mb-4">Testimonials</h2>
        <div class="relative w-[800px] h-[300px] overflow-hidden mb-6 rounded-xl" data-carousel="slide">
        <div v-for="(testimonial, index) in testimonials" :key="index" class="absolute w-full h-full transition-transform duration-500" :style="{ transform: `translateX(${(index - currentSlide) * 100}%)` }" >
          <div class="bg-white rounded-xl shadow-lg p-8 text-center h-full">
            <blockquote class="quote text-lg italic mt-4 mb-4">{{ testimonial.quote }}</blockquote>
            <div class="flex mt-10">
              <img class="h-10 w-10 rounded-full mr-4" :src="testimonial.image" alt="Avatar of person">
              <div>
                <p class="text-xl font-bold">{{ testimonial.name }}</p>
                <p class="text-sm text-gray-500">{{ testimonial.position }}</p>
              </div>
            </div>
          </div>
        </div>
      </div>

<div class="absolute flex mt-96 -ml-[710px] justify-start gap-1">
        <button @click="prevSlide" class="bg-white rounded-full flex items-center justify-center h-10 w-10 cursor-pointer">
          <svg class="w-4 h-4 text-black" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 1 1 5l4 4"/>
          </svg>
        </button>
        <button @click="nextSlide" class="bg-white rounded-full flex items-center justify-center h-10 w-10 cursor-pointer">
          <svg class="w-4 h-4 text-black" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 9 4-4-4-4"/>
          </svg>
        </button>
      </div>
      <div class="flex justify-start items-center relative w-96 h-1 bg-gray-300 mt-2">
        <div class="absolute h-full bg-gradient-to-r from-blue-500 to-purple-500 rounded-full" :style="{ width: progressBarWidth }"></div>
        <button @click="togglePause" class="ml-[540px] justify-end inline-flex  bg-white rounded-full p-3 cursor-pointer">
          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-4">
            <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 5.25v13.5m-7.5-13.5v13.5" />
          </svg>
        </button>
      </div>
  </div>
</template>

Related Examples

How to create a carousel with Tailwind CSS and Alpinejs
How to create a carousel with Tailwind CSS and Alpinejs

Author:
Michael Andreuzza

1 year ago

3.9k
Testimonials

$$@(\/)(\/)¥$ Author:
$@(\/)(\/)¥

9 months ago

1.7k
Premium Testimonial Carousel
It is a premium Testimonial Carousel

Author:
ishimwe shadad

8 months ago

1.5k
Testimonials

Author:
Lîmåã M

2 years ago

12k
Testimonial - Htmlwind
Single centered testimonial

Author:
Htmlwind

7 months ago

976
Tailwind Card Components
A collection of 20+ copy-paste ready card components built with pure HTML and Tailwind CSS. Includes product cards, profile cards, article cards, pricing cards, testimonials, and notifications.

Author:
Ijila Itunu

4 months ago

484
Simple Animated Carousel
A simple, animated 2:1 carousel with touch swipe support, based on perky98/Juraj's carousel.

Author:
Nick Girga

9 months ago

1.1k
Testimonial card with image

Author:
Simon Scheffer

3 years ago

12.1k
Minimal Testimonial Card

Author:
Amit Pachange

3 years ago

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

Author:
Akram Khan

1 year ago

3k
Testimonial

Author:
Steven Kuhn

3 years ago

14.2k
Testimonial card

Author:
Amit Pachange

3 years ago

11.8k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components

TailwindFlex.com

Tailwindflex.com is a free Tailwind CSS examples library. It's a one-stop destination for ready-made Tailwind CSS components and templates.

Contact

Email: admin@tailwindflex.com

Resources

Tailwind CSS Gradient Generator Free Bootstrap CSS Components Free CSS Components

© 2026 TailwindFlex. All Rights Reserved.

v1.12