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.1k

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

Testimonial

Author:
Leon Bachmann

2 years ago

9.4k
The future ai
The is technology

Author:
ORGIN_DREAMS

4 months ago

333
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

11 months ago

1.3k
Testimonial section
Gradient background and a testimonial quote with a highlighted phrase. The testimonial includes an image, name, and occupation.

Author:
Carla Hoffman

1 year ago

2.2k
Testimonial card

Author:
Amit Pachange

2 years ago

11.4k
Tailwind testimonials section

Author:
Kofi Osei

2 years ago

12.5k
Simple testimonial card

Author:
Laurits

2 years ago

11k
Landing page

Author:
Maxim

6 months ago

1.5k
Twitter Testimonials Showcase with Tailwind CSS

Author:
EliteAI Tools

7 months ago

858
Testimonial Card

Author:
Anja Müller

2 years ago

6.7k
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

7 months ago

1.1k
Modern page
hero page by salvator

Author:
Baraka Salvator

4 months ago

876

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components