Testimonial
Below you can find a Testimonial component styled with tailwindcss.
Big testimonial
- Preview
- HTML
- React
Janek G贸rski
CTO & Co-Founder
Copy
<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 class="rounded-full w-[100%]" alt="avatar">
</div>
</div>
<div>
<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 &amp; Co-Founder</p>
</div>
</div>
Copy
<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 className="rounded-full w-[100%]" alt="avatar" />
</div>
</div>
<div>
<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 &amp; Co-Founder</p>
</div>
</div>Regular testimonial
- Preview
- HTML
- React
Janek G贸rski
CTO & Co-Founder
Copy
<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 class="rounded-full w-[100%]" alt="avatar">
</div>
</div>
<div>
<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 &amp; Co-Founder</p>
</div>
</div>
Copy
<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 className="rounded-full w-[100%]" alt="avatar" />
</div>
</div>
<div>
<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 &amp; Co-Founder</p>
</div>
</div>Vertical testimonial
- Preview
- HTML
- React
Janek G贸rski
CTO & Co-Founder
Copy
<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 class="rounded-full w-[100%]" alt="avatar">
</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 &amp; Co-Founder</p>
</div>
</div>
Copy
<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 className="rounded-full w-[100%]" alt="avatar" />
</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 &amp; Co-Founder</p>
</div>
</div>