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 170 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>

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
Testimonial cards
each card contains a customer quote, an image of the customer, and their name.

Komal Jain

2 years ago

11.6k
Designing a Responsive Activity Feed with Tailwind CSS
Enhance your web application by building a sleek and responsive activity feed using Tailwind CSS. This comprehensive guide walks you through creating an interactive feed section featuring customizable icons, links, and timestamps. Learn how to implement a visually appealing and accessible timeline that adapts seamlessly to any device, improving user engagement and overall experience

zobaidul kaziex

2 years ago

3.2k
Profile, Team or Testimonial
Profile, Team or Testimonial

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

2 years ago

4.1k
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

11 months ago

764
Carousel

Crimson

1 year ago

8.3k
Testimonial Card with stars ratings

Quentin Rivers

2 years ago

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

Bernard Omuse

2 years ago

3.2k
Landing page

Maxim

1 year ago

2.8k
Testimonials section

Bunny

3 years ago

10.7k