Testimonials
A testimonial section can be used to highlight an endorsement or success story by using a large pull quote, a headshot, and attribution.
Testimonial section 1
<div class="text-gray-900 font-sans">
<div class="container max-w-3xl py-20 lg:py-32">
<blockquote class="relative pl-8 sm:pl-16">
<span class="absolute top-0 left-0 text-5xl font-bold font-serif sm:text-7xl">“</span>
<p class="text-xl font-light sm:text-2xl">Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis</p>
<div class="mt-4 flex items-center sm:mt-8">
<img
src="https://images.unsplash.com/photo-1551069613-1904dbdcda11?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=3&w=320&h=320&q=60"
alt="Jamila Farrington's portrait"
class="w-20 h-20 rounded-full shadow-inset-lg"
>
<cite class="ml-4 not-italic">
<h3 class="font-bold">Jamila Farrington</h3>
<h4>Program Chair</h4>
</cite>
</div>
</blockquote>
</div>
</div>
Testimonial section 2
<div class="text-gray-900 font-sans">
<div class="container max-w-5xl flex flex-col items-center py-20 sm:flex-row sm:items-start lg:py-32">
<img
src="https://images.unsplash.com/photo-1551069613-1904dbdcda11?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=3&w=320&h=320&q=60"
alt="Jamila Farrington's portrait"
class="flex-shrink-0 w-40 h-40 rounded-full shadow-inset-lg"
>
<blockquote class="relative mt-8 pl-10 sm:mt-0 sm:ml-8 sm:pl-16">
<span class="absolute top-0 left-0 text-5xl font-bold font-serif sm:text-7xl">“</span>
<p class="text-xl font-light sm:text-2xl">Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis</p>
<cite class="mt-4 ml-4 not-italic">
<h3 class="font-bold">Jamila Farrington</h3>
<h4>Program Chair</h4>
</cite>
</blockquote>
</div>
</div>