testimonial

Testimonial as a carousel

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

Carousel Testimonial

Author Kahsay Girmay

Tailwind v3.4 172 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

Michael Andreuzza

2 years ago

4.3k
Testimonials

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

1 year ago

2.3k
Premium Testimonial Carousel
It is a premium Testimonial Carousel

ishimwe shadad

1 year ago

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

Bernard Omuse

2 years ago

3.3k
Carousel with Tailwind CSS and Alpine.js
Simple card Carousel

Brandon D

4 years ago

33.5k
grid masoneri
grid masoneri

Omer fils ELENGA

10 months ago

673
Modern page
hero page by salvator

Baraka Salvator

1 year ago

1.9k
Testimonial slide gradient

Freja Jensen

3 years ago

11.1k
Tailwind testimonials section

Kofi Osei

3 years ago

13.6k
Testimonial wall

yousef

2 years ago

4.1k
basichtml
this is basic html

Anonymous

1 year ago

930
Responsive Image Carousel with Alpine.js
This component is a fully responsive image carousel/slider that displays: 1 slide at a time on mobile devices (screen width < 768px) 3 slides at a time on desktop (screen width ≥ 768px)

Salah eldein

1 year ago

780

Browse by topic

Explore components by Tags

Jump straight to the UI pattern you need.

Footer Header Card Article Avatar FAQ Banner Blog Breadcrumb Button Call to Action Form Carousel Contact us Error page Feature Gallery Hero Input Spinner Login Modal Pagination Pricing Profile

Can't find it?

Didn't find the component you were looking for?

Search across 3,000+ community-built components and grab the code in seconds.