Tailwind Testimonials Components (281)

Framework

UI Library

7-Day Pass

Full Shuffle Editor access for just $10

Great for quick projects and for testing everything Shuffle can do. One-time payment, not a subscription.

New to Shuffle? Try our tools:

Multi-AI Designer Kick off several design directions at once, then build on your favorite. Visual Editor Build from UI components and templates, then customize every detail.

Components

Testimonials from Saturn

Tailwind CSS

Saturn

<section x-data="{ current: 0 }" class="relative py-20 lg:py-32 overflow-hidden">
  <img class="absolute top-0 left-0" src="saturn-assets/images/testimonials/blue-light.png" alt="">
  <img class="absolute bottom-0 right-0" src="saturn-assets/images/testimonials/orange-light.png" alt="">
  <div class="relative container px-4 mx-auto">
    <div class="max-w-lg lg:max-w-7xl mx-auto">
      <div class="flex flex-wrap -mx-4 mb-18 items-center">
        <div class="w-full lg:w-1/2 px-4 mb-8 lg:mb-0">
          <div class="max-w-md xl:max-w-xl">
            <h1 class="font-heading text-4xl xs:text-6xl font-bold text-gray-900">
              <span>Our</span>
              <span class="font-serif italic">happy</span>
              <span>clients says about us</span>
            </h1>
          </div>
        </div>
        <div class="w-full lg:w-1/2 px-4">
          <div class="max-w-md lg:ml-auto">
            <p class="text-gray-500">Risus viverra justo sagittis vestibulum metus. Massa lacinia eros posuere cursus sed vestibulum massa gravida. Turpis volutpat faucibus hac sed suspendisse convallis vestibulum massa.</p>
          </div>
        </div>
      </div>
      <div class="flex flex-wrap -mx-4 items-center">
        <div class="w-full lg:w-1/2 px-4 mb-8 lg:mb-0">
          <div class="lg:max-w-md xl:max-w-lg">

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Split-screen testimonial section with headline, client photo, and quote carousel

A light marketing testimonials section with a serif-accented heading and supporting paragraph at top, a client portrait on the left, and a quote with attribution and pagination dots on the right. The layout is split into two columns with generous whitespace and a soft orange radial glow behind the quote.

AI Testimonials Component Generator

Testimonials from DarkPro

Tailwind CSS

DarkPro

<section class="py-20 bg-gradient-to-r from-neutral-950 via-neutral-900 to-neutral-950">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap items-center -mx-20">
      <div class="w-full lg:w-5/12 px-20 mb-16 lg:mb-0">
        <div class="relative">
          <div class="absolute inset-0 opacity-20 bg-gradient-to-r from-purple-950 via-purple-800 to-purple-950 rounded-2xl filter blur-3xl"></div>
          <div class="relative p-1 border border-white border-opacity-20 rounded-2xl">
            <img class="mx-auto bg-center object-cover rounded-xl border border-neutral-800 w-full" src="https://images.unsplash.com/photo-1519345182560-3f2917c472ef?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=facearea&amp;facepad=8&amp;w=700&amp;h=700&amp;q=80" alt="">
          </div>
        </div>
      </div>
      <div class="w-full lg:w-7/12 px-20">
        <div class="relative">
          <div class="remb-6">
            <svg class="w-12 h-12 text-white" 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"></path>
            </svg>
          </div>
          <h2 class="mb-4 text-3xl md:text-4xl md:leading-tight lg:text-5xl font-medium text-transparent bg-clip-text bg-gradient-to-r from-gray-100 via-gray-200 to-gray-300">Lorem ipsum dolor sit amet consectutar domor at elis</h2>
          <p class="mb-9 max-w-xl text-base lg:text-xl lg:leading-relaxed text-neutral-300">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec, accumsan aliquet orci.</p>
          <p class="text-2xl font-medium text-transparent bg-clip-text bg-gradient-to-r from-gray-100 via-gray-200 to-gray-300">Danny Bailey</p>
          <p class="text-lg text-neutral-400">CEO &amp; Founder</p>
        </div>
      </div>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Dark split-screen testimonial with portrait photo and quote

A testimonial section on a dark background with a rounded portrait photo on the left and a large quotation headline, supporting paragraph, and attribution (name and title) on the right. The two-column split layout focuses attention on a single customer or executive quote.

AI Testimonials Component Generator

Testimonials from Flaro

Tailwind CSS

Flaro

<section class="relative pt-24 pb-32 bg-white overflow-hidden">
  <img class="absolute top-0 left-0" src="flaro-assets/images/testimonials/gradient.svg" alt="">
  <img class="absolute bottom-0 right-0" src="flaro-assets/images/testimonials/gradient2.svg" alt="">
  <div class="relative z-10 container px-4 mx-auto">
    <h2 class="mb-16 text-6xl md:text-7xl font-bold font-heading text-center tracking-px-n leading-tight">Don't just take our word for it</h2>
    <div class="flex flex-wrap -m-3">
      <div class="w-full md:w-1/2 lg:w-1/3 p-3">
        <div class="p-6 h-full bg-white bg-opacity-60 border rounded-4xl">
          <div class="flex flex-col justify-between h-full">
            <div class="mb-5 block">
              <div class="flex flex-wrap mb-4 -m-2">
                <div class="w-auto p-2">
                  <img class="h-12 rounded-full" src="flaro-assets/images/testimonials/avatar.png" alt="">
                </div>
                <div class="w-auto p-2">
                  <h3 class="font-semibold leading-normal">Jacob Jones</h3>
                  <p class="text-gray-500 uppercase">@brooklysim</p>
                </div>
              </div>
              <p class="text-lg font-medium">If you haven’t tried out Flaro App yet, I would definitely recommend it for both designers and developers 🤙🏻</p>
            </div>
            <div class="block">
              <p class="text-sm text-gray-500 font-medium">3 days ago</p>
            </div>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Testimonials Grid with Six Customer Reviews

A light-themed testimonials section headed "Don't just take our word for it" with six review cards arranged in a three-column grid. Each card shows an avatar, name, handle, quoted feedback, and a timestamp.

AI Testimonials Component Generator

Testimonials from Gradia

Tailwind CSS

Gradia

<section class="relative pt-24 pb-32 overflow-hidden">
  <div class="container mx-auto px-4">
    <h2 class="mb-5 max-w-2xl mx-auto font-heading font-bold text-center text-6xl sm:text-7xl text-gray-900" >12k+ Happy Clients</h2>
    <p class="mb-16 text-base max-w-md mx-auto text-center text-gray-600" >Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim velit mollit.</p>
    <div class="flex flex-wrap -m-5">
      <div class="w-full md:w-1/3 p-5">
        <div class="h-full p-0.5 bg-gradient-cyan transform hover:-translate-y-3 rounded-10 transition ease-out duration-1000">
          <div class="h-full px-7 py-8 bg-white rounded-lg"><img class="mb-8" src="gradia-assets/images/testimonials/avatar.png" alt="">
            <p class="mb-8 text-lg text-gray-900" >“You made it so simple. My new site is so much faster and easier to work with than my old site. I just choose the page, make the change.”</p>
            <h3 class="mb-1.5 font-heading font-bold text-lg text-gray-900" >Darrell Steward</h3>
            <p class="text-sm text-gray-600" >Product Designer</p>
          </div>
        </div>
      </div>
      <div class="w-full md:w-1/3 p-5">
        <div class="h-full p-0.5 bg-gradient-cyan transform hover:-translate-y-3 rounded-10 shadow-5xl transition ease-out duration-1000">
          <div class="h-full px-7 py-8 bg-white rounded-lg"><img class="mb-8" src="gradia-assets/images/testimonials/avatar2.png" alt="">
            <p class="mb-8 text-lg text-gray-900" >“Simply the best. Better than all the rest. I’d recommend this product to beginners and advanced users.”</p>
            <h3 class="mb-1.5 font-heading font-bold text-lg text-gray-900" >Ronald Richards</h3>
            <p class="text-sm text-gray-600" >Software Engineer</p>
          </div>
        </div>
      </div>
      <div class="w-full md:w-1/3 p-5">

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Testimonials Section with Three Client Quote Cards

A light-background testimonials section headed "12k+ Happy Clients" with three bordered quote cards arranged in a row, each showing an avatar, quotation, name, and job title. The cards use gradient teal-to-purple outlines, and the middle card has a subtle drop shadow.

AI Testimonials Component Generator

Testimonials from Solstice

Tailwind CSS

Solstice

<section class="py-24 relative overflow-hidden" x-data="{ slideWidth: 0, activeSlide: 0, slideCount: 5 }">
  <div class="container mx-auto px-4">
    <h1 class="text-4xl lg:text-5xl text-center font-bold font-heading max-w-md lg:max-w-xl mx-auto mb-24">For those seeking an enjoyable way to learn</h1>
    <div class="h-96 mb-32 lg:mb-16">
      <div :style="'transform: translateX(-' + slideWidth + 'px)'" class="flex transition-transform duration-500 ease-in-out -mx-4">
        <div x-ref="slide1" class="flex-shrink-0 w-full max-w-sm px-4">
          <div class="border border-gray-100 shadow rounded-3xl p-8">
            <div class="flex items-center flex-wrap gap-4 mb-20">
              <div class="bg-orange-50 rounded-xl overflow-hidden">
                <img src="solstice-assets/images/testimonials/man-avatar3.png" alt="">
              </div>
              <div class="p-2 rounded-lg bg-gray-50 bg-opacity-50">
                <p>
                  <span class="font-bold font-heading">Ethan Maynard,</span>
                  <span></span>
                  <span class="text-gray-400">Student</span>
                </p>
              </div>
            </div>
            <p class="text-gray-700 text-lg">“Yesterday I had my first day to study. What a great experience learning something so useful in simple ways!.”</p>
          </div>
        </div>
        <div x-ref="slide2" class="flex-shrink-0 w-full max-w-sm px-4">
          <div class="border border-gray-100 shadow rounded-3xl p-8">

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Student testimonials carousel with heading and review cards

A light-background testimonials section with a centered two-line heading above a horizontal row of student review cards, each showing an avatar, name and role, and quotation text. A progress bar below indicates carousel position, and one card is emphasized with larger text.

AI Testimonials Component Generator

Testimonials from Basko

Tailwind CSS

Basko

<section class="relative py-24 lg:pb-28 bg-gray-100 overflow-hidden">
  <div class="absolute top-0 left-0 w-24 md:w-96 h-full" style="background: linear-gradient(90deg, #F3F7FA 10.94%, rgba(243, 247, 250, 0) 100%);"></div>
  <div class="absolute top-0 right-0 w-24 md:w-96 h-full transform rotate-180" style="background: linear-gradient(90deg, #F3F7FA 10.94%, rgba(243, 247, 250, 0) 100%);"></div>
  <div class="container px-4 mx-auto">
    <div class="relative max-w-xl text-center mx-auto mb-16">
      <h2 class="font-heading mb-4 text-6xl tracking-tighter">What our clients say</h2>
      <p class="text-xl tracking-tight">Use and reuse tons of responsive sections to create the perfect layout. Sections are ready.</p>
    </div>
    <div class="max-w-4xl mx-auto">
      <div class="flex flex-nowrap justify-center -m-3 mb-3">
        <div class="flex-shrink-0 w-96 p-3">
          <div class="p-6 bg-white hover:bg-opacity-80 border border-gray-200 hover:border-gray-300 rounded-xl transition duration-200">
            <div class="flex flex-wrap justify-between -m-2 mb-6">
              <div class="w-auto p-2">
                <div class="flex flex-wrap items-center -m-1.5">
                  <div class="w-auto p-1.5">
                    <img src="basko-assets/images/testimonials/avatar.png" alt="">
                  </div>
                  <div class="w-auto p-1.5">
                    <h3 class="font-semibold tracking-tight">Margie Sutton</h3>
                    <span class="text-sm tracking-tight">@andysm</span>
                  </div>
                </div>
              </div>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Testimonials Carousel with Twitter-Style Client Quote Cards

A marketing section headed "What our clients say" showing a horizontally scrolling carousel of rounded white testimonial cards, each with an avatar, name, handle, Twitter bird icon, and quoted text. The outer cards fade out at the left and right edges, indicating more reviews beyond the visible area.

AI Testimonials Component Generator

Testimonials from Zanrly

Tailwind CSS

Zanrly

<section class="py-10 bg-gray-100 border border-gray-100 ooverflow-hidden">
  <div class="container mx-auto px-4">
    <div class="bg-white rounded-3xl">
      <div class="py-16 px-8 md:max-w-3xl mx-auto text-center">
        <img class="mb-6 mx-auto rounded-full" src="zanrly-assets/images/testimonials/avatar.png" alt="">
        <p class="mb-10 text-2xl font-bold">"Had some issues where my site crashed and broke, reached out to Fouroom to see if they could help me fix it. Even though we are 12 hours apart in time, they were quick to reply and helpful/willing to do what is needed to fix the issue."</p>
        <h3 class="font-heading mb-2 text-2xl text-gray-900 font-black">Monica</h3>
        <p class="text-sm text-gray-500 font-bold">@monicajohnson</p>
      </div>
    </div>
  </div>
</section>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Centered Customer Testimonial Card with Avatar

A single rounded white card containing a circular avatar photo, a centered customer quotation, and the reviewer's name and handle. The layout is a centered vertical stack used to display one testimonial as social proof.

AI Testimonials Component Generator

Testimonials from Nightsable

Tailwind CSS

Nightsable

<section x-data="{ slideWidth: 0, activeSlide: 0, slideCount: 3 }" class="relative py-20 overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="mb-20 md:max-w-3xl text-center mx-auto">
      <span class="inline-block mb-2.5 text-sm text-green-400 font-medium tracking-tighter">Nightsable Card</span>
      <h2 class="font-heading text-7xl lg:text-8xl text-white tracking-tighter-xl">What people are saying</h2>
    </div>
    <div class="relative p-3 bg-gradient-radial-dark overflow-hidden border border-gray-900 border-opacity-30 rounded-5xl">
      <div class="relative z-10 flex flex-wrap lg:items-center -m-10">
        <div class="w-auto mx-auto md:ml-0 p-10">
          <img src="nightsable-assets/images/testimonials/man.png" alt="">
        </div>
        <div class="flex-1 p-10">
          <div class="overflow-hidden">
            <div :style="'transform: translateX(-' + slideWidth + 'px)'" class="flex transition-transform duration-500 ease-in-out">
              <div x-ref="slide1" class="flex-shrink-0 w-full">
                <h3 class="mb-20 text-3xl text-white tracking-tighter leading-snug md:max-w-2xl">“GTIS Partners is a leading real estate investment firm in the Americas, headquartered in New York with offices in São Paulo, San Francisco, Los Angeles, Atlanta, Charlotte, Phoenix”</h3>
                <h4 class="text-white font-medium tracking-tighter">Wade Warren</h4>
                <span class="mb-8 lg:mb-0 inline-block text-sm text-white">CEO, Since Industry</span>
              </div>
              <div x-ref="slide2" class="flex-shrink-0 w-full">
                <h3 class="mb-20 font-heading text-3xl text-white tracking-tighter leading-snug md:max-w-2xl">“Capital Horizon Investments, a prominent finance powerhouse, is strategically based in Chicago, with a widespread network encompassing Miami, Dallas, Denver, Seattle, Boston, and Toronto”</h3>
                <h4 class="text-white font-medium tracking-tighter">Wade Warren</h4>
                <span class="mb-8 lg:mb-0 inline-block text-sm text-white">CEO, Since Industry</span>
              </div>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Dark Testimonial Card with Carousel Arrows

A dark testimonial section titled 'What people are saying' featuring a single customer quote from Wade Warren, CEO of GTIS Partners, beside a photo portrait. Previous and next circular arrow buttons sit at the lower right for navigating between testimonials.

AI Testimonials Component Generator

Testimonials from Zeus

Tailwind CSS

Zeus

<section class="relative py-20">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap items-center -mx-4">
      <div class="relative w-full lg:w-5/12 px-4 order-last lg:order-first">
        <img class="mx-auto mt-10 lg:mt-0 h-96 lg:h-112 object-cover" src="zeus-assets/images/z-picture.png" alt="">
        <img class="hidden lg:block absolute top-0 left-0 mt-32 -ml-16" src="zeus-assets/icons/dots/blue-dot-left-bars.svg" alt="">
      </div>
      <div class="w-full lg:w-7/12 px-4">
        <div class="max-w-xl lg:ml-auto">
          <span class="inline-block mb-10">
            <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M26 29.45C26 19.3858 33.4577 8.86747 45.2297 6.16443C45.6793 6.0612 46.1364 6.29467 46.3301 6.71327L47.5161 9.27572C47.7602 9.80299 47.5031 10.4238 46.9877 10.692C43.3044 12.608 40.1644 17.1966 39.3647 20.8059C39.2493 21.3268 39.6241 21.8042 40.1413 21.9351C44.6581 23.0784 48 27.1681 48 32.042C48 38.406 42.832 42 37.602 42C31.572 42 26 37.39 26 29.45ZM0 29.45C0 19.3858 7.45772 8.86747 19.2297 6.16443C19.6793 6.0612 20.1364 6.29467 20.3301 6.71327L21.5161 9.27572C21.7602 9.80299 21.5031 10.4238 20.9877 10.692C17.3044 12.608 14.1644 17.1966 13.3647 20.8059C13.2493 21.3268 13.6241 21.8042 14.1413 21.9351C18.6581 23.0784 22 27.1681 22 32.042C22 38.406 16.832 42 11.602 42C5.572 42 0 37.39 0 29.45Z" fill="#FF4564"></path>
            </svg>
          </span>
          <h2 class="mb-10 text-4xl font-semibold font-heading">Lorem ipsum dolor sit amet consectutar domor at elis</h2>
          <p class="mb-10 text-xl text-gray-500">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec, accumsan aliquet orci.</p>
          <p class="mb-3 text-2xl font-semibold font-heading">Esther Howard</p>
          <p class="text-gray-500">CEO &amp; Founder</p>
        </div>
      </div>
    </div>
  </div>
  <img class="hidden lg:block absolute bottom-0 right-0" src="zeus-assets/icons/dots/yellow-dot-right-shield.svg" alt="">
</section>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Testimonial Quote Section with Portrait and Attribution

A light-background testimonial block with a red quotation mark, large dark-navy quote heading, gray body text, and an attributed name and title beside a cropped portrait photo on a blue and orange geometric shape. The split two-column layout pairs the image on the left with the quotation text on the right.

AI Testimonials Component Generator

Testimonials from Zospace

Tailwind CSS

Zospace

<section class="relative py-20 2xl:py-40 bg-gray-800 overflow-hidden" x-data="{ slideWidth: 0, activeSlide: 0, slideCount: 3 }">
  <img class="absolute top-0 right-0 -mr-80 -mt-80" src="zospace-assets/lines/circle.svg" alt="">
  <img class="hidden lg:block absolute bottom-0 left-0 w-96" src="zospace-assets/lines/half-double-circle.svg" alt="">
  <div class="relative container px-4 mx-auto">
    <div class="max-w-5xl mx-auto">
      <div class="text-center mb-20 lg:mb-32">
        <span class="text-lg text-blue-400 font-bold">Testimonials</span>
        <h2 class="mt-12 text-5xl font-bold font-heading text-white">What people say</h2>
      </div>
      <div class="overflow-hidden">
        <div :style="'transform: translateX(-' + slideWidth + 'px)'" class="flex transition-transform duration-500 ease-in-out -m-10">
            <div x-ref="slide1" class="flex-shrink-0 w-full p-10">
                <div class="relative flex flex-wrap -mx-5 mb-20">
                  <div class="w-full lg:w-1/2 px-5 mb-12 lg:mb-0">
                    <div class="flex -mx-4 lg:mx-0">
                      <div class="w-1/3 px-4">
                        <img class="w-30 h-40 mx-auto rounded-full object-cover" src="https://images.pexels.com/photos/5325840/pexels-photo-5325840.jpeg?q=80&amp;fm=jpg&amp;crop=faces&amp;cs=tinysrgb&amp;fit=crop&amp;h=940&amp;w=940" alt="">
                      </div>
                      <div class="w-2/3 px-4">
                        <div class="relative inline-block mb-8 p-10 bg-gray-500 rounded-lg">
                          <div class="absolute top-0 left-0 -ml-5 mt-10 w-14 h-14 bg-gray-500" style="clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);"></div>
                          <img class="absolute top-0 right-0 md:-mr-6 -mt-6 lg:mt-14" src="zospace-assets/images/quote-circle.svg" alt="">
                          <p class="mb-8 text-lg text-gray-200">The brown me malesuada nisi quis arcu ultrices, a fermentum libero maximus. Donec est urna, semper. At sem quis, congue dictum ipsum quam, sagittis.</p>
                          <div class="flex mb-4">

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Dark Testimonials Carousel with Two Review Cards

A dark-themed testimonials section titled "What people say" showing two side-by-side review cards with avatars, quote text, star ratings, and reviewer names with companies. Previous and next circular blue buttons sit below for carousel navigation.

AI Testimonials Component Generator

Testimonials from Wrexa

Tailwind CSS

Wrexa

<section class="relative pb-52 bg-gray-900 overflow-hidden">
  <div class="bg-white h-16 mb-32 sm:mb-52">
    <div class="absolute top-0 left-1/2">
      <div class="w-px h-16 bg-gray-900"></div>
      <div class="w-px h-24 bg-white"></div>
    </div>
  </div>
  <div class="container px-4 mx-auto">
    <div class="flex items-center mb-20">
      <span class="font-heading text-xl text-white">08</span>
      <div class="mx-4 rounded-full bg-gray-200 h-1 w-1"></div>
      <span class="font-heading text-xl text-white">Customer review</span>
    </div>
    <div class="max-w-4xl 3xl:max-w-6xl mx-auto">
      <div class="sm:flex mb-12 items-center">
        <div class="flex-shrink-0 relative max-w-max mr-5 mb-6 sm:mb-0">
          <img class="w-16 h-16 rounded-full object-cover" src="wrexa-assets/images/avatar.png" alt="">
          <img class="absolute bottom-0 right-0 -mb-1 -mr-1" src="wrexa-assets/elements/miro-logo-small-icon.svg" alt="">
        </div>
        <div class="sm:flex items-center sm:mr-20 mb-5 sm:mb-0">
          <h5 class="text-xl text-white font-mono">Helen Keller</h5>
          <div class="ml-4 pl-4 border-l border-gray-600">
            <span class="text-gray-600">Miro, Head of Design</span>
          </div>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Dark Customer Review Testimonial with Timeline and Star Rating

A dark-themed testimonial section showing a customer review from Helen Keller, Head of Design at Miro, with a five-star rating, a large quote, and a smaller review paragraph connected by a vertical timeline line with a chevron control. A faded second review entry appears below.

AI Testimonials Component Generator

Testimonials from Flex

Tailwind CSS

Flex

<section x-data="{ current: 0 }" class="py-24 md:pb-28 bg-white" style="background-image: url('flex-ui-assets/elements/pattern-white.svg'); background-position: center;">
  <div class="container px-4 mx-auto">
    <div x-show="current === 0">
      <div class="relative max-w-5xl sm:px-6 pb-6 mb-10 mx-auto text-center">
        <img class="absolute top-0 left-0" src="flex-ui-assets/elements/testimonials/quote-top-green.svg" alt="">
        <img class="absolute bottom-0 right-0" src="flex-ui-assets/elements/testimonials/quote-down-green.svg" alt="">
        <div class="relative">
          <span class="inline-block py-px px-2 mb-4 text-xs leading-5 text-green-500 bg-green-100 font-medium uppercase rounded-9xl">Quotes</span>
          <h2 class="text-2xl md:text-5xl font-semibold tracking-tighter">The best solution for anyone who wants to work a flexible schedule but still earn a full-time income.</h2>
        </div>
      </div>
      <div class="text-center mb-8">
        <img class="w-24 h-24 mx-auto mb-6 rounded-full" src="flex-ui-assets/images/testimonials/avatar1.png" alt="">
        <h3 class="mb-2 text-xl md:text-2xl font-semibold">Darren Dunlap</h3>
        <span class="text-lg text-coolGray-500 font-medium">CEO &amp; Founder at Flex.co</span>
      </div>
    </div>
    <div x-show="current === 1">
      <div class="relative max-w-5xl sm:px-6 pb-6 mb-10 mx-auto text-center">
        <img class="absolute top-0 left-0" src="flex-ui-assets/elements/testimonials/quote-top-green.svg" alt="">
        <img class="absolute bottom-0 right-0" src="flex-ui-assets/elements/testimonials/quote-down-green.svg" alt="">
        <div class="relative">
          <span class="inline-block py-px px-2 mb-4 text-xs leading-5 text-green-500 bg-green-100 font-medium uppercase rounded-9xl">Quotes</span>
          <h2 class="text-2xl md:text-5xl font-semibold tracking-tighter">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.</h2>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Centered Testimonial Quote Slider with Avatar and Pagination Dots

A centered testimonial section showing a large quotation from Darren Dunlap, CEO & Founder at Flex.co, with a circular avatar, name and title, and three pagination dots indicating a carousel. Decorative green quotation marks sit behind the quote on a light background.

AI Testimonials Component Generator

Testimonials from Nigodo

Tailwind CSS

Nigodo

<section class="py-26 bg-white" x-data="{ slideWidth: 0, activeSlide: 0, slideCount: 3 }">
  <div class="container px-4 mx-auto">
    <div class="text-center mb-12">
      <span class="inline-block mb-3 text-lg font-extrabold text-red-500">Quotes</span>
      <div class="flex flex-wrap sm:flex-nowrap -mx-4">
        <div class="hidden sm:block self-start px-4 text-red-300 opacity-10">
          <svg class="h-10 sm:h-auto" width="75" height="64" viewBox="0 0 75 64" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M74.1252 0.631112L72.2546 13.9596C68.5132 13.6478 65.4734 14.2714 63.1351 15.8303C60.7967 17.3112 59.1599 19.4937 58.2246 22.3776C57.3672 25.1836 57.2113 28.4573 57.7569 32.1986H74.1252V64H42.3239V32.1986C42.3239 20.9746 44.935 12.4787 50.1573 6.71079C55.3796 0.864946 63.3689 -1.16161 74.1252 0.631112ZM31.8014 0.631112L29.9307 13.9596C26.1894 13.6478 23.1495 14.2714 20.8112 15.8303C18.4729 17.3112 16.836 19.4937 15.9007 22.3776C15.0433 25.1836 14.8874 28.4573 15.433 32.1986H31.8014V64H0V32.1986C0 20.9746 2.61114 12.4787 7.83342 6.71079C13.0557 0.864946 21.045 -1.16161 31.8014 0.631112Z" fill="currentColor"></path>
          </svg>
        </div>
        <div class="w-full lg:w-auto py-6 lg:py-0 px-4">
            <div class="overflow-hidden">
              <div :style="'transform: translateX(-' + slideWidth + 'px)'" class="flex transition-transform duration-500 ease-in-out">
                  <div x-ref="slide1" class="flex-shrink-0 w-full">
                      <h1 class="mb-12 text-2xl sm:text-3xl xl:text-4xl font-extrabold font-heading">The best solution for anyone who wants to work a flexible schedule but still earn a full-time income.</h1>
                      <img class="block mb-6 mx-auto" src="nigodo-assets/testimonials/avatar-men.png" alt="">
                      <h4 class="text-xl font-extrabold">Macauley Herring</h4>
                      <span class="text-red-400 font-bold">CEO &amp; Founder at Nigodo</span>
                  </div>
                  <div x-ref="slide2" class="flex-shrink-0 w-full">
                      <h1 class="mb-12 text-2xl sm:text-3xl xl:text-4xl font-extrabold font-heading">Empowering Independence: A Game-Changer for Balancing Work and Life.</h1>
                      <img class="block mb-6 mx-auto" src="nigodo-assets/testimonials/avatar-men.png" alt="">
                      <h4 class="text-xl font-extrabold">Sienna Hawthorne</h4>
                      <span class="text-red-400 font-bold">Co-Founder of FlexPro Solutions</span>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Centered Testimonial Quote with Author and Pagination Dots

A centered testimonial section showing a bold quotation from Macauley Herring, CEO & Founder at Nigodo, with a small circular avatar, name and title, and three pagination dots indicating a carousel. Large faded quotation marks decorate the left and right edges.

AI Testimonials Component Generator

Testimonials from Atis

Tailwind CSS

Atis

<section x-data="{ current: 0 }">
  <div class="skew skew-top mr-for-radius">
    <svg class="h-8 md:h-12 lg:h-20 w-full text-gray-900" viewBox="0 0 10 10" preserveAspectRatio="none">
      <polygon fill="currentColor" points="0 0 10 10 0 10"></polygon>
    </svg>
  </div>
  <div class="skew skew-top ml-for-radius">
    <svg class="h-8 md:h-12 lg:h-20 w-full text-gray-900" viewBox="0 0 10 10" preserveAspectRatio="none">
      <polygon fill="currentColor" points="0 10 10 0 10 10"></polygon>
    </svg>
  </div>
  <div class="py-20 bg-gray-900 radius-for-skewed">
    <div class="container mx-auto px-4">
      <div class="max-w-6xl p-4 flex flex-wrap justify-center items-center">
        <div class="mb-6 w-full lg:w-1/3 text-center">
          <img class="mb-6 mx-auto w-32 h-32 rounded-full object-cover" src="https://images.unsplash.com/photo-1564564321837-a57b7070ac4f?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1055&amp;q=80" alt="">
          <h4 class="text-xl text-gray-50">Ian Brown</h4>
          <p class="text-green-600">Head of Development</p>
        </div>
        <div class="w-full lg:w-2/3">
          <svg class="mb-4 text-green-600 h-10" viewBox="0 0 32 28" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M10.2418 12.749C9.45369 12.522 8.66554 12.4069 7.89887 12.4069C6.71496 12.4069 5.72709 12.6775 4.96109 13.0088C5.69957 10.3053 7.47358 5.6405 11.0075 5.11517C11.3348 5.0665 11.603 4.82986 11.6923 4.51131L12.4646 1.74875C12.5298 1.51512 12.4912 1.26505 12.3579 1.06231C12.2246 0.859563 12.0105 0.724288 11.7705 0.691393C11.5097 0.655812 11.2438 0.637686 10.9803 0.637686C6.73846 0.637686 2.53756 5.06516 0.764895 11.4046C-0.275679 15.1238 -0.580802 20.7154 1.98237 24.2349C3.41668 26.2043 5.50924 27.2559 8.20198 27.361C8.21305 27.3613 8.2238 27.3616 8.23487 27.3616C11.5573 27.3616 14.5035 25.1241 15.3997 21.9208C15.9351 20.0058 15.6931 17.9975 14.7176 16.2644C13.7526 14.5508 12.1632 13.3018 10.2418 12.749Z" fill="currentColor"></path>
            <path d="M31.0396 16.2648C30.0746 14.5508 28.4852 13.3018 26.5638 12.749C25.7757 12.522 24.9875 12.4069 24.2212 12.4069C23.0373 12.4069 22.0491 12.6775 21.2831 13.0088C22.0215 10.3053 23.7955 5.6405 27.3298 5.11517C27.6571 5.0665 27.9249 4.82986 28.0146 4.51131L28.7869 1.74875C28.8521 1.51512 28.8135 1.26505 28.6802 1.06231C28.5473 0.859563 28.3331 0.724288 28.0928 0.691393C27.8323 0.655812 27.5664 0.637686 27.3026 0.637686C23.0608 0.637686 18.8599 5.06516 17.0869 11.4046C16.0466 15.1238 15.7415 20.7154 18.305 24.2356C19.739 26.2046 21.8319 27.2566 24.5243 27.3613C24.5354 27.3616 24.5461 27.362 24.5575 27.362C27.8796 27.362 30.8261 25.1244 31.7224 21.9211C32.2571 20.0061 32.0147 17.9975 31.0396 16.2648Z" fill="currentColor"></path>
          </svg>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Dark Testimonial Quote with Author Avatar and Pagination Dots

A dark-themed testimonial block showing a large quotation with a green quote mark, paired with a circular author avatar, name, and job title on the left. Four pagination dots below the quote suggest a carousel of multiple testimonials.

AI Testimonials Component Generator

Testimonials from Pstls.

Tailwind CSS

Pstls.

<section class="py-24 overflow-hidden relative" x-data="{ slideWidth: 0, activeSlide: 0, slideCount: 4 }">
    <img class="absolute top-0 left-0" src="pstls-assets/images/testimonials/testimonial-1-shadow.png" alt="">
    <div class="container px-4 mx-auto">
        <div class="flex flex-wrap -mx-4 items-center">
        <div class="w-full md:w-1/2 lg:w-2/5 px-4 mb-20 lg:mb-0">
            <div class="max-w-md"><img class="block mb-6" src="pstls-assets/icons/testimonials-quote.svg" alt="">
                <div class="overflow-hidden">
                    <div :style="'transform: translateX(-' + slideWidth + 'px)'" class="flex transition-transform duration-500 ease-in-out -m-3">
                        <div x-ref="slide1" class="flex-shrink-0 w-full p-3">
                            <h2 class="text-3xl md:text-4xl font-heading mb-12" >Recently, the US Federal government banned online casinos from operating in America by making it illegal to transfer money to them through any US bank or payment system.</h2>
                            <h5 class="text-xl font-heading mb-2" >Sophie Kowalsky</h5><span class="text-gray-500" >CTO at Shuffle</span>
                        </div>
                        <div x-ref="slide2" class="flex-shrink-0 w-full p-3">
                            <h2 class="text-3xl md:text-4xl font-heading mb-12" >Dive into the burgeoning trend of cryptocurrency-based casinos as a response to US government regulations on online gambling. Explore the financial implications and potential for growth in this evolving sector.</h2>
                            <h5 class="text-xl font-heading mb-2" >Alex Thompson</h5><span class="text-gray-500" >Financial Analyst at CryptoGuru</span>
                        </div>
                        <div x-ref="slide3" class="flex-shrink-0 w-full p-3">
                            <h2 class="text-3xl md:text-4xl font-heading mb-12" >Gain insights into how Shuffle, a leading online gaming platform, navigates the recent ban on US operations. Learn about the company's strategic adjustments and its plans for maintaining market relevance in the face of regulatory challenges.</h2>
                            <h5 class="text-xl font-heading mb-2" >Marcus Chen</h5><span class="text-gray-500" >Business Development Manager at Shuffle</span>
                        </div>
                        <div x-ref="slide4" class="flex-shrink-0 w-full p-3">
                            <h2 class="text-3xl md:text-4xl font-heading mb-12" >Join legal expert Emily Rodriguez as she unpacks the complexities of the US government's crackdown on online casinos. Delve into the legal intricacies, potential loopholes, and broader implications.</h2>
                            <h5 class="text-xl font-heading mb-2" >Emily Rodriguez</h5><span class="text-gray-500" >Legal Counsel at GambleSafe</span>
                        </div>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Split-screen testimonial slider with serif quote and portrait photo

A testimonial section with a large serif quotation on the left, attribution to Sophie Kowalsky, CTO at Shuffle, and a portrait photo on the right with dot indicators and previous/next arrow buttons. Light background with soft lavender and peach gradient accents.

AI Testimonials Component Generator

Testimonials from BoldUI

Tailwind CSS

BoldUI

<section class="pt-20 bg-black overflow-hidden" x-data="{ slideWidth: 0, activeSlide: 0, slideCount: 4 }">
  <div class="relative container mx-auto px-4 mb-20">
    <img class="absolute top-1/2 left-0 -mt-8 ml-24 transform scale-125" src="boldui-assets/elements/shadow-team-light-blue.svg" alt="">
    <div class="relative z-10 flex flex-wrap justify-center items-center">
      <div class="flex-shrink-0 order-first">
        <div class="inline-flex items-center justify-center h-40 lg:h-52 w-40 lg:w-52" style="background-image: url('boldui-assets/elements/ellipse.svg'); background-size: contain; background-repeat: no-repeat;">
          <button x-on:click="activeSlide > 0 ? (activeSlide -= 1, slideWidth -= $refs['slide' + (activeSlide + 1)].offsetWidth) : null">
            <svg class="w-6 h-6 md:w-5 md:h-5" width="16" height="9" viewBox="0 0 16 9" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M3.99 3.13846H16V5.23077H3.99V8.36923L0 4.18462L3.99 0V3.13846Z" fill="#FFEC3E"></path>
            </svg>
          </button>
        </div>
      </div>
      <div class="w-full lg:max-w-xl text-center mx-auto">
        <span class="text-lg font-semibold text-blue-400">Lorem ipsum</span>
        <h2 class="mt-6 text-2xl text-white uppercase font-heading">EXECUTE PROVEN TACTICS TO ELEVATE YOUR BRAND'S STEADY PROFITS.</h2>
      </div>
      <div class="flex-shrink-0 order-first lg:order-last">
        <div class="inline-flex items-center justify-center h-40 lg:h-52 w-40 lg:w-52" style="background-image: url('boldui-assets/elements/ellipse.svg'); background-size: contain; background-repeat: no-repeat;">
          <button x-on:click="activeSlide < slideCount - 1 ? (activeSlide += 1, slideWidth += $refs['slide' + activeSlide].offsetWidth) : activeSlide = slideCount - 1">
            <svg class="w-6 h-6 md:w-5 md:h-5" width="17" height="9" viewBox="0 0 17 9" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M12.9902 3.70731H0.980225V5.79962H12.9902V8.93808L16.9802 4.75346L12.9902 0.568848V3.70731Z" fill="#FFEC3E"></path>
            </svg>
          </button>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Dark Testimonials Carousel with Three Customer Cards

A dark-themed testimonials section with a blue eyebrow label, an all-caps heading, and left and right arrow controls. Three columns each show a quote mark, an angled portrait, a name, a role, and a short paragraph of review text.

AI Testimonials Component Generator

Testimonials from Acros

Tailwind CSS

Acros

<section class="py-16 bg-gray-50">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap items-center -mx-4">
      <div class="w-full lg:w-1/2 px-4 mb-16 lg:mb-0">
        <img class="block w-full max-w-xl mx-auto rounded" src="acros-assets/images/testimonials/man-medium.jpg" alt="">
      </div>
      <div class="w-full lg:w-1/2 px-4">
        <div class="max-w-xl mx-auto">
          <svg width="24" height="16" viewBox="0 0 24 16" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M0.959961 16C2.41063 14.72 3.62663 13.3973 4.60796 12.032C5.58929 10.624 6.22929 9.30133 6.52796 8.064H6.39996C5.20529 8.064 4.28796 7.68 3.64796 6.912C3.00796 6.144 2.68796 5.26933 2.68796 4.288V3.904C2.68796 2.79467 3.05063 1.87733 3.77596 1.152C4.50129 0.384 5.46129 0 6.65596 0C7.89329 0 8.85329 0.405333 9.53596 1.216C10.2613 2.02667 10.624 3.008 10.624 4.16V4.736C10.624 5.67467 10.4533 6.656 10.112 7.68C9.77063 8.704 9.3013 9.728 8.70396 10.752C8.1493 11.776 7.46663 12.736 6.65596 13.632C5.88796 14.528 5.05596 15.3173 4.15996 16H0.959961ZM13.376 16C14.8266 14.72 16.0426 13.3973 17.024 12.032C18.0053 10.624 18.6453 9.30133 18.944 8.064H18.816C17.6213 8.064 16.704 7.68 16.064 6.912C15.424 6.144 15.104 5.26933 15.104 4.288V3.904C15.104 2.79467 15.4666 1.87733 16.192 1.152C16.9173 0.384 17.8773 0 19.072 0C20.3093 0 21.2693 0.405333 21.952 1.216C22.6773 2.02667 23.04 3.008 23.04 4.16V4.736C23.04 5.67467 22.8693 6.656 22.528 7.68C22.1866 8.704 21.7173 9.728 21.12 10.752C20.5653 11.776 19.8826 12.736 19.072 13.632C18.304 14.528 17.472 15.3173 16.576 16H13.376Z" fill="#00CBA6"></path>
          </svg>
          <h3 class="font-heading text-2xl md:text-3xl mt-2 mb-6">The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.</h3>
          <p class="max-w-md text-lg leading-8 mb-10">If you have ever wondered how to develop your brand, this is the place for you.</p>
          <div class="flex items-center">
            <img class="rounded-full mr-6" src="acros-assets/images/testimonials/man-56x56.png" alt="">
            <div>
              <h4 class="font-heading font-medium mb-1">Denny Bailey</h4>
              <span class="text-gray-300">CEO &amp; Founder</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Split-screen testimonial with founder portrait and serif quote

A two-column testimonial section with a large portrait photo on the left and a serif quotation, supporting text, and attribution for Denny Bailey, CEO & Founder, on the right. It uses a light background with a teal quote mark and minimal decoration.

AI Testimonials Component Generator

Testimonials from Bendis

Tailwind CSS

Bendis

<section class="pt-40 pb-24 bg-blue-50">
  <div class="relative container px-4 mx-auto">
    <span class="absolute top-0 left-0 z-10 ml-12 lg:ml-32 -mt-20">
      <svg class="text-blue-300 h-32 w-32" viewBox="0 0 146 111" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M84.0714 110V110.5H84.5714H138.196H138.696V110V59.1949V58.7227L138.225 58.6957L118.758 57.5828L144.455 1.20738L144.777 0.5H144H124.036H123.756L123.609 0.73884L84.1451 65.1689L84.0714 65.2891V65.4301V110ZM0.5 110V110.5H1H54.625H55.125V110V59.1949V58.723L54.6539 58.6958L35.4185 57.5833L61.1157 1.20738L61.4381 0.5H60.6607H40.6964H40.4172L40.2707 0.737725L0.57431 65.1678L0.5 65.2884V65.4301V110Z" stroke="currentColor"></path>
      </svg>
    </span>
    <div class="relative flex flex-wrap items-center bg-white clip-path-right-top-sm -mx-3">
      <div class="w-full lg:w-3/5 px-3">
        <div class="max-w-sm mx-auto py-20 lg:py-0">
          <h3 class="mb-3 text-3xl font-bold text-blue-800">Lorem ipsum dolor sit amet, consectetur</h3>
          <p class="mb-10 text-gray-500">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh.</p>
          <div class="max-w-max ml-auto">
            <p class="mb-1 text-lg text-blue-500 font-semibold">Tom Harris</p>
            <p class="text-sm text-gray-500">UI Designer</p>
          </div>
        </div>
      </div>
      <div class="w-full lg:w-2/5">
        <img class="w-full lg:w-auto h-96 object-cover" src="https://images.unsplash.com/photo-1556474835-b0f3ac40d4d1?ixlib=rb-1.2.1&amp;ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;auto=format&amp;fit=crop&amp;w=1050&amp;q=80" alt="">
      </div>
    </div>
  </div>
</section>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Split-Screen Testimonial Quote Card with Portrait

A light split-screen testimonial section with a large outlined quotation mark, bold blue heading, gray supporting text, and a named author attribution on the left, paired with a slanted-edge portrait photo of a man on the right. It uses placeholder Lorem ipsum copy to present a customer or team quote.

AI Testimonials Component Generator

Testimonials from Metis

Tailwind CSS

Metis

<section class="py-20 xl:bg-contain bg-top bg-no-repeat" style="background-image: url('metis-assets/backgrounds/intersect.svg');" x-data="{ showContent: false }">
  <div class="container px-4 mx-auto">
    <div class="max-w-lg mx-auto mb-12 text-center">
      <img class="mx-auto" src="metis-assets/icons/quote.svg" alt="">
      <h2 class="my-2 text-3xl md:text-4xl font-bold font-heading">Lorem ipsum dolor sit amet consectutar domor</h2>
      <p class="text-blueGray-400 leading-loose">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed luctus eget justo et iaculis.</p>
    </div>
    <div class="flex flex-wrap max-w-5xl mx-auto mb-6">
      <div class="w-full md:w-1/2 px-3 mb-6">
        <div class="p-8 bg-white shadow rounded">
          <div class="flex items-center mb-4">
            <img class="h-16 w-16 rounded-full object-cover" src="https://images.unsplash.com/photo-1556474835-b0f3ac40d4d1?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=500&amp;q=60" alt="">
            <div class="pl-4">
              <p class="text-xl">John Bailey</p>
              <p class="text-blue-600">CEO</p>
            </div>
          </div>
          <p class="leading-loose text-blueGray-400">Donec consequat tortor risus, at auctor felis consequat. Donec quis dolor sem. Sed sollicitudin magna in hendrerit pulvinar. Vestibulum non quam velit.</p>
        </div>
      </div>
      <div class="w-full md:w-1/2 px-3 mb-6">
        <div class="p-8 bg-white shadow rounded">
          <div class="flex items-center mb-4">
            <img class="h-16 w-16 rounded-full object-cover" src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=500&amp;q=60" alt="">

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Testimonials Grid with Heading and Show More Button

A testimonials section with a quote icon, centered heading and subtext, and a two-column grid of eight person cards showing avatar, name, role, and placeholder quote text. A blue "Show more Testimonials" button sits centered below the grid.

AI Testimonials Component Generator

Testimonials from Shuffle UX

Tailwind CSS

Shuffle UX

<section class="py-20">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap items-center -mx-4">
      <div class="w-full lg:w-5/12 px-4 mb-12 lg:mb-0">
        <img class="mx-auto object-cover rounded-lg" src="mockup-assets/images/gray-500-square.png" alt="">
      </div>
      <div class="w-full lg:w-7/12 px-4">
        <div class="max-w-xl lg:ml-auto">
          <img class="mb-4" src="mockup-assets/images/quote.svg" alt="">
          <h2 class="mb-4 text-5xl font-bold font-heading">Lorem ipsum dolor sit amet consectutar domor at elis</h2>
          <p class="mb-9 text-lg text-gray-500 leading-loose">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec, accumsan aliquet orci.</p>
          <p class="text-2xl font-bold font-heading">Danny Bailey</p>
          <p class="text-lg text-gray-500">CEO &amp; Founder</p>
        </div>
      </div>
    </div>
  </div>
</section>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Split-Screen Testimonial with Image Placeholder and Quote

A two-column testimonial section with a square image placeholder on the left and a large quote, short body text, and attribution for Danny Bailey, CEO & Founder, on the right. The layout is a light, minimal split-screen with a quotation mark icon above the heading.

AI Testimonials Component Generator

Tailwind components testimonials showcase customer reviews of your product or service. Nothing says so much about them as feedback from other people. This type of message is more credible than marketing slogans. Add to it the image of the users and the possibility of confirming their reality. In this way, you will increase the chances of conversion from wary customers.

On this subpage, you can browse a variety of Tailwind testimonials component themes that are available within our UI libraries. You will also find many other types of components that will be in the same style. Each of these libraries has been prepared by experienced designers along with our in-house team of developers.

Get access to all Tailwind testimonials components, code and our editor. Test the editor demo for free.

Try for Free →

Redirecting to PayPal

Shuffle's Editors

Supporting tools

Plans

Shuffle’s design systems

Most popular ui libraries

Flex

Zanrly

Saturn

Flaro

Gradia

Basko

Artemis

Vendia

Tailwind CSS Testimonials Components

Framework

UI Library

Components

Testimonials from Saturn

Get the code for 13,400+ components

Split-screen testimonial section with headline, client photo, and quote carousel

Dark Testimonials Section with Two Customer Quotes

Testimonials from DarkPro

Get the code for 13,400+ components

Dark split-screen testimonial with portrait photo and quote

Dark Testimonial Carousel with Founder Photo and Prev/Next Controls

Testimonials from Flaro

Get the code for 13,400+ components

Testimonials Grid with Six Customer Reviews

Three-column five-star testimonial row

Testimonials from Gradia

Get the code for 13,400+ components

Testimonials Section with Three Client Quote Cards

Customer testimonials split-screen section with heading and reviewer quotes

Testimonials from Solstice

Get the code for 13,400+ components

Student testimonials carousel with heading and review cards

Testimonials Section with Three Student Quote Cards

Testimonials from Basko

Get the code for 13,400+ components

Testimonials Carousel with Twitter-Style Client Quote Cards

Video Testimonial with Quote and Attribution

Testimonials from Zanrly

Get the code for 13,400+ components

Centered Customer Testimonial Card with Avatar

Dark Testimonial Card with Avatar and Quote

Testimonials from Nightsable

Get the code for 13,400+ components

Dark Testimonial Card with Carousel Arrows

Dark Centered Testimonial Quote with Avatar

Testimonials from Zeus

Get the code for 13,400+ components

Testimonial Quote Section with Portrait and Attribution

Testimonial Hero with Founder Quote and Portrait Collage

Testimonials from Zospace

Get the code for 13,400+ components

Dark Testimonials Carousel with Two Review Cards

Dark Testimonial Carousel with Heading, Quote Body, Star Rating, and Arrow Controls

Testimonials from Wrexa

Get the code for 13,400+ components

Dark Customer Review Testimonial with Timeline and Star Rating

Dark Customer Review Carousel with Star Ratings

Testimonials from Flex

Get the code for 13,400+ components

Centered Testimonial Quote Slider with Avatar and Pagination Dots

Dark Testimonial Quote Section with Carousel Dots

Testimonials from Nigodo

Get the code for 13,400+ components

Centered Testimonial Quote with Author and Pagination Dots

Centered Testimonial Quote Slider with Avatar and Pagination Dots

Testimonials from Atis

Get the code for 13,400+ components

Dark Testimonial Quote with Author Avatar and Pagination Dots

Testimonial Slider with Avatar and Quote

Testimonials from Pstls.

Get the code for 13,400+ components

Split-screen testimonial slider with serif quote and portrait photo

Dark testimonial card with serif quote and avatar selector

Testimonials from BoldUI

Get the code for 13,400+ components