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

142

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

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

11 months ago

1.7k
Premium Testimonial Carousel
It is a premium Testimonial Carousel

Author:
ishimwe shadad

9 months ago

1.8k
card section neon
card section neon

Author:
Omer fils ELENGA

3 weeks ago

236
Testimonial Card

Author:
Anonymous

1 year ago

1k
Testimonial for dark theme

Author:
Sophia Baker

3 years ago

10.6k
Product Carousel with Tailwind CSS, Swiper & Alpine.js
A modern, responsive product carousel built with Tailwind CSS, Swiper, and Alpine.js. The component features smooth sliding animations, autoplay, and custom navigation controls. Each product card uses a flexible Tailwind layout and includes dynamically generated demo images, making it easy to drop into any landing page, marketing site, or product showcase. Ideal for showcasing products in a clean, lightweight, and highly customizable way.

Author:
Juraj

1 month ago

96
Testimonial Card with Floating Image and Star Rating
A beautifully designed testimonial card featuring a floating user image, review text, and a 5-star rating. The card uses a rounded layout with a bright yellow border, making it stand out on any page. Ideal for displaying customer feedback or product reviews with a modern look.

Author:
Anum Shahana

1 year ago

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

Author:
Coastal UI

1 year ago

1k
Image carousel
Uses Flowbite

Author:
Anonymous

1 year ago

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

Author:
ORGIN_DREAMS

9 months ago

1.2k
Carousel

Author:
Juraj

1 year ago

2.7k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components