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

103

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>

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.3k
Testimonials

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

3 months ago

1k
Premium Testimonial Carousel
It is a premium Testimonial Carousel

Author:
ishimwe shadad

2 months ago

504
Tailwind image slider
slider with navigation buttons and info about image

Author:
Anonymous

1 year ago

19.7k
Review cards with social proof icons

Author:
kishan pc

1 year ago

2.1k
Testimonials

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

6 months ago

967
Modern Testimonial
A simple and easy to use component for reviews and testimonials.

Author:
Coastal UI

5 months ago

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

Author:
zobaidul kaziex

9 months ago

1.1k
responsive slider carousel
slider carousel

Author:
Abhiraj

6 months ago

1.8k
tailwind testimonial card

Author:
Ron Hicks

2 years ago

9.6k
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)

Author:
Juraj

2 months ago

556
ArtoGallery
Explore a curated selection of contemporary and classic artwork, connecting collectors and creators in an inspiring online space.

Author:
ORGIN_DREAMS

2 months ago

311

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components