search results:

    • Standard
    • React
    Pricing Learn Community
    • + D
    • Light
    • Dark
    • System
    logo TW Elements
    • Getting started
      • Quick start
      • Tutorials
      • Design system
      • Local installation
      • Optimization
      • Dark mode
      • Theming
      • Changelog
      • Migrating to v2
      • Internationalization guide
      • Class customization
      • Icons Integration
    • CommercialNew
      • Pricing
      • License
      • Installation
      • Git & repository
      • Premium Support
    • Integrations
      • Angular
      • ASP.NET
      • Django
      • Express
      • Laravel
      • Next
      • Nuxt
      • Qwik
      • React
      • Remix
      • Solid
      • Svelte
      • SvelteKit
      • Vue
    • Content & styles
      • Animations
      • Animations Extended
      • Colors
      • Dividers
      • Figures
      • Headings
      • Hover effects
      • Icons
      • Images
      • Mask
      • Shadows
      • Typography
    • Navigation
      • Breadcrumbs
      • Footer
      • Headers
      • Mega menu
      • Navbar
      • Offcanvas
      • Pagination
      • Pills
      • Scrollspy
      • Sidenav
      • Tabs
    • Components
      • Accordion
      • Alerts
      • Avatar
      • Badges
      • Button group
      • Buttons
      • Cards
      • Carousel
      • Chips
      • Collapse
      • Dropdown
      • Gallery
      • Jumbotron
      • Lightbox
      • Link
      • List group
      • Modal
      • Notifications
      • Paragraphs
      • Placeholders
      • Popconfirm
      • Popover
      • Progress
      • Rating
      • Scroll back to top button
      • Social buttons
      • Spinners
      • Stepper
      • Testimonials
      • Timeline
      • Toast
      • Tooltip
      • Video
      • Video carousel
    • Forms
      • Autocomplete
      • Checkbox
      • Datepicker
      • Datetimepicker
      • File input
      • Form templates
      • Input Group
      • Inputs
      • Login form
      • Multi range slider
      • Radio
      • Range
      • Registration form
      • Search
      • Select
      • Switch
      • Textarea
      • Timepicker
      • Validation
    • Data
      • Charts
      • Charts advanced
      • Datatables
      • Tables
    • Methods
      • Clipboard
      • Infinite scroll
      • Lazy loading
      • Loading management
      • Ripple
      • Scrollbar
      • Smooth scroll
      • Sticky
      • Touch
    • Design Blocks
      • Admin Charts
      • Admin Complex
      • Admin Forms
      • Admin Maps
      • Admin Navigation
      • Admin tables
      • Banners
      • Contact
      • Content
      • CTA
      • FAQ
      • Features
      • Headers
      • Hero / Intro sections
      • Logo clouds
      • Mega menu
      • News
      • Newsletter
      • Pricing
      • Projects
      • Stats
      • Stats admin
      • Team
      • Testimonials
    • Tools
      • Button generator
      • Card generator
      • Flexbox generator
      • Footer generator
      • Form builder
      • Grid generator
      • Icon generator
      • Instagram Filters generator
      • Logo generator
      • Table generator
      • Typography generator
    • Coming Soon
      • Angular
      • Builder
      • Templates
      • Vue
    • Resources
      • Playground
      • YouTube Channel
      • Private FB Group
      • Newsletter
      • UI Design course New
      • UI / UX tips

    Testimonials / Reviews

    Tailwind CSS Testimonials / Reviews

    Use responsive testimonials component with helper examples for reviews, star ratings, customer testimonial & more. Free download, open-source license.


    Basic example

    Testimonial components are customer reviews of your product or services and help you look more valuable to those exploring it for the first time. They are most often used for social proofing. This type of message is more credible than marketing slogans.

    Use the extended version including title, avatars, names, descriptions and rating.

    Testimonials

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, error amet numquam iure provident voluptate esse quasi, veritatis totam voluptas nostrum quisquam eum porro a pariatur veniam.

    Maria Smantha
    Web Developer

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod eos id officiis hic tenetur quae quaerat ad velit ab hic tenetur.

    Lisa Cudrow
    Graphic Designer

    Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid commodi.

    John Smith
    Marketing Specialist

    At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti.

    • HTML
            
                
          <div class="mx-auto text-center md:max-w-xl lg:max-w-3xl">
            <h3 class="mb-6 text-3xl font-bold">Testimonials</h3>
            <p
              class="mb-6 pb-2 text-neutral-600 dark:text-neutral-300 md:mb-12 md:pb-0">
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, error
              amet numquam iure provident voluptate esse quasi, veritatis totam
              voluptas nostrum quisquam eum porro a pariatur veniam.
            </p>
          </div>
    
          <div class="grid gap-6 text-center md:grid-cols-3 lg:gap-12">
            <div class="mb-12 md:mb-0">
              <div class="mb-6 flex justify-center">
                <img
                  src="https://tecdn.b-cdn.net/img/Photos/Avatars/img%20(1).jpg"
                  class="w-32 rounded-full shadow-lg dark:shadow-black/30" />
              </div>
              <h5 class="mb-4 text-xl font-semibold">Maria Smantha</h5>
              <h6 class="mb-4 font-semibold text-primary dark:text-primary-400">
                Web Developer
              </h6>
              <p class="mb-4 text-neutral-600 dark:text-neutral-300">
                <span class="inline-block pe-2 [&>svg]:w-5"
                  ><svg
                    xmlns="http://www.w3.org/2000/svg"
                    fill="currentColor"
                    viewBox="0 0 448 512">
                    <!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
                    <path
                      d="M0 216C0 149.7 53.7 96 120 96h8c17.7 0 32 14.3 32 32s-14.3 32-32 32h-8c-30.9 0-56 25.1-56 56v8h64c35.3 0 64 28.7 64 64v64c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V320 288 216zm256 0c0-66.3 53.7-120 120-120h8c17.7 0 32 14.3 32 32s-14.3 32-32 32h-8c-30.9 0-56 25.1-56 56v8h64c35.3 0 64 28.7 64 64v64c0 35.3-28.7 64-64 64H320c-35.3 0-64-28.7-64-64V320 288 216z" />
                  </svg>
                </span>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod eos
                id officiis hic tenetur quae quaerat ad velit ab hic tenetur.
              </p>
              <ul class="mb-0 flex items-center justify-center">
                <li>
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    viewBox="0 0 24 24"
                    fill="currentColor"
                    class="h-5 w-5 text-yellow-500">
                    <path
                      fill-rule="evenodd"
                      d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.007 5.404.433c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.433 2.082-5.006z"
                      clip-rule="evenodd" />
                  </svg>
                </li>
                <li>
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    viewBox="0 0 24 24"
                    fill="currentColor"
                    class="h-5 w-5 text-yellow-500">
                    <path
                      fill-rule="evenodd"
                      d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.007 5.404.433c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.433 2.082-5.006z"
                      clip-rule="evenodd" />
                  </svg>
                </li>
                <li>
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    viewBox="0 0 24 24"
                    fill="currentColor"
                    class="h-5 w-5 text-yellow-500">
                    <path
                      fill-rule="evenodd"
                      d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.007 5.404.433c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.433 2.082-5.006z"
                      clip-rule="evenodd" />
                  </svg>
                </li>
                <li>
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    viewBox="0 0 24 24"
                    fill="currentColor"
                    class="h-5 w-5 text-yellow-500">
                    <path
                      fill-rule="evenodd"
                      d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.007 5.404.433c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.433 2.082-5.006z"
                      clip-rule="evenodd" />
                  </svg>
                </li>
                <li>
                  <svg
                    clip-rule="evenodd"
                    fill-rule="evenodd"
                    fill="currentColor"
                    class="h-5 w-5 text-yellow-500"
                    stroke-linejoin="round"
                    stroke-miterlimit="2"
                    viewBox="0 0 24 24"
                    xmlns="http://www.w3.org/2000/svg">
                    <path
                      d="m11.322 2.923c.126-.259.39-.423.678-.423.289 0 .552.164.678.423.974 1.998 2.65 5.44 2.65 5.44s3.811.524 6.022.829c.403.055.65.396.65.747 0 .19-.072.383-.231.536-1.61 1.538-4.382 4.191-4.382 4.191s.677 3.767 1.069 5.952c.083.462-.275.882-.742.882-.122 0-.244-.029-.355-.089-1.968-1.048-5.359-2.851-5.359-2.851s-3.391 1.803-5.359 2.851c-.111.06-.234.089-.356.089-.465 0-.825-.421-.741-.882.393-2.185 1.07-5.952 1.07-5.952s-2.773-2.653-4.382-4.191c-.16-.153-.232-.346-.232-.535 0-.352.249-.694.651-.748 2.211-.305 6.021-.829 6.021-.829s1.677-3.442 2.65-5.44zm.678 2.033v11.904l4.707 2.505-.951-5.236 3.851-3.662-5.314-.756z"
                      fill-rule="nonzero" />
                  </svg>
                </li>
              </ul>
            </div>
            <div class="mb-12 md:mb-0">
              <div class="mb-6 flex justify-center">
                <img
                  src="https://tecdn.b-cdn.net/img/Photos/Avatars/img%20(2).jpg"
                  class="w-32 rounded-full shadow-lg dark:shadow-black/30" />
              </div>
              <h5 class="mb-4 text-xl font-semibold">Lisa Cudrow</h5>
              <h6 class="mb-4 font-semibold text-primary dark:text-primary-400">
                Graphic Designer
              </h6>
              <p class="mb-4 text-neutral-600 dark:text-neutral-300">
                <span class="inline-block pe-2 [&>svg]:w-5"
                  ><svg
                    xmlns="http://www.w3.org/2000/svg"
                    fill="currentColor"
                    viewBox="0 0 448 512">
                    <!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
                    <path
                      d="M0 216C0 149.7 53.7 96 120 96h8c17.7 0 32 14.3 32 32s-14.3 32-32 32h-8c-30.9 0-56 25.1-56 56v8h64c35.3 0 64 28.7 64 64v64c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V320 288 216zm256 0c0-66.3 53.7-120 120-120h8c17.7 0 32 14.3 32 32s-14.3 32-32 32h-8c-30.9 0-56 25.1-56 56v8h64c35.3 0 64 28.7 64 64v64c0 35.3-28.7 64-64 64H320c-35.3 0-64-28.7-64-64V320 288 216z" />
                  </svg>
                </span>
                Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis
                suscipit laboriosam, nisi ut aliquid commodi.
              </p>
              <ul class="mb-0 flex items-center justify-center">
                <li>
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    viewBox="0 0 24 24"
                    fill="currentColor"
                    class="h-5 w-5 text-yellow-500">
                    <path
                      fill-rule="evenodd"
                      d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.007 5.404.433c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.433 2.082-5.006z"
                      clip-rule="evenodd" />
                  </svg>
                </li>
                <li>
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    viewBox="0 0 24 24"
                    fill="currentColor"
                    class="h-5 w-5 text-yellow-500">
                    <path
                      fill-rule="evenodd"
                      d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.007 5.404.433c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.433 2.082-5.006z"
                      clip-rule="evenodd" />
                  </svg>
                </li>
                <li>
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    viewBox="0 0 24 24"
                    fill="currentColor"
                    class="h-5 w-5 text-yellow-500">
                    <path
                      fill-rule="evenodd"
                      d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.007 5.404.433c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.433 2.082-5.006z"
                      clip-rule="evenodd" />
                  </svg>
                </li>
                <li>
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    viewBox="0 0 24 24"
                    fill="currentColor"
                    class="h-5 w-5 text-yellow-500">
                    <path
                      fill-rule="evenodd"
                      d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.007 5.404.433c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.433 2.082-5.006z"
                      clip-rule="evenodd" />
                  </svg>
                </li>
                <li>
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    viewBox="0 0 24 24"
                    fill="currentColor"
                    class="h-5 w-5 text-yellow-500">
                    <path
                      fill-rule="evenodd"
                      d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.007 5.404.433c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.433 2.082-5.006z"
                      clip-rule="evenodd" />
                  </svg>
                </li>
              </ul>
            </div>
            <div class="mb-0">
              <div class="mb-6 flex justify-center">
                <img
                  src="https://tecdn.b-cdn.net/img/Photos/Avatars/img%20(9).jpg"
                  class="w-32 rounded-full shadow-lg dark:shadow-black/30" />
              </div>
              <h5 class="mb-4 text-xl font-semibold">John Smith</h5>
              <h6 class="mb-4 font-semibold text-primary dark:text-primary-400">
                Marketing Specialist
              </h6>
              <p class="mb-4 text-neutral-600 dark:text-neutral-300">
                <span class="inline-block pe-2 [&>svg]:w-5"
                  ><svg
                    xmlns="http://www.w3.org/2000/svg"
                    fill="currentColor"
                    viewBox="0 0 448 512">
                    <!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
                    <path
                      d="M0 216C0 149.7 53.7 96 120 96h8c17.7 0 32 14.3 32 32s-14.3 32-32 32h-8c-30.9 0-56 25.1-56 56v8h64c35.3 0 64 28.7 64 64v64c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V320 288 216zm256 0c0-66.3 53.7-120 120-120h8c17.7 0 32 14.3 32 32s-14.3 32-32 32h-8c-30.9 0-56 25.1-56 56v8h64c35.3 0 64 28.7 64 64v64c0 35.3-28.7 64-64 64H320c-35.3 0-64-28.7-64-64V320 288 216z" />
                  </svg>
                </span>
                At vero eos et accusamus et iusto odio dignissimos ducimus qui
                blanditiis praesentium voluptatum deleniti atque corrupti.
              </p>
              <ul class="mb-0 flex items-center justify-center">
                <li>
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    viewBox="0 0 24 24"
                    fill="currentColor"
                    class="h-5 w-5 text-yellow-500">
                    <path
                      fill-rule="evenodd"
                      d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.007 5.404.433c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.433 2.082-5.006z"
                      clip-rule="evenodd" />
                  </svg>
                </li>
                <li>
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    viewBox="0 0 24 24"
                    fill="currentColor"
                    class="h-5 w-5 text-yellow-500">
                    <path
                      fill-rule="evenodd"
                      d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.007 5.404.433c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.433 2.082-5.006z"
                      clip-rule="evenodd" />
                  </svg>
                </li>
                <li>
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    viewBox="0 0 24 24"
                    fill="currentColor"
                    class="h-5 w-5 text-yellow-500">
                    <path
                      fill-rule="evenodd"
                      d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.007 5.404.433c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.433 2.082-5.006z"
                      clip-rule="evenodd" />
                  </svg>
                </li>
                <li>
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    viewBox="0 0 24 24"
                    fill="currentColor"
                    class="h-5 w-5 text-yellow-500">
                    <path
                      fill-rule="evenodd"
                      d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.007 5.404.433c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.433 2.082-5.006z"
                      clip-rule="evenodd" />
                  </svg>
                </li>
                <li>
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    fill="none"
                    class="h-5 w-5 text-yellow-500"
                    viewBox="0 0 24 24"
                    stroke-width="1.5"
                    stroke="currentColor"
                    class="h-6 w-6">
                    <path
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      d="M11.48 3.499a.562.562 0 011.04 0l2.125 5.111a.563.563 0 00.475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 00-.182.557l1.285 5.385a.562.562 0 01-.84.61l-4.725-2.885a.563.563 0 00-.586 0L6.982 20.54a.562.562 0 01-.84-.61l1.285-5.386a.562.562 0 00-.182-.557l-4.204-3.602a.563.563 0 01.321-.988l5.518-.442a.563.563 0 00.475-.345L11.48 3.5z" />
                  </svg>
                </li>
              </ul>
            </div>
          </div>
          
            
        

    Hey there 👋 we're excited about TW elements and want to see it grow! If you enjoy it, help the project grow by sharing it with your peers. Every share counts, thank you!

    Testimonials with background image

    Well-chosen background image can draw attention to testimonials. Use the code below to present your customers testimonials in the best way possible.

    woman avatar

    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Id quam sapiente molestiae numquam quas, voluptates omnis nulla ea odio quia similique corrupti magnam.

    Anna Smith

    Product manager

    • HTML
            
                
          <!--Background-->
          <section
            class="rounded-md p-6 text-center shadow-lg md:p-12 md:text-left"
            style="background-image: url(https://tecdn.b-cdn.net/img/Photos/Others/background2.jpg)">
            <div class="flex justify-center">
              <div class="max-w-3xl">
                <div
                  class="m-4 block rounded-lg bg-white p-6 shadow-lg dark:bg-neutral-800 dark:shadow-black/20">
                  <!--Testimonial-->
                  <div class="md:flex md:flex-row">
                    <div
                      class="mx-auto mb-6 flex w-36 items-center justify-center md:mx-0 md:w-96 lg:mb-0">
                      <img
                        src="https://tecdn.b-cdn.net/img/Photos/Avatars/img%20%2810%29.jpg"
                        class="rounded-full shadow-md dark:shadow-black/30"
                        alt="woman avatar" />
                    </div>
                    <div class="md:ms-6">
                      <p
                        class="mb-6 font-light text-neutral-500 dark:text-neutral-300">
                        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Id
                        quam sapiente molestiae numquam quas, voluptates omnis nulla
                        ea odio quia similique corrupti magnam.
                      </p>
                      <p
                        class="mb-2 text-xl font-semibold text-neutral-800 dark:text-neutral-200">
                        Anna Smith
                      </p>
                      <p
                        class="mb-0 font-semibold text-neutral-500 dark:text-neutral-400">
                        Product manager
                      </p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </section>
          
            
        

    Small testimonials carousel

    The testimonials carousel uses the carousel functionality to make it cycle through different comments.

    This compact version of testimonial includes a short paragraph with a quote, avatar and next/previous buttons navigation.

    "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, error amet numquam iure provident voluptate esse quasi, voluptas nostrum quisquam!"

    smaple image

    - Anna Morian

    "Neque cupiditate assumenda in maiores repudiandae mollitia adipisci maiores repudiandae mollitia consectetur adipisicing architecto elit sed adipiscing elit."

    smaple image

    - Teresa May

    "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur est laborum neque cupiditate assumenda in maiores."

    smaple image

    - Kate Allise

    • HTML
    • javascript
            
                
          <!--Carousel-->
          <div
            id="carouselExampleCaptions"
            class="relative"
            data-twe-carousel-init
            data-twe-carousel-slide>
            <div
              class="relative w-full overflow-hidden after:clear-both after:block after:content-['']">
              <!--First Testimonial / Carousel item-->
              <div
                class="relative float-left -mr-[100%] hidden w-full text-center transition-transform duration-[600ms] ease-in-out motion-reduce:transition-none"
                data-twe-carousel-active
                data-twe-carousel-item
                style="backface-visibility: hidden">
                <p
                  class="mx-auto max-w-4xl text-xl italic text-neutral-700 dark:text-neutral-300">
                  "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit,
                  error amet numquam iure provident voluptate esse quasi, voluptas
                  nostrum quisquam!"
                </p>
                <div class="mb-6 mt-12 flex justify-center">
                  <img
                    src="https://tecdn.b-cdn.net/img/Photos/Avatars/img%20(2).webp"
                    class="h-24 w-24 rounded-full shadow-lg dark:shadow-black/30"
                    alt="smaple image" />
                </div>
                <p class="text-neutral-500 dark:text-neutral-300">- Anna Morian</p>
              </div>
    
              <!--Second Testimonial / Carousel item-->
              <div
                class="relative float-left -mr-[100%] hidden w-full text-center transition-transform duration-[600ms] ease-in-out motion-reduce:transition-none"
                data-twe-carousel-item
                style="backface-visibility: hidden">
                <p
                  class="mx-auto max-w-4xl text-xl italic text-neutral-700 dark:text-neutral-300">
                  "Neque cupiditate assumenda in maiores repudiandae mollitia
                  adipisci maiores repudiandae mollitia consectetur adipisicing
                  architecto elit sed adipiscing elit."
                </p>
                <div class="mb-6 mt-12 flex justify-center">
                  <img
                    src="https://tecdn.b-cdn.net/img/Photos/Avatars/img%20(31).webp"
                    class="h-24 w-24 rounded-full shadow-lg dark:shadow-black/30"
                    alt="smaple image" />
                </div>
                <p class="text-neutral-500 dark:text-neutral-300">- Teresa May</p>
              </div>
    
              <!--Third Testimonial / Carousel item-->
              <div
                class="relative float-left -mr-[100%] hidden w-full text-center transition-transform duration-[600ms] ease-in-out motion-reduce:transition-none"
                data-twe-carousel-item
                style="backface-visibility: hidden">
                <p
                  class="mx-auto max-w-4xl text-xl italic text-neutral-700 dark:text-neutral-300">
                  "Duis aute irure dolor in reprehenderit in voluptate velit esse
                  cillum dolore eu fugiat nulla pariatur est laborum neque
                  cupiditate assumenda in maiores."
                </p>
                <div class="mb-6 mt-12 flex justify-center">
                  <img
                    src="https://tecdn.b-cdn.net/img/Photos/Avatars/img%20(10).webp"
                    class="h-24 w-24 rounded-full shadow-lg dark:shadow-black/30"
                    alt="smaple image" />
                </div>
                <p class="text-neutral-500 dark:text-neutral-300">- Kate Allise</p>
              </div>
            </div>
    
            <!--Carousel Controls - prev item-->
            <button
              class="absolute bottom-0 left-0 top-0 z-[1] flex w-[15%] items-center justify-center border-0 bg-none p-0 text-center text-black opacity-50 transition-opacity duration-150 ease-[cubic-bezier(0.25,0.1,0.25,1.0)] hover:text-black hover:no-underline hover:opacity-90 hover:outline-none focus:text-black focus:no-underline focus:opacity-90 focus:outline-none motion-reduce:transition-none dark:text-white dark:opacity-50 dark:hover:text-white dark:focus:text-white"
              type="button"
              data-twe-target="#carouselExampleCaptions"
              data-twe-slide="prev">
              <span class="inline-block h-8 w-8">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  fill="none"
                  viewBox="0 0 24 24"
                  stroke-width="1.5"
                  stroke="currentColor"
                  class="h-6 w-6">
                  <path
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    d="M15.75 19.5L8.25 12l7.5-7.5" />
                </svg>
              </span>
              <span
                class="!absolute !-m-px !h-px !w-px !overflow-hidden !whitespace-nowrap !border-0 !p-0 ![clip:rect(0,0,0,0)]"
                >Previous</span
              >
            </button>
            <!--Carousel Controls - next item-->
            <button
              class="absolute bottom-0 right-0 top-0 z-[1] flex w-[15%] items-center justify-center border-0 bg-none p-0 text-center text-black opacity-50 transition-opacity duration-150 ease-[cubic-bezier(0.25,0.1,0.25,1.0)] hover:text-black hover:no-underline hover:opacity-90 hover:outline-none focus:text-black focus:no-underline focus:opacity-90 focus:outline-none motion-reduce:transition-none dark:text-white dark:opacity-50 dark:hover:text-white dark:focus:text-white"
              type="button"
              data-twe-target="#carouselExampleCaptions"
              data-twe-slide="next">
              <span class="inline-block h-8 w-8">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  fill="none"
                  viewBox="0 0 24 24"
                  stroke-width="1.5"
                  stroke="currentColor"
                  class="h-6 w-6">
                  <path
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    d="M8.25 4.5l7.5 7.5-7.5 7.5" />
                </svg>
              </span>
              <span
                class="!absolute !-m-px !h-px !w-px !overflow-hidden !whitespace-nowrap !border-0 !p-0 ![clip:rect(0,0,0,0)]"
                >Next</span
              >
            </button>
          </div>
          
            
        
            
                
          // Initialization for ES Users
          import {
            Carousel,
            initTWE,
          } from "tw-elements";
          
          initTWE({ Carousel });
          
            
        

    Testimonials with colorful cards

    The testimonials with colorful cards uses the cards component to give them a more organized look.

    Present what people say about your project, using testimonials with colorful cards.

    Testimonials

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, error amet numquam iure provident voluptate esse quasi, veritatis totam voluptas nostrum quisquam eum porro a pariatur veniam.

    Maria Smantha


    Lorem ipsum dolor sit amet eos adipisci, consectetur adipisicing elit.

    Lisa Cudrow


    Neque cupiditate assumenda in maiores repudi mollitia architecto.

    John Smith


    Delectus impedit saepe officiis ab aliquam repellat rem unde ducimus.

    • HTML
            
                
          <section class="text-neutral-700 dark:text-neutral-300">
            <div class="mx-auto text-center md:max-w-xl lg:max-w-3xl">
              <h3 class="mb-6 text-3xl font-bold">Testimonials</h3>
              <p class="mb-6 pb-2 md:mb-12 md:pb-0">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit,
                error amet numquam iure provident voluptate esse quasi, veritatis
                totam voluptas nostrum quisquam eum porro a pariatur veniam.
              </p>
            </div>
    
            <div class="grid gap-6 text-center md:grid-cols-3">
              <div>
                <div
                  class="block rounded-lg bg-white shadow-lg dark:bg-neutral-700 dark:shadow-black/30">
                  <div class="h-28 overflow-hidden rounded-t-lg bg-[#9d789b]"></div>
                  <div
                    class="mx-auto -mt-12 w-24 overflow-hidden rounded-full border-2 border-white bg-white dark:border-neutral-800 dark:bg-neutral-800">
                    <img
                      src="https://tecdn.b-cdn.net/img/Photos/Avatars/img%20(1).webp" />
                  </div>
                  <div class="p-6">
                    <h4 class="mb-4 text-2xl font-semibold">Maria Smantha</h4>
                    <hr />
                    <p class="mt-4">
                      <span class="inline-block pe-2 [&>svg]:w-5"
                        ><svg
                          xmlns="http://www.w3.org/2000/svg"
                          fill="currentColor"
                          viewBox="0 0 448 512">
                          <!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
                          <path
                            d="M0 216C0 149.7 53.7 96 120 96h8c17.7 0 32 14.3 32 32s-14.3 32-32 32h-8c-30.9 0-56 25.1-56 56v8h64c35.3 0 64 28.7 64 64v64c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V320 288 216zm256 0c0-66.3 53.7-120 120-120h8c17.7 0 32 14.3 32 32s-14.3 32-32 32h-8c-30.9 0-56 25.1-56 56v8h64c35.3 0 64 28.7 64 64v64c0 35.3-28.7 64-64 64H320c-35.3 0-64-28.7-64-64V320 288 216z" />
                        </svg>
                      </span>
                      Lorem ipsum dolor sit amet eos adipisci, consectetur
                      adipisicing elit.
                    </p>
                  </div>
                </div>
              </div>
              <div>
                <div
                  class="block rounded-lg bg-white shadow-lg dark:bg-neutral-700 dark:shadow-black/30">
                  <div class="h-28 overflow-hidden rounded-t-lg bg-[#7a81a8]"></div>
                  <div
                    class="mx-auto -mt-12 w-24 overflow-hidden rounded-full border-2 border-white bg-white dark:border-neutral-800 dark:bg-neutral-800">
                    <img
                      src="https://tecdn.b-cdn.net/img/Photos/Avatars/img%20(2).webp" />
                  </div>
                  <div class="p-6">
                    <h4 class="mb-4 text-2xl font-semibold">Lisa Cudrow</h4>
                    <hr />
                    <p class="mt-4">
                      <span class="inline-block pe-2 [&>svg]:w-5"
                        ><svg
                          xmlns="http://www.w3.org/2000/svg"
                          fill="currentColor"
                          viewBox="0 0 448 512">
                          <!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
                          <path
                            d="M0 216C0 149.7 53.7 96 120 96h8c17.7 0 32 14.3 32 32s-14.3 32-32 32h-8c-30.9 0-56 25.1-56 56v8h64c35.3 0 64 28.7 64 64v64c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V320 288 216zm256 0c0-66.3 53.7-120 120-120h8c17.7 0 32 14.3 32 32s-14.3 32-32 32h-8c-30.9 0-56 25.1-56 56v8h64c35.3 0 64 28.7 64 64v64c0 35.3-28.7 64-64 64H320c-35.3 0-64-28.7-64-64V320 288 216z" />
                        </svg>
                      </span>
                      Neque cupiditate assumenda in maiores repudi mollitia
                      architecto.
                    </p>
                  </div>
                </div>
              </div>
              <div>
                <div
                  class="block rounded-lg bg-white shadow-lg dark:bg-neutral-700 dark:shadow-black/30">
                  <div class="h-28 overflow-hidden rounded-t-lg bg-[#6d5b98]"></div>
                  <div
                    class="mx-auto -mt-12 w-24 overflow-hidden rounded-full border-2 border-white bg-white dark:border-neutral-800 dark:bg-neutral-800">
                    <img
                      src="https://tecdn.b-cdn.net/img/Photos/Avatars/img%20(9).webp" />
                  </div>
                  <div class="p-6">
                    <h4 class="mb-4 text-2xl font-semibold">John Smith</h4>
                    <hr />
                    <p class="mt-4">
                      <span class="inline-block pe-2 [&>svg]:w-5"
                        ><svg
                          xmlns="http://www.w3.org/2000/svg"
                          fill="currentColor"
                          viewBox="0 0 448 512">
                          <!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
                          <path
                            d="M0 216C0 149.7 53.7 96 120 96h8c17.7 0 32 14.3 32 32s-14.3 32-32 32h-8c-30.9 0-56 25.1-56 56v8h64c35.3 0 64 28.7 64 64v64c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V320 288 216zm256 0c0-66.3 53.7-120 120-120h8c17.7 0 32 14.3 32 32s-14.3 32-32 32h-8c-30.9 0-56 25.1-56 56v8h64c35.3 0 64 28.7 64 64v64c0 35.3-28.7 64-64 64H320c-35.3 0-64-28.7-64-64V320 288 216z" />
                        </svg>
                      </span>
                      Delectus impedit saepe officiis ab aliquam repellat rem unde
                      ducimus.
                    </p>
                  </div>
                </div>
              </div>
            </div>
          </section>
          
            
        

    Two columns testimonials

    Create a 2-column testimonials layout grid using code provided below:

    Testimonials

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, error amet numquam iure provident voluptate esse quasi, veritatis totam voluptas nostrum quisquam eum porro a pariatur veniam.

    "Lorem ipsum dolor sit amet eos adipisci, consectetur adipisicing elit sed ut perspiciatis unde omnis."

    - Anna Morian

    "Neque cupiditate assumenda in maiores repudiandae mollitia architecto elit sed adipiscing elit."

    - Teresa May

    • HTML
            
                
          <section class="px-4">
            <div class="mx-auto max-w-3xl text-center">
              <h3 class="mb-6 text-3xl font-bold">Testimonials</h3>
              <p class="mb-6 pb-2 text-neutral-500 dark:text-neutral-300 md:mb-12">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit,
                error amet numquam iure provident voluptate esse quasi, veritatis
                totam voluptas nostrum quisquam eum porro a pariatur veniam.
              </p>
            </div>
    
            <div class="grid gap-12 text-center md:grid-cols-2">
              <!--First Testimonial-->
              <div class="mb-6 md:mb-0">
                <div class="mb-6 flex justify-center">
                  <img
                    src="https://tecdn.b-cdn.net/img/Photos/Avatars/img%20(22).jpg"
                    class="w-24 rounded-full shadow-lg dark:shadow-black/30" />
                </div>
                <p class="my-4 text-xl text-neutral-500 dark:text-neutral-300">
                  "Lorem ipsum dolor sit amet eos adipisci, consectetur adipisicing
                  elit sed ut perspiciatis unde omnis."
                </p>
                <p class="italic">- Anna Morian</p>
              </div>
    
              <!--Second Testimonial-->
              <div class="mb-0">
                <div class="mb-6 flex justify-center">
                  <img
                    src="https://tecdn.b-cdn.net/img/Photos/Avatars/img%20(19).jpg"
                    class="w-24 rounded-full shadow-lg dark:shadow-black/30" />
                </div>
                <p class="my-4 text-xl text-neutral-500 dark:text-neutral-300">
                  "Neque cupiditate assumenda in maiores repudiandae mollitia
                  architecto elit sed adipiscing elit."
                </p>
                <p class="italic">- Teresa May</p>
              </div>
            </div>
          </section>
          
            
        

    Related resources

    Tutorials:

    grid system responsiveness containers icons dark mode flexbox text spacing carousel rounded corners shadows cards advanced grid sizing forms

    Extended Docs:

    colors dividers headings icons images typography avatar cards carousel list group paragraphs rating borders breakpoints center grid items center text columns dark theme flexbox position spacing text bold text color text decoration text size

    Generators and builders:

    Form drag & drop Typography SVG icon Instagram Filters button card table flexbox logo grid footer

    Design System (Figma):

    introduction content should be the star less is more power of visual hierarchy de emphasize with no mercy size matters lowering contrast low contrast vs low aesthetics beyond borders let it breathe user experience do not start with the roof project personality design system plan the process principles tips and tricks
    • Basic example
    • Testimonials with background image
    • Small testimonials carousel
    • Testimonials with colorful cards
    • Two columns testimonials
    • Related resources
    Get useful tips & free resources directly to your inbox along with exclusive subscriber-only content.
    Join our mailing list now
    © 2024 Copyright: MDBootstrap.com

    Access restricted

    To view this section you must have an active PRO account

    Log in to your account or purchase an TWE subscription if you don't have one.

    Buy TWE PRO