testimonial-columns.html

<div class="bg-white flex items-center justify-center min-h-screen min-w-screen">
    <div class="bg-white px-10">
        <div class="container mx-auto flex justify-center items-center flex-col py-12">
            <p class="text-teal-500 font-medium text-lg tracking-wider uppercase">Testimonials</p>
            <h2 class="text-5xl font-bold pr-12 max-w-3xl text-center">People Like Us 🥰</h2>
            <div class="lg:flex justify-center items-center w-full mt-16 mb-4">
                <div class="h-auto w-full lg:w-1/3 mb-12 lg:mb-0 flex justify-start items-start flex-col">
                    <div class="flex items-center justify-center">
                        <div class="w-16 h-16 bg-gray-200 rounded-full mr-4 overflow-hidden">
                            <img src="https://images.unsplash.com/photo-1527980965255-d3b416303d12?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1700&q=80" class="object-cover w-full h-full">
                        </div>
                        <div class="flex justify-center items-start flex-col">
                            <h4 class="text-gray-800 font-bold">John Doe</h4>
                            <p class="text-gray-600">CEO of Something</p>
                        </div>
                    </div>
                    <blockquote class="text-gray-500 mt-8 text-lg">"This is some rad shit! Pop lockin, Boom shockin radical. I immediately wet my pants after trying this service."</blockquote>
                </div>
                <div class="h-auto w-full lg:w-1/3 mb-12 lg:mb-0 px-0 lg:px-8 mx-0 lg:mx-8 flex justify-start items-start flex-col border-transparent border-r border-l lg:border-gray-200">
                    <div class="flex items-center justify-center">
                        <div class="w-16 h-16 bg-gray-200 rounded-full mr-4 overflow-hidden">
                            <img src="https://images.unsplash.com/photo-1544725176-7c40e5a71c5e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2547&q=80" class="object-cover w-full h-full">
                        </div>
                        <div class="flex justify-center items-start flex-col">
                            <h4 class="text-gray-800 font-bold">Jane Doe</h4>
                            <p class="text-gray-600">CTO of Business</p>
                        </div>
                    </div>
                    <blockquote class="text-gray-500 mt-8 text-lg">"Thanks for creating this service. My life is so much easier. Thanks for making such a great product."</blockquote>
                </div>
                <div class="h-auto w-full lg:w-1/3 flex justify-start items-start flex-col">
                    <div class="flex items-center justify-center">
                        <div class="w-16 h-16 bg-gray-200 rounded-full mr-4 overflow-hidden">
                            <img src="https://images.unsplash.com/photo-1545167622-3a6ac756afa4?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1256&q=80" class="object-cover w-full h-full">
                        </div>
                        <div class="flex justify-center items-start flex-col">
                            <h4 class="text-gray-800 font-bold">John Smith</h4>
                            <p class="text-gray-600">Creator of Stuff</p>
                        </div>
                    </div>
                    <blockquote class="text-gray-500 mt-8 text-lg">"Packed with awesome content and exactly what I was looking for. I would highly recommend this to anyone."</blockquote>
                </div>
            </div>
        </div>
    </div>
</div>