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

Testimonials

This tailwind example is contributed by $@(\/)(\/)Y, 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

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

Author $@(\/)(\/)Y

958

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