Testimonials

This tailwind example is contributed by $@(\/)(\/)¥, on 30-Dec-2024. Component is made with Tailwind v3.4. It is responsive. It supports dark mode. similar terms for this example are endorsement,review

Testimonial

$$@(\/)(\/)¥ profile image$

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

Tailwind v3.4 1.9k 4

Fork Fullscreen

<section class="w-full h-full flex flex-col justify-center sm:p-10 p-6" id="testimonial">
      
      <div class="w-fit sm:mb-20 mb-10">
        <h2 class="text-2xl font-bold text-white dark:text-black pb-2">Testimonials</h2>
        <div class="rounded-t-full border-[1px] border-gray-500 dark:border-gray-400 overflow-hidden">
          <hr class="border-[3px] border-green-400 border-green-600 w-[40%]" />
        </div>
      </div>

<p class="md:pl-8 text-gray-300 dark:text-gray-700 sm:text-xl font-semibold text-center font-serif">
            <span class="sm:text-5xl text-xl text-gray-300 dark:text-gray-800">❝</span>An exceptional professional! Delivered beyond our
            expectations, ensuring every detail was perfect. Highly recommended!
            <br><span class="sm:text-5xl text-xl text-gray-300 dark:text-gray-800">❞</span>
          </p>
          <div class="flex flex-col justify-center items-center">
            <p class="text-gray-400 dark:text-gray-700 sm:text-xl sm:mt-2">Emily Carter</p>
            <p class="text-gray-500">CEO of Innovate Solutions</p>
          </div>
        </div>
        
        <div class="flex flex-col justify-center-center border border-gray-400 dark:border-gray-300 md:p-8 p-2 rounded-xl relative">
          <img class="absolute lg:-left-6 lg:-top-10 -left-[25px] -top-4 sm lg:w-[6rem] lg:h-[6rem] sm:w-[4rem] sm:h-[4rem] w-[3rem] h-[3rem] rounded-full outline outline-offset-2 outline-green-400 dark:outline-green-600"
            src="https://images.unsplash.com/photo-1609010697446-11f2155278f0?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NzEyNjZ8MHwxfHNlYXJjaHw2fHx5b3VuZyUyMG1hbnxlbnwwfDB8fHwxNzM1NDEzMTM4fDA&ixlib=rb-4.0.3&q=80&w=1080" alt="testimonials" />

<p class="md:pl-8 text-gray-300 dark:text-gray-700 sm:text-xl font-semibold text-center font-serif">
            <span class="sm:text-5xl text-xl text-gray-300 dark:text-gray-800">❝</span>
            Their ability to combine creativity and technical expertise is unmatched. The UI/UX design they delivered
            elevated our brand image significantly.
            <br><span class="sm:text-5xl text-xl text-gray-300 dark:text-gray-800">❞</span>
          </p>
          <div class="flex flex-col justify-center items-center">
            <p class="text-gray-400 dark:text-gray-700 sm:text-xl sm:mt-2">Ryan Mitchell</p>
            <p class="text-gray-500">Marketing Director at BrightWave Media</p>
          </div>
        </div>
        
        <div class="flex flex-col justify-center-center border border-gray-400 dark:border-gray-300 md:p-8 p-2 rounded-xl relative">
          <img class="absolute lg:-left-6 lg:-top-10 -left-[25px] -top-4 sm lg:w-[6rem] lg:h-[6rem] sm:w-[4rem] sm:h-[4rem] w-[3rem] h-[3rem] rounded-full outline outline-offset-2 outline-green-400 dark:outline-green-600"
            src="https://images.unsplash.com/photo-1598096969068-7f52cac10c83?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NzEyNjZ8MHwxfHNlYXJjaHwxM3x8eW91bmclMjBtYW58ZW58MHwwfHx8MTczNTQxMzEzOHww&ixlib=rb-4.0.3&q=80&w=1080" alt="testimonials" />

<p class="md:pl-8 text-gray-300 dark:text-gray-700 sm:text-xl font-semibold text-center font-serif">
            <span class="sm:text-5xl text-xl text-gray-300 dark:text-gray-800">❝</span>
            What stood out was the attention to detail and seamless communication throughout the project. The mobile
            app they developed exceeded our expectations.
            <br><span class="sm:text-5xl text-xl text-gray-300 dark:text-gray-800">❞</span>
          </p>
          <div class="flex flex-col justify-center items-center">
            <p class="text-gray-400 dark:text-gray-700 sm:text-xl sm:mt-2">James Patel</p>
            <p class="text-gray-500">Product Manager at TechSphere</p>
          </div>
        </div>
        
        <div class="flex flex-col justify-center-center border border-gray-400 dark:border-gray-300 md:p-8 p-2 rounded-xl relative">
          <img class="absolute lg:-left-6 lg:-top-10 -left-[25px] -top-4 sm lg:w-[6rem] lg:h-[6rem] sm:w-[4rem] sm:h-[4rem] w-[3rem] h-[3rem] rounded-full outline outline-offset-2 outline-green-400 dark:outline-green-600"
            src="https://images.unsplash.com/photo-1524508762098-fd966ffb6ef9?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NzEyNjZ8MHwxfHNlYXJjaHwyfHx0ZWNoJTIwZ2lybHxlbnwwfDB8fHwxNzM1NDE5MTgxfDA&ixlib=rb-4.0.3&q=80&w=1080" alt="testimonials" />

<p class="md:pl-8 text-gray-300 dark:text-gray-700 sm:text-xl font-semibold text-center font-serif">
            <span class="sm:text-5xl text-xl text-gray-300 dark:text-gray-800">❝</span>
            Reliable, efficient, and innovative – their work has transformed our online platform. Our sales have seen
            a massive boost since launching the new website!
            <br><span class="sm:text-5xl text-xl text-gray-300 dark:text-gray-800">❞</span>
          </p>
          <div class="flex flex-col justify-center items-center">
            <p class="text-gray-400 dark:text-gray-700 sm:text-xl sm:mt-2">Sarah Nguyen</p>
            <p class="text-gray-500">Founder of Craft&Co</p>
          </div>
        </div>

</div>
    </section>

</div>
</div>

<script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>

mobileMenuButton.addEventListener('click', () => {
      mobileMenu.classList.remove('hidden');
      mobileMenu.querySelector('div').classList.remove('-translate-x-full');
    });

closeMenuButton.addEventListener('click', () => {
      mobileMenu.querySelector('div').classList.add('-translate-x-full');
      setTimeout(() => mobileMenu.classList.add('hidden'), 300);
    });

mobileMenu.addEventListener('click', (e) => {
      if (e.target === mobileMenu) {
        closeMenuButton.click();
      }
    });
</script>

Related Examples

Test99
test

Shakil Abdus Shohid

5 months ago

311
Customer testimonial card
Responsive user testimonial card with image

Arya

3 years ago

12.7k
Review cards with social proof icons

kishan pc

2 years ago

2.4k
Medlife Hospital
To provide exceptional, compassionate healthcare through innovative medicine, cutting-edge technology, and a commitment to patient-centered service

INGRIDE MUZIRANENGE

1 year ago

837
Tailwind Card Components
A collection of 20+ copy-paste ready card components built with pure HTML and Tailwind CSS. Includes product cards, profile cards, article cards, pricing cards, testimonials, and notifications.

Ijila Itunu

1 year ago

1.4k
Profile, Team or Testimonial
Profile, Team or Testimonial

$$@(\/)(\/)¥$ $@(\/)(\/)¥

2 years ago

4.1k
Testimonial wall
added light mode support

yousef

2 years ago

3.9k
Enhanced Student Testimonials Section
A modern, interactive testimonials section featuring glassmorphism design, floating animations, and social proof elements. Includes star ratings, course badges, user profiles with online status indicators, and a stats section. Built with Tailwind CSS and features gradient backgrounds, hover effects, and responsive design optimized for showcasing student success stories and building credibility.

Muhammad Umair Arshad

1 year ago

1.4k
Testimonial Section with Gradient Background
The section includes a company logo at the top, a customer testimonial in the center, and the author's name and position at the bottom.

Elsabe Fourie

3 years ago

9k
Testimonial cards
each card contains a customer quote, an image of the customer, and their name.

Komal Jain

2 years ago

11.6k
Testimonial Card

Sophia Baker

3 years ago

11.5k
Testimonial

Steven Kuhn

3 years ago

15.2k