testimonial-cta-left.html

<div class="flex items-center justify-center bg-gray-100 min-h-screen min-w-screen">
    <div class="max-w-6xl mx-auto bg-gray-100 px-10">
        <div class="flex items-center">
            <div class="w-1/2 flex flex-col justify-center items-start h-full pr-8">
                <p class="text-indigo-500 uppercase text-base font-medium tracking-tight mb-2">Our customers love our product</p>
                <h2 class="text-4xl tracking-tight leading-10 font-extrabold text-gray-900 sm:text-5xl sm:leading-none md:text-6xl lg:text-5xl xl:text-6xl">Testimonials</h2>
                <p class="text-gray-600 text-lg my-6">Don't just take our word for it, read from our extensive list of case studies and customer testimonials.</p>
                <a href="#_" class="flex items-center justify-center px-8 py-3 border border-transparent text-base leading-6 font-medium rounded-md shadow text-white bg-indigo-600 hover:bg-indigo-500 focus:outline-none focus:border-indigo-700 focus:shadow-outline-indigo transition duration-150 ease-in-out md:py-4 md:text-lg md:px-10">View Case Studies</a>
            </div>
            <div class="w-1/2">
                <blockquote class="w-full flex items-center justify-between p-6 col-span-1 bg-white rounded-lg shadow">
                    <div class="flex flex-col pr-8">
                        <div class="pl-12 relative">
                            <svg class="w-10 h-10 fill-current text-indigo-500 absolute left-0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 125">
                                <path d="M30.7 42c0 6.1 12.6 7 12.6 22 0 11-7.9 19.2-18.9 19.2C12.7 83.1 5 72.6 5 61.5c0-19.2 18-44.6 29.2-44.6 2.8 0 7.9 2 7.9 5.4S30.7 31.6 30.7 42zM82.4 42c0 6.1 12.6 7 12.6 22 0 11-7.9 19.2-18.9 19.2-11.8 0-19.5-10.5-19.5-21.6 0-19.2 18-44.6 29.2-44.6 2.8 0 7.9 2 7.9 5.4S82.4 31.6 82.4 42z" /></svg>
                            <p class="text-base text-gray-600 mt-2">Awesome product! And the customer service is exceptionally well.</p>
                        </div>

                        <h3 class="pl-12 text-gray-800 text-base mt-3 leading-5 font-medium truncate">Jane Cooper <span class="mt-1 text-gray-500 text-sm leading-5 truncate mt-1">- CEO SomeCompany</span></h3>
                        <p class="mt-1 text-gray-500 text-sm leading-5 truncate mt-1"></p>
                    </div>
                    <img class="w-24 h-24 bg-gray-300 rounded-full flex-shrink-0" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=4&w=256&h=256&q=60" alt="">
                </blockquote>
                <blockquote class="w-full flex items-center justify-between p-6 col-span-1 bg-white rounded-lg shadow mt-4">
                    <div class="flex flex-col pr-10">
                        <div class="pl-12 relative">
                            <svg class="w-10 h-10 fill-current text-indigo-500 absolute left-0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 125">
                                <path d="M30.7 42c0 6.1 12.6 7 12.6 22 0 11-7.9 19.2-18.9 19.2C12.7 83.1 5 72.6 5 61.5c0-19.2 18-44.6 29.2-44.6 2.8 0 7.9 2 7.9 5.4S30.7 31.6 30.7 42zM82.4 42c0 6.1 12.6 7 12.6 22 0 11-7.9 19.2-18.9 19.2-11.8 0-19.5-10.5-19.5-21.6 0-19.2 18-44.6 29.2-44.6 2.8 0 7.9 2 7.9 5.4S82.4 31.6 82.4 42z" /></svg>
                            <p class="text-base text-gray-600 mt-2">I can't express enough, how amazing this service has been for my company.</p>
                        </div>
                        <h3 class="pl-12 text-gray-800 text-base mt-3 leading-5 font-medium truncate">John Doe <span class="mt-1 text-gray-500 text-sm leading-5 truncate mt-1">- CEO SomeCompany</span></h3>
                        <p class="mt-1 text-gray-500 text-sm leading-5 truncate mt-1"></p>
                    </div>
                    <img class="w-24 h-24 bg-gray-300 rounded-full flex-shrink-0" src="https://images.unsplash.com/photo-1527980965255-d3b416303d12?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&aauto=format&fit=facearea&facepad=4&w=256&h=256&q=60" alt="">
                </blockquote>
                <blockquote class="w-full flex items-center justify-between p-6 col-span-1 bg-white rounded-lg shadow mt-4">
                    <div class="flex flex-col pr-10">
                        <div class="pl-12 relative">
                            <svg class="w-10 h-10 fill-current text-indigo-500 absolute left-0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 125">
                                <path d="M30.7 42c0 6.1 12.6 7 12.6 22 0 11-7.9 19.2-18.9 19.2C12.7 83.1 5 72.6 5 61.5c0-19.2 18-44.6 29.2-44.6 2.8 0 7.9 2 7.9 5.4S30.7 31.6 30.7 42zM82.4 42c0 6.1 12.6 7 12.6 22 0 11-7.9 19.2-18.9 19.2-11.8 0-19.5-10.5-19.5-21.6 0-19.2 18-44.6 29.2-44.6 2.8 0 7.9 2 7.9 5.4S82.4 31.6 82.4 42z" /></svg>
                            <p class="text-base text-gray-600 mt-2">I can't express enough, how amazing this service has been for my company.</p>
                        </div>

                        <h3 class="pl-12 text-gray-800 text-base mt-3 leading-5 font-medium truncate">John Smith <span class="mt-1 text-gray-500 text-sm leading-5 truncate mt-1">- CEO SomeCompany</span></h3>
                        <p class="mt-1 text-gray-500 text-sm leading-5 truncate mt-1"></p>
                    </div>
                    <img class="w-24 h-24 bg-gray-300 rounded-full flex-shrink-0" src="https://images.unsplash.com/photo-1545167622-3a6ac756afa4?ixlib=rrb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&aauto=format&fit=facearea&facepad=4&w=256&h=256&q=60" alt="">
                </blockquote>
            </div>
        </div>
    </div>
</div>