Back to Discover

Tailwind CSS Testimonial Card Design

Amelia

Created Nov 03, 2025

0 views

0 likes

0 comments

0 forks

Export Fork Like

<script src="https://cdn.tailwindcss.com"></script>
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
<script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>
<body class="bg-gray-50 min-h-screen flex items-center justify-center p-6">

  <div class="max-w-4xl w-full" x-data="testimonials()">
    <!-- Testimonial Card -->
    <div class="bg-white rounded-2xl shadow-lg p-8 md:p-12 relative overflow-hidden">
      <!-- Quote Icon -->
      <div class="absolute top-8 right-8 text-gray-200">
        <ion-icon name="chatbox-ellipses" class="text-6xl"></ion-icon>
      </div>

      <!-- Stars Rating -->
      <div class="flex gap-1 mb-6">
        <template x-for="i in 5" :key="i">
          <ion-icon name="star" class="text-yellow-400 text-xl"></ion-icon>
        </template>
      </div>

      <!-- Testimonial Text -->
      <div class="relative z-10 mb-8">
        <p class="text-gray-700 text-lg leading-relaxed" x-text="currentTestimonial.text"></p>
      </div>

      <!-- Author Info -->
      <div class="flex items-center gap-4 mb-8">
        <img :src="currentTestimonial.avatar" 
             :alt="currentTestimonial.name"
             class="w-16 h-16 rounded-full object-cover border-2 border-gray-100">
        <div>
          <h4 class="font-semibold text-gray-900 text-lg" x-text="currentTestimonial.name"></h4>
          <p class="text-gray-500 text-sm" x-text="currentTestimonial.role"></p>
        </div>
      </div>

      <!-- Navigation Dots -->
      <div class="flex items-center justify-center gap-2">
        <template x-for="(testimonial, index) in testimonials" :key="index">
          <button 
                  @click="currentIndex = index"
                  :class="currentIndex === index ? 'bg-blue-600 w-8' : 'bg-gray-300 w-2'"
                  class="h-2 rounded-full transition-all duration-300 hover:bg-blue-400">
          </button>
        </template>
      </div>

      <!-- Navigation Arrows -->
      <div class="absolute top-1/2 -translate-y-1/2 left-4 right-4 flex justify-between pointer-events-none">
        <button 
                @click="prev()"
                class="pointer-events-auto bg-white rounded-full p-2 shadow-md hover:shadow-lg transition-shadow hover:bg-gray-50">
          <ion-icon name="chevron-back" class="text-2xl text-gray-700"></ion-icon>
        </button>
        <button 
                @click="next()"
                class="pointer-events-auto bg-white rounded-full p-2 shadow-md hover:shadow-lg transition-shadow hover:bg-gray-50">
          <ion-icon name="chevron-forward" class="text-2xl text-gray-700"></ion-icon>
        </button>
      </div>
    </div>
  </div>

     function testimonials() {
            return {
                currentIndex: 0,
                testimonials: [
                    {
                        text: "This product has completely transformed the way we work. The intuitive design and powerful features have helped us increase productivity by 40%. I couldn't recommend it more highly!",
                        name: "Sarah Johnson",
                        role: "CEO at TechCorp",
                        avatar: "https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=150&h=150&fit=crop"
                    },
                    {
                        text: "Outstanding customer service and a fantastic product. The team went above and beyond to ensure our success. It's rare to find a company that truly cares about their clients.",
                        name: "Michael Chen",
                        role: "Product Manager at InnovateLabs",
                        avatar: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=150&h=150&fit=crop"
                    },
                    {
                        text: "I've tried many similar solutions, but none come close to this level of quality and reliability. The attention to detail is impressive, and the results speak for themselves.",
                        name: "Emily Rodriguez",
                        role: "Marketing Director at BrandWorks",
                        avatar: "https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=150&h=150&fit=crop"
                    }
                ],
                get currentTestimonial() {
                    return this.testimonials[this.currentIndex];
                },
                next() {
                    this.currentIndex = (this.currentIndex + 1) % this.testimonials.length;
                },
                prev() {
                    this.currentIndex = this.currentIndex === 0 
                        ? this.testimonials.length - 1 
                        : this.currentIndex - 1;
                }
            }
        }

Comments (0)

No comments yet. Be the first!