<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Evento - Landing Page: Testimonials</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<div id="review" class="bg-white py-6 sm:py-8 lg:py-12">
<div class="mx-auto max-w-screen-xl px-4 md:px-8 md:mt-16 md:mb-16">
<h2 class="mb-16 text-center text-2xl font-bold text-gray-800 md:mb-12 lg:text-3xl">What others say about us</h2>
<div class="grid gap-y-10 sm:grid-cols-2 sm:gap-y-12 lg:grid-cols-3 lg:divide-x">
<!-- quote - start -->
<div class="flex flex-col items-center gap-4 sm:px-4 md:gap-6 lg:px-8">
<div class="text-center text-gray-600">“The webinar on web development conducted by John was exceptional. He explained complex concepts in a simple and engaging manner. I learned a lot and feel more confident in my web development skills now.”</div>
<div class="flex flex-col items-center gap-2 sm:flex-row md:gap-3">
<div class="h-12 w-12 overflow-hidden rounded-full bg-gray-100 shadow-lg md:h-14 md:w-14">
<img src="https://images.unsplash.com/photo-1567515004624-219c11d31f2e??auto=format&q=75&fit=crop&w=112" loading="lazy" alt="Photo by Radu Florin" class="h-full w-full object-cover object-center" />
</div>
<div>
<div class="text-center text-sm font-bold text-indigo-500 sm:text-left md:text-base">Sarah Thompson</div>
<p class="text-center text-sm text-gray-500 sm:text-left md:text-sm">Lead Developer / TechPro Solutions</p>
</div>
</div>
</div>
<!-- quote - end -->
<!-- quote - start -->
<div class="flex flex-col items-center gap-4 sm:px-4 md:gap-6 lg:px-8 ">
<div class="text-center text-gray-600">“I thoroughly enjoyed the webinar hosted by Michael. His expertise in web development is evident, and he shared valuable insights and tips. It was a great learning experience, and I would highly recommend it to others.”</div>
<div class="flex flex-col items-center gap-2 sm:flex-row md:gap-3">
<div class="h-12 w-12 overflow-hidden rounded-full bg-gray-100 shadow-lg md:h-14 md:w-14">
<img src="https://images.unsplash.com/photo-1532073150508-0c1df022bdd1?auto=format&q=75&fit=crop&w=112" loading="lazy" alt="Photo by christian ferrer" class="h-full w-full object-cover object-center" />
</div>
<div>
<div class="text-center text-sm font-bold text-indigo-500 sm:text-left md:text-base">Kate Berg</div>
<p class="text-center text-sm text-gray-500 sm:text-left md:text-sm">Chief Technology Officer / InnovateX</p>
</div>
</div>
</div>
<!-- quote - end -->
<!-- quote - start -->
<div class="flex flex-col items-center gap-4 sm:px-4 md:gap-6 lg:px-8">
<div class="text-center text-gray-600">Attending Emily's webinar on web development was a game-changer for me. His knowledge and passion for the subject were inspiring. The practical examples and hands-on helped me improve my coding skills.”</div>
<div class="flex flex-col items-center gap-2 sm:flex-row md:gap-3">
<div class="h-12 w-12 overflow-hidden rounded-full bg-gray-100 shadow-lg md:h-14 md:w-14">
<img src="https://images.unsplash.com/photo-1463453091185-61582044d556?auto=format&q=75&fit=crop&w=500" loading="lazy" alt="Photo by Ayo Ogunseinde" class="h-full w-full object-cover object-center" />
</div>
<div>
<div class="text-center text-sm font-bold text-indigo-500 sm:text-left md:text-base">Greg Jackson</div>
<p class="text-center text-sm text-gray-500 sm:text-left md:text-sm">Frontend Developer / CodeCrafters</p>
</div>
</div>
</div>
<!-- quote - end -->
</div>
</div>
</div>
</body>
</html>
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.