Testimonials
Below you can find a Testimonial component styled with tailwindcss.
Preview - Big testimonial
Janek G贸rski
CTO & Co-Founder
HTML
<div class="flex h-[111px] max-h-[111px] items-center">
<div class="flex flex-row items-center min-w-fit h-auto h-[32px]">
<div class="rounded-full overflow-hidden bg-white flex justify-center items-center w-[32px] h-[32px] w-[111px] h-[111px] mr-4">
<img src="https://ui-avatars.com/api/?name=John+Doe" alt="avatar" class="rounded-full w-[100%]" />
</div>
</div>
<div class>
<h4 class="text-md text-neutral-600 dark:text-white">Janek G贸rski</h4>
<p class="text-xs text-neutral-400 dark:text-white leading-[150%]">CTO & Co-Founder</p>
</div>
</div>React
<div className="flex h-[111px] max-h-[111px] items-center">
<div className="flex flex-row items-center min-w-fit h-auto h-[32px]">
<div className="rounded-full overflow-hidden bg-white flex justify-center items-center w-[32px] h-[32px] w-[111px] h-[111px] mr-4">
<img src="https://ui-avatars.com/api/?name=John+Doe" alt="avatar" className="rounded-full w-[100%]" />
</div>
</div>
<div class>
<h4 className="text-md text-neutral-600 dark:text-white">Janek G贸rski</h4>
<p className="text-xs text-neutral-400 dark:text-white leading-[150%]">CTO & Co-Founder</p>
</div>
</div>Preview - Regular testimonial
Janek G贸rski
CTO & Co-Founder
HTML
<div class="flex h-[111px] max-h-[111px] items-center">
<div class="flex flex-row items-center min-w-fit h-auto h-[24px]">
<div class="rounded-full overflow-hidden bg-white flex justify-center items-center w-[24px] h-[24px] w-[64px] h-[64px] mr-2">
<img src="https://ui-avatars.com/api/?name=John+Doe" alt="avatar" class="rounded-full w-[100%]" />
</div>
</div>
<div class>
<h4 class="text-md text-neutral-600 dark:text-white">Janek G贸rski</h4>
<p class="text-xs text-neutral-400 dark:text-white leading-[150%]">CTO & Co-Founder</p>
</div>
</div>React
<div className="flex h-[111px] max-h-[111px] items-center">
<div className="flex flex-row items-center min-w-fit h-auto h-[24px]">
<div className="rounded-full overflow-hidden bg-white flex justify-center items-center w-[24px] h-[24px] w-[64px] h-[64px] mr-2">
<img src="https://ui-avatars.com/api/?name=John+Doe" alt="avatar" className="rounded-full w-[100%]" />
</div>
</div>
<div class>
<h4 className="text-md text-neutral-600 dark:text-white">Janek G贸rski</h4>
<p className="text-xs text-neutral-400 dark:text-white leading-[150%]">CTO & Co-Founder</p>
</div>
</div>Preview - Vertical testimonial
Janek G贸rski
CTO & Co-Founder
HTML
<div class="flex flex-col">
<div class="flex flex-row items-center min-w-fit h-auto h-[24px]">
<div class="rounded-full overflow-hidden bg-white flex justify-center items-center w-[24px] h-[24px] w-[64px] h-[64px] mb-2">
<img src="https://ui-avatars.com/api/?name=John+Doe" alt="avatar" class="rounded-full w-[100%]" />
</div>
</div>
<div class="space-y-1">
<h4 class="text-md text-neutral-600 dark:text-white">Janek G贸rski</h4>
<p class="text-xs text-neutral-400 dark:text-white leading-[150%]">CTO & Co-Founder</p>
</div>
</div>React
<div className="flex flex-col">
<div className="flex flex-row items-center min-w-fit h-auto h-[24px]">
<div className="rounded-full overflow-hidden bg-white flex justify-center items-center w-[24px] h-[24px] w-[64px] h-[64px] mb-2">
<img src="https://ui-avatars.com/api/?name=John+Doe" alt="avatar" className="rounded-full w-[100%]" />
</div>
</div>
<div className="space-y-1">
<h4 className="text-md text-neutral-600 dark:text-white">Janek G贸rski</h4>
<p className="text-xs text-neutral-400 dark:text-white leading-[150%]">CTO & Co-Founder</p>
</div>
</div>