Testimonial Rails Components

Showcase customer feedback and build trust with beautiful testimonial components. Perfect for landing pages, product showcases, and social proof sections.

Examples

Basic Testimonial

A simple testimonial component with quote, author name, and title.

"This product has completely transformed how we approach our daily workflow. The intuitive design and powerful features have saved us countless hours and improved our team's productivity significantly."

<div class="max-w-2xl mx-auto text-center">
  <blockquote class="text-lg text-neutral-900 dark:text-white mb-4">
    "This product has completely transformed how we approach our daily workflow. The intuitive design and powerful features have saved us countless hours and improved our team's productivity significantly."
  </blockquote>
  <footer class="flex flex-col items-center gap-2">
    <div class="mx-auto size-10 rounded-full bg-neutral-100 dark:bg-neutral-800 flex items-center justify-center">
      <%= image_tag "https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80", class: "w-full h-full object-cover rounded-full" %>
    </div>
    <div class="font-semibold text-neutral-900 dark:text-white">Sarah Johnson</div>
    <div class="text-sm text-neutral-500 dark:text-neutral-400">Product Manager at TechCorp</div>
  </footer>
</div>

Testimonial card with avatar

Enhanced testimonial with customer avatar shown first.

Emily Chen

Senior Designer at CreativeCo

"The attention to detail in this product is remarkable. Every interaction feels thoughtful and purposeful. It's rare to find software that combines such powerful functionality with an elegant user experience."

<div class="max-w-2xl mx-auto">
  <div class="bg-white dark:bg-neutral-900 rounded-lg border border-black/10 dark:border-white/10 p-8">
    <div class="flex items-center mb-4">
      <%= image_tag "https://images.unsplash.com/photo-1580489944761-15a19d654956?w=100&h=100&fit=crop", class: "size-10 rounded-full object-cover" %>
      <div class="ml-4">
        <div class="font-semibold text-neutral-900 dark:text-white">Emily Chen</div>
        <div class="text-sm text-neutral-500 dark:text-neutral-400">Senior Designer at CreativeCo</div>
      </div>
    </div>
    <blockquote class="text-neutral-700 dark:text-neutral-300 leading-relaxed">
      "The attention to detail in this product is remarkable. Every interaction feels thoughtful and purposeful. It's rare to find software that combines such powerful functionality with an elegant user experience."
    </blockquote>
  </div>
</div>

Testimonial card with star rating

Testimonial component featuring star ratings for product reviews.

"Outstanding quality and service! This exceeded all my expectations. The team was responsive, professional, and delivered exactly what was promised. I would definitely recommend this to anyone looking for a reliable solution."

<div class="max-w-2xl mx-auto">
  <div class="bg-white dark:bg-neutral-900 rounded-lg border border-black/10 dark:border-white/10 p-8 text-center">
    <!-- Star Rating -->
    <div class="flex justify-center mb-4">
      <div class="flex items-center space-x-1">
        <svg class="size-5 text-yellow-400 fill-current" viewBox="0 0 20 20">
          <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/>
        </svg>
        <svg class="size-5 text-yellow-400 fill-current" viewBox="0 0 20 20">
          <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/>
        </svg>
        <svg class="size-5 text-yellow-400 fill-current" viewBox="0 0 20 20">
          <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/>
        </svg>
        <svg class="size-5 text-yellow-400 fill-current" viewBox="0 0 20 20">
          <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/>
        </svg>
        <svg class="size-5 text-yellow-400 fill-current" viewBox="0 0 20 20">
          <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/>
        </svg>
      </div>
    </div>

    <blockquote class="text-lg text-neutral-700 dark:text-neutral-300 mb-4">
      "Outstanding quality and service! This exceeded all my expectations. The team was responsive, professional, and delivered exactly what was promised. I would definitely recommend this to anyone looking for a reliable solution."
    </blockquote>

    <footer>
      <div class="flex items-center justify-center">
        <%= image_tag "https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80", class: "size-10 rounded-full object-cover" %>
        <div class="ml-3 text-left">
          <div class="font-semibold text-neutral-900 dark:text-white">Michael Rodriguez</div>
          <div class="text-sm text-neutral-500 dark:text-neutral-400">Verified Customer</div>
        </div>
      </div>
    </footer>
  </div>
</div>

Testimonial Grid

Multiple testimonials displayed in a responsive grid layout.

"Game-changing tool that simplified our entire workflow. Highly recommend!"

"The customer support is incredible. They went above and beyond to help us succeed."

"Beautiful design and seamless functionality. It's exactly what we needed."

"Incredible value for money. This has transformed how we operate daily."

"Fast, reliable, and user-friendly. Everything we could ask for in a solution."

"The integration was smooth and the results were immediate. Fantastic product!"

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
  <!-- Testimonial 1 -->
  <div class="bg-white dark:bg-neutral-900 rounded-lg border border-neutral-200 dark:border-neutral-700 p-6 flex flex-col justify-between">
    <blockquote class="text-neutral-700 dark:text-neutral-300 mb-4">
      "Game-changing tool that simplified our entire workflow. Highly recommend!"
    </blockquote>
    <footer class="flex items-center">
      <img class="size-8 rounded-full object-cover" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80" alt="Alex Thompson" />
      <div class="ml-3">
        <div class="text-sm font-semibold text-neutral-900 dark:text-white">Alex Thompson</div>
        <div class="text-xs text-neutral-500 dark:text-neutral-400">CEO, StartupXYZ</div>
      </div>
    </footer>
  </div>

  <!-- Testimonial 2 -->
  <div class="bg-white dark:bg-neutral-900 rounded-lg border border-neutral-200 dark:border-neutral-700 p-6 flex flex-col justify-between">
    <blockquote class="text-neutral-700 dark:text-neutral-300 mb-4">
      "The customer support is incredible. They went above and beyond to help us succeed."
    </blockquote>
    <footer class="flex items-center">
      <img class="size-8 rounded-full object-cover" src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80" alt="Lisa Wang" />
      <div class="ml-3">
        <div class="text-sm font-semibold text-neutral-900 dark:text-white">Lisa Wang</div>
        <div class="text-xs text-neutral-500 dark:text-neutral-400">Marketing Director</div>
      </div>
    </footer>
  </div>

  <!-- Testimonial 3 -->
  <div class="bg-white dark:bg-neutral-900 rounded-lg border border-neutral-200 dark:border-neutral-700 p-6 flex flex-col justify-between">
    <blockquote class="text-neutral-700 dark:text-neutral-300 mb-4">
      "Beautiful design and seamless functionality. It's exactly what we needed."
    </blockquote>
    <footer class="flex items-center">
      <img class="size-8 rounded-full object-cover" src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80" alt="David Kim" />
      <div class="ml-3">
        <div class="text-sm font-semibold text-neutral-900 dark:text-white">David Kim</div>
        <div class="text-xs text-neutral-500 dark:text-neutral-400">Lead Developer</div>
      </div>
    </footer>
  </div>

  <!-- Testimonial 4 -->
  <div class="bg-white dark:bg-neutral-900 rounded-lg border border-neutral-200 dark:border-neutral-700 p-6 flex flex-col justify-between">
    <blockquote class="text-neutral-700 dark:text-neutral-300 mb-4">
      "Incredible value for money. This has transformed how we operate daily."
    </blockquote>
    <footer class="flex items-center">
      <img class="size-8 rounded-full object-cover" src="https://images.unsplash.com/photo-1544005313-94ddf0286df2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80" alt="Rachel Green" />
      <div class="ml-3">
        <div class="text-sm font-semibold text-neutral-900 dark:text-white">Rachel Green</div>
        <div class="text-xs text-neutral-500 dark:text-neutral-400">Operations Manager</div>
      </div>
    </footer>
  </div>

  <!-- Testimonial 5 -->
  <div class="bg-white dark:bg-neutral-900 rounded-lg border border-neutral-200 dark:border-neutral-700 p-6 flex flex-col justify-between">
    <blockquote class="text-neutral-700 dark:text-neutral-300 mb-4">
      "Fast, reliable, and user-friendly. Everything we could ask for in a solution."
    </blockquote>
    <footer class="flex items-center">
      <img class="size-8 rounded-full object-cover" src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80" alt="James Wilson" />
      <div class="ml-3">
        <div class="text-sm font-semibold text-neutral-900 dark:text-white">James Wilson</div>
        <div class="text-xs text-neutral-500 dark:text-neutral-400">Project Manager</div>
      </div>
    </footer>
  </div>

  <!-- Testimonial 6 -->
  <div class="bg-white dark:bg-neutral-900 rounded-lg border border-neutral-200 dark:border-neutral-700 p-6 flex flex-col justify-between">
    <blockquote class="text-neutral-700 dark:text-neutral-300 mb-4">
      "The integration was smooth and the results were immediate. Fantastic product!"
    </blockquote>
    <footer class="flex items-center">
      <img class="size-8 rounded-full object-cover" src="https://images.unsplash.com/photo-1580489944761-15a19d654956?w=100&h=100&fit=crop" alt="Maria Garcia" />
      <div class="ml-3">
        <div class="text-sm font-semibold text-neutral-900 dark:text-white">Maria Garcia</div>
        <div class="text-xs text-neutral-500 dark:text-neutral-400">Technical Lead</div>
      </div>
    </footer>
  </div>
</div>

Testimonial with Background Image

Hero-style testimonial with background image and gradient overlay, inspired by modern design patterns.

"I'm absolutely floored by the level of care and attention to detail the team at Rails Blocks have put into this project. The components are not just beautiful, they're incredibly functional and have transformed how we build our applications. I can guarantee that we will be a return customer."

<div class="relative max-w-xl mx-auto rounded-xl overflow-hidden">
  <!-- Background Image -->
  <img class="absolute inset-0 w-full h-full object-cover rounded-xl outline outline-2 -outline-offset-2 outline-black/20 dark:outline-white/20" src="https://images.unsplash.com/photo-1665686306574-1ace09918530?ixlib=rb-4.0.3&ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1200&h=600&q=80" alt="Modern office space" />

  <!-- Gradient Overlay -->
  <div class="absolute inset-0 bg-gradient-to-t from-neutral-900/90 via-neutral-900/50 to-neutral-900/30"></div>

  <!-- Content -->
  <div class="relative z-10 px-8 py-16 md:px-12 md:py-24 text-center text-white">
    <!-- Quote Icon -->
    <div class="mb-8">
      <svg class="w-12 h-12 mx-auto text-white/80" viewBox="0 0 24 24" fill="currentColor">
        <path d="M14.017 21v-7.391c0-5.704 3.731-9.57 8.983-10.609l.995 2.151c-2.432.917-3.995 3.638-3.995 5.849h4v10h-9.983zm-14.017 0v-7.391c0-5.704 3.748-9.57 9-10.609l.996 2.151c-2.433.917-3.996 3.638-3.996 5.849h4v10h-10z"/>
      </svg>
    </div>

    <!-- Testimonial Text -->
    <blockquote class="text-xl md:text-2xl font-medium leading-relaxed mb-8 max-w-3xl mx-auto">
      "I'm absolutely floored by the level of care and attention to detail the team at Rails Blocks have put into this project. The components are not just beautiful, they're incredibly functional and have transformed how we build our applications. I can guarantee that we will be a return customer."
    </blockquote>

    <!-- Author -->
    <footer class="flex flex-col items-center">
      <img class="size-16 rounded-full object-cover mb-4 border-2 border-white/20" src="https://images.unsplash.com/photo-1560250097-0b93528c311a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80" alt="John Doe" />
      <div class="font-semibold text-lg">John Doe</div>
      <div class="text-white/80">Director of Engineering, InnovateLabs</div>
    </footer>
  </div>
</div>

Testimonials appearing in popovers

Testimonials appearing in popovers when hovering over avatars. This requires the Popover component.

Customer Testimonials

Product Rating

<div class="space-y-8">
  <!-- Example 1: Testimonial avatars with quotes -->
  <section class="text-center">
    <h3 class="mb-4 text-lg font-semibold text-neutral-900 dark:text-neutral-100">Customer Testimonials</h3>

    <div class="flex items-center justify-center gap-2">
      <!-- Customer 1 -->
      <div class="relative h-10" data-controller="popover" data-popover-delay-value="300" data-popover-placement-value="bottom" data-popover-interactive-value="true" data-popover-animation-value="fade origin">
        <button type="button" data-popover-target="button" class="size-10 overflow-hidden rounded-full ring-2 ring-white dark:ring-neutral-800">
          <img class="h-full w-full object-cover transition-transform hover:scale-110" alt="Customer 1" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=100&h=100&fit=crop" />
        </button>
        <template data-popover-target="content">
          <div class="max-w-xs p-3">
            <p class="text-sm text-neutral-700 dark:text-neutral-200">"Excellent product! Has saved me hours of development time."</p>
            <p class="mt-2 text-xs text-neutral-500 dark:text-neutral-400">- John D., Developer</p>
          </div>
        </template>
      </div>

      <!-- Customer 2 -->
      <div class="relative -ml-4 h-10" data-controller="popover" data-popover-delay-value="300" data-popover-placement-value="bottom" data-popover-interactive-value="true" data-popover-animation-value="fade origin">
        <button type="button" data-popover-target="button" class="size-10 overflow-hidden rounded-full ring-2 ring-white dark:ring-neutral-800">
          <img class="h-full w-full object-cover transition-transform hover:scale-110" alt="Customer 2" src="https://images.unsplash.com/photo-1580489944761-15a19d654956?w=100&h=100&fit=crop" />
        </button>
        <template data-popover-target="content">
          <div class="max-w-xs p-3">
            <p class="text-sm text-neutral-700 dark:text-neutral-200">"The UI components are beautiful and so easy to customize!"</p>
            <p class="mt-2 text-xs text-neutral-500 dark:text-neutral-400">- Emma S., Designer</p>
          </div>
        </template>
      </div>

      <!-- Customer 3 -->
      <div class="relative -ml-4 h-10" data-controller="popover" data-popover-delay-value="300" data-popover-placement-value="bottom" data-popover-interactive-value="true" data-popover-animation-value="fade origin">
        <button type="button" data-popover-target="button" class="size-10 overflow-hidden rounded-full ring-2 ring-white dark:ring-neutral-800">
          <img class="h-full w-full object-cover transition-transform hover:scale-110" alt="Customer 3" src="https://images.unsplash.com/photo-1570295999919-56ceb5ecca61?w=100&h=100&fit=crop" />
        </button>
        <template data-popover-target="content">
          <div class="max-w-xs p-3">
            <p class="text-sm text-neutral-700 dark:text-neutral-200">"Best component library I've worked with. Highly recommend!"</p>
            <p class="mt-2 text-xs text-neutral-500 dark:text-neutral-400">- Mike R., Full Stack</p>
          </div>
        </template>
      </div>

      <!-- More indicator -->
      <div class="relative -ml-4 h-10">
        <button type="button" class="size-10 overflow-hidden rounded-full bg-neutral-100 ring-2 ring-white dark:bg-neutral-800 dark:ring-neutral-800">
          <div class="flex h-full w-full items-center justify-center object-cover text-xs font-medium text-neutral-600 transition-transform hover:scale-110 dark:text-neutral-400">+12</div>
        </button>
      </div>
    </div>
  </section>

  <!-- Example 2: Star rating with review count -->
  <section class="text-center">
    <h3 class="mb-4 text-lg font-semibold text-neutral-900 dark:text-neutral-100">Product Rating</h3>

    <div class="inline-flex items-center gap-2">
      <!-- Star rating -->
      <div class="flex">
        <svg class="h-5 w-5 fill-current text-yellow-400" viewBox="0 0 20 20">
          <path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z" />
        </svg>
        <svg class="h-5 w-5 fill-current text-yellow-400" viewBox="0 0 20 20">
          <path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z" />
        </svg>
        <svg class="h-5 w-5 fill-current text-yellow-400" viewBox="0 0 20 20">
          <path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z" />
        </svg>
        <svg class="h-5 w-5 fill-current text-yellow-400" viewBox="0 0 20 20">
          <path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z" />
        </svg>
        <!-- Half-filled star -->
        <svg class="h-5 w-5" viewBox="0 0 20 20">
          <defs>
            <linearGradient id="half-fill">
              <stop offset="50%" stop-color="#fbbf24" />
              <stop offset="50%" stop-color="#d1d5db" />
            </linearGradient>
          </defs>
          <path fill="url(#half-fill)" d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z" />
        </svg>
      </div>

      <!-- Review count with popover -->
      <div class="relative" data-controller="popover" data-popover-delay-value="500" data-popover-placement-value="bottom" data-popover-animation-value="fade">
        <button type="button" data-popover-target="button" class="text-sm text-neutral-600 underline hover:text-neutral-900 dark:text-neutral-400 dark:hover:text-neutral-100">(128 reviews)</button>
        <template data-popover-target="content">
          <div class="space-y-2 p-3">
            <div class="flex items-center gap-2">
              <span class="text-xs text-neutral-600 dark:text-neutral-400">5 stars</span>
              <div class="h-2 w-24 rounded-full bg-neutral-200 dark:bg-neutral-700">
                <div class="h-2 rounded-full bg-yellow-400" style="width: 75%"></div>
              </div>
              <span class="text-xs text-neutral-600 dark:text-neutral-400">96</span>
            </div>
            <div class="flex items-center gap-2">
              <span class="text-xs text-neutral-600 dark:text-neutral-400">4 stars</span>
              <div class="h-2 w-24 rounded-full bg-neutral-200 dark:bg-neutral-700">
                <div class="h-2 rounded-full bg-yellow-400" style="width: 15%"></div>
              </div>
              <span class="text-xs text-neutral-600 dark:text-neutral-400">19</span>
            </div>
            <div class="flex items-center gap-2">
              <span class="text-xs text-neutral-600 dark:text-neutral-400">3 stars</span>
              <div class="h-2 w-24 rounded-full bg-neutral-200 dark:bg-neutral-700">
                <div class="h-2 rounded-full bg-yellow-400" style="width: 7%"></div>
              </div>
              <span class="text-xs text-neutral-600 dark:text-neutral-400">9</span>
            </div>
            <div class="flex items-center gap-2">
              <span class="text-xs text-neutral-600 dark:text-neutral-400">2 stars</span>
              <div class="h-2 w-24 rounded-full bg-neutral-200 dark:bg-neutral-700">
                <div class="h-2 rounded-full bg-yellow-400" style="width: 2%"></div>
              </div>
              <span class="text-xs text-neutral-600 dark:text-neutral-400">3</span>
            </div>
            <div class="flex items-center gap-2">
              <span class="text-xs text-neutral-600 dark:text-neutral-400">1 star</span>
              <div class="h-2 w-24 rounded-full bg-neutral-200 dark:bg-neutral-700">
                <div class="h-2 rounded-full bg-yellow-400" style="width: 1%"></div>
              </div>
              <span class="text-xs text-neutral-600 dark:text-neutral-400">1</span>
            </div>
          </div>
        </template>
      </div>
    </div>
  </section>
</div>

Testimonial Marquee

Continuously scrolling testimonials using the marquee component. Perfect for showcasing multiple reviews. This requires the Marquee component.

Alex Thompson

CEO, StartupXYZ

"This platform has completely transformed our development workflow. The components are beautifully crafted."

Lisa Wang

Marketing Director

"Outstanding customer support and incredible attention to detail. This product exceeded all our expectations."

David Kim

Lead Developer

"The code quality is exceptional and the documentation is thorough. Perfect for our development process."

Rachel Green

Operations Manager

"Incredible value for money. The integration was seamless and the impact on productivity has been immediate."

James Wilson

Project Manager

"Fast, reliable, and user-friendly. This solution has everything we could ask for and more."

Maria Garcia

Technical Lead

"The design system is comprehensive and the components are production-ready. Perfect for our team."

Jennifer Martinez

CTO, InnovateTech

"Exceptional quality and performance. This has become an essential part of our development toolkit."

Hover to pause • Testimonials scroll automatically

<div data-controller="marquee" data-marquee-hover-speed-value="0" data-marquee-speed-value="30" data-marquee-direction-value="left" class="w-full relative overflow-hidden" data-action="mouseenter->marquee#pauseAnimation mouseleave->marquee#resumeAnimation">
  <!-- Marquee overlay gradients -->
  <!-- Left gradient do define depending your page background color -->
  <div class="absolute inset-y-0 left-0 z-10 w-32 bg-gradient-to-r from-white to-transparent dark:from-[#050505]" aria-hidden="true"></div>
  <!-- Right gradient do define depending your page background color -->
  <div class="absolute inset-y-0 right-0 z-10 w-32 bg-gradient-to-l from-white to-transparent dark:from-[#050505]" aria-hidden="true"></div>
  <!-- END Marquee overlay gradients -->

  <!-- Marquee Track -->
  <div data-marquee-target="track" class="relative flex w-full">
    <!-- Marquee list -->
    <div data-marquee-target="list" class="flex shrink-0 flex-nowrap items-center justify-between gap-4">
      <!-- Testimonial 1 -->
      <div class="ml-4 h-full w-72 flex-shrink-0 rounded-lg border border-neutral-200 bg-white p-6 shadow-sm dark:border-neutral-700 dark:bg-neutral-900">
        <div class="mb-3 flex items-center">
          <img class="size-8 rounded-full object-cover" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80" alt="Alex Thompson" />
          <div class="ml-3">
            <div class="text-sm font-semibold text-neutral-900 dark:text-white">Alex Thompson</div>
            <div class="text-xs text-neutral-500 dark:text-neutral-400">CEO, StartupXYZ</div>
          </div>
        </div>
        <blockquote class="text-sm text-neutral-700 dark:text-neutral-300">"This platform has completely transformed our development workflow. The components are beautifully crafted."</blockquote>
      </div>

      <!-- Testimonial 2 -->
      <div class="h-full w-72 flex-shrink-0 rounded-lg border border-neutral-200 bg-white p-6 shadow-sm dark:border-neutral-700 dark:bg-neutral-900">
        <div class="mb-3 flex items-center">
          <img class="size-8 rounded-full object-cover" src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80" alt="Lisa Wang" />
          <div class="ml-3">
            <div class="text-sm font-semibold text-neutral-900 dark:text-white">Lisa Wang</div>
            <div class="text-xs text-neutral-500 dark:text-neutral-400">Marketing Director</div>
          </div>
        </div>
        <blockquote class="text-sm text-neutral-700 dark:text-neutral-300">"Outstanding customer support and incredible attention to detail. This product exceeded all our expectations."</blockquote>
      </div>

      <!-- Testimonial 3 -->
      <div class="h-full w-72 flex-shrink-0 rounded-lg border border-neutral-200 bg-white p-6 shadow-sm dark:border-neutral-700 dark:bg-neutral-900">
        <div class="mb-3 flex items-center">
          <img class="size-8 rounded-full object-cover" src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80" alt="David Kim" />
          <div class="ml-3">
            <div class="text-sm font-semibold text-neutral-900 dark:text-white">David Kim</div>
            <div class="text-xs text-neutral-500 dark:text-neutral-400">Lead Developer</div>
          </div>
        </div>
        <blockquote class="text-sm text-neutral-700 dark:text-neutral-300">"The code quality is exceptional and the documentation is thorough. Perfect for our development process."</blockquote>
      </div>

      <!-- Testimonial 4 -->
      <div class="h-full w-72 flex-shrink-0 rounded-lg border border-neutral-200 bg-white p-6 shadow-sm dark:border-neutral-700 dark:bg-neutral-900">
        <div class="mb-3 flex items-center">
          <img class="size-8 rounded-full object-cover" src="https://images.unsplash.com/photo-1544005313-94ddf0286df2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80" alt="Rachel Green" />
          <div class="ml-3">
            <div class="text-sm font-semibold text-neutral-900 dark:text-white">Rachel Green</div>
            <div class="text-xs text-neutral-500 dark:text-neutral-400">Operations Manager</div>
          </div>
        </div>
        <blockquote class="text-sm text-neutral-700 dark:text-neutral-300">"Incredible value for money. The integration was seamless and the impact on productivity has been immediate."</blockquote>
      </div>

      <!-- Testimonial 5 -->
      <div class="h-full w-72 flex-shrink-0 rounded-lg border border-neutral-200 bg-white p-6 shadow-sm dark:border-neutral-700 dark:bg-neutral-900">
        <div class="mb-3 flex items-center">
          <img class="size-8 rounded-full object-cover" src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80" alt="James Wilson" />
          <div class="ml-3">
            <div class="text-sm font-semibold text-neutral-900 dark:text-white">James Wilson</div>
            <div class="text-xs text-neutral-500 dark:text-neutral-400">Project Manager</div>
          </div>
        </div>
        <blockquote class="text-sm text-neutral-700 dark:text-neutral-300">"Fast, reliable, and user-friendly. This solution has everything we could ask for and more."</blockquote>
      </div>

      <!-- Testimonial 6 -->
      <div class="h-full w-72 flex-shrink-0 rounded-lg border border-neutral-200 bg-white p-6 shadow-sm dark:border-neutral-700 dark:bg-neutral-900">
        <div class="mb-3 flex items-center">
          <img class="size-8 rounded-full object-cover" src="https://images.unsplash.com/photo-1580489944761-15a19d654956?w=100&h=100&fit=crop" alt="Maria Garcia" />
          <div class="ml-3">
            <div class="text-sm font-semibold text-neutral-900 dark:text-white">Maria Garcia</div>
            <div class="text-xs text-neutral-500 dark:text-neutral-400">Technical Lead</div>
          </div>
        </div>
        <blockquote class="text-sm text-neutral-700 dark:text-neutral-300">"The design system is comprehensive and the components are production-ready. Perfect for our team."</blockquote>
      </div>

      <!-- Testimonial 7 -->
      <div class="h-full w-72 flex-shrink-0 rounded-lg border border-neutral-200 bg-white p-6 shadow-sm dark:border-neutral-700 dark:bg-neutral-900">
        <div class="mb-3 flex items-center">
          <img class="size-8 rounded-full object-cover" src="https://images.unsplash.com/photo-1560250097-0b93528c311a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80" alt="Jennifer Martinez" />
          <div class="ml-3">
            <div class="text-sm font-semibold text-neutral-900 dark:text-white">Jennifer Martinez</div>
            <div class="text-xs text-neutral-500 dark:text-neutral-400">CTO, InnovateTech</div>
          </div>
        </div>
        <blockquote class="text-sm text-neutral-700 dark:text-neutral-300">"Exceptional quality and performance. This has become an essential part of our development toolkit."</blockquote>
      </div>
    </div>
    <!-- END Marquee List -->
  </div>
  <!-- END Marquee Track -->

  <div class="mt-4 text-center">
    <p class="text-sm text-neutral-500 dark:text-neutral-400">Hover to pause • Testimonials scroll automatically</p>
  </div>
</div>

Auto-Switching Testimonials

Testimonials that automatically cycle through using the tabs controller with progress indicator. This requires the Tabs component.

"Rails Blocks has been a game-changer for our development team. The quality of components and the time saved is incredible. We've been able to ship features 3x faster than before."

<div data-controller="tabs" data-tabs-active-tab-class="bg-neutral-900 text-white shadow-sm dark:bg-white dark:text-neutral-900" data-tabs-inactive-tab-class="bg-neutral-100 text-neutral-600 dark:bg-neutral-800 dark:text-neutral-400" data-tabs-auto-switch-value="true" data-tabs-auto-switch-interval-value="5000" data-tabs-pause-on-hover-value="true" data-tabs-show-progress-bar-value="true" data-tabs-index-value="0" class="mx-auto w-full max-w-4xl">
  <!-- Progress Bar -->
  <div class="mb-6 h-1 w-full overflow-hidden rounded-full bg-neutral-200 dark:bg-neutral-700">
    <div data-tabs-target="progressBar" class="h-full rounded-full bg-neutral-900 transition-all duration-100 dark:bg-white" style="width: 0%"></div>
  </div>

  <!-- Tab Navigation -->
  <div class="absolute right-0 -bottom-6 sm:-bottom-4 left-0 mb-8 flex justify-center" data-tabs-target="tabList" role="tablist">
    <div class="flex gap-1 rounded-lg p-1">
      <button class="size-3.5 rounded-full border border-black/20 text-sm font-medium transition-all duration-200 dark:border-white/20" data-tabs-target="tab" data-action="click->tabs#change:prevent" role="tab"></button>
      <button class="size-3.5 rounded-full border border-black/20 text-sm font-medium transition-all duration-200 dark:border-white/20" data-tabs-target="tab" data-action="click->tabs#change:prevent" role="tab"></button>
      <button class="size-3.5 rounded-full border border-black/20 text-sm font-medium transition-all duration-200 dark:border-white/20" data-tabs-target="tab" data-action="click->tabs#change:prevent" role="tab"></button>
      <button class="size-3.5 rounded-full border border-black/20 text-sm font-medium transition-all duration-200 dark:border-white/20" data-tabs-target="tab" data-action="click->tabs#change:prevent" role="tab"></button>
    </div>
  </div>

  <!-- Testimonial Panels -->
  <div class="flex min-h-[300px] items-center justify-center rounded-lg border border-black/10 bg-white p-8 text-center shadow-xs dark:border-white/10 dark:bg-neutral-900" data-tabs-target="panel" role="tabpanel">
    <div class="max-w-2xl">
      <blockquote class="mb-4 text-xl text-neutral-900 dark:text-white">"Rails Blocks has been a game-changer for our development team. The quality of components and the time saved is incredible. We've been able to ship features 3x faster than before."</blockquote>
      <footer class="flex items-center justify-center">
        <img class="size-12 rounded-full object-cover" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80" alt="Alex Thompson" />
        <div class="ml-4 text-left">
          <div class="font-semibold text-neutral-900 dark:text-white">Alex Thompson</div>
          <div class="text-sm text-neutral-500 dark:text-neutral-400">CEO, StartupXYZ</div>
        </div>
      </footer>
    </div>
  </div>

  <div class="flex hidden min-h-[300px] items-center justify-center rounded-lg border border-black/10 bg-white p-8 text-center dark:border-white/10 dark:bg-neutral-900" data-tabs-target="panel" role="tabpanel">
    <div class="max-w-2xl">
      <blockquote class="mb-4 text-xl text-neutral-900 dark:text-white">"The attention to detail and user experience is outstanding. Every component feels thoughtfully designed and works perfectly out of the box. Our customers have noticed the difference."</blockquote>
      <footer class="flex items-center justify-center">
        <img class="size-12 rounded-full object-cover" src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80" alt="Lisa Wang" />
        <div class="ml-4 text-left">
          <div class="font-semibold text-neutral-900 dark:text-white">Lisa Wang</div>
          <div class="text-sm text-neutral-500 dark:text-neutral-400">Marketing Director, CreativeCo</div>
        </div>
      </footer>
    </div>
  </div>

  <div class="flex hidden min-h-[300px] items-center justify-center rounded-lg border border-black/10 bg-white p-8 text-center dark:border-white/10 dark:bg-neutral-900" data-tabs-target="panel" role="tabpanel">
    <div class="max-w-2xl">
      <blockquote class="mb-4 text-xl text-neutral-900 dark:text-white">"As a developer, I appreciate the clean code and excellent documentation. The components are well-architected and easy to customize. It's saved us months of development time."</blockquote>
      <footer class="flex items-center justify-center">
        <img class="size-12 rounded-full object-cover" src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80" alt="David Kim" />
        <div class="ml-4 text-left">
          <div class="font-semibold text-neutral-900 dark:text-white">David Kim</div>
          <div class="text-sm text-neutral-500 dark:text-neutral-400">Lead Developer, TechFlow</div>
        </div>
      </footer>
    </div>
  </div>

  <div class="flex hidden min-h-[300px] items-center justify-center rounded-lg border border-black/10 bg-white p-8 text-center dark:border-white/10 dark:bg-neutral-900" data-tabs-target="panel" role="tabpanel">
    <div class="max-w-2xl">
      <blockquote class="mb-4 text-xl text-neutral-900 dark:text-white">"The ROI has been phenomenal. We've reduced our design and development costs significantly while improving the quality of our user interfaces. Highly recommended for any product team."</blockquote>
      <footer class="flex items-center justify-center">
        <img class="size-12 rounded-full object-cover" src="https://images.unsplash.com/photo-1544005313-94ddf0286df2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80" alt="Rachel Green" />
        <div class="ml-4 text-left">
          <div class="font-semibold text-neutral-900 dark:text-white">Rachel Green</div>
          <div class="text-sm text-neutral-500 dark:text-neutral-400">Product Manager, InnovateTech</div>
        </div>
      </footer>
    </div>
  </div>
</div>

Tabs

Tooltip