Home
$@(\/)(\/)¥
Testimonials

Testimonials

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

Testimonial

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

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

1.2k

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

User testimonial/review section

Author:
Sophia Baker

2 years ago

14.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.

Author:
Muhammad Umair Arshad

3 months ago

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

Author:
INGRIDE MUZIRANENGE

5 months ago

409
How to create a carousel with Tailwind CSS and Alpinejs
How to create a carousel with Tailwind CSS and Alpinejs

Author:
Michael Andreuzza

1 year ago

3.8k
Testimonial card with image

Author:
Simon Scheffer

2 years ago

12k
masonary grids effect for cards using columns
As part of the redesign I was trying to think of ways to lay out testimonials from students, which may have varying length/content, I stumbled onto the idea of using a masonry layout (think bricks, think Pinterest).

Author:
rohit whyphy

8 months ago

1.2k
Modern Testimonial
A simple and easy to use component for reviews and testimonials.

Author:
Coastal UI

8 months ago

935
Twitter Testimonials Showcase with Tailwind CSS

Author:
EliteAI Tools

8 months ago

948
Testimonial full width

Author:
Piet Vriend

2 years ago

12.8k
Tailwind CSS Testimonial Slider
Descriptive background image with Testimonial Slider .

Author:
Bernard Omuse

1 year ago

2.4k
Testimonial Card

Author:
Anonymous

11 months ago

870
Testimonial Card with Floating Image and Star Rating
A beautifully designed testimonial card featuring a floating user image, review text, and a 5-star rating. The card uses a rounded layout with a bright yellow border, making it stand out on any page. Ideal for displaying customer feedback or product reviews with a modern look.

Author:
Anum Shahana

1 year ago

1.3k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components