Basic example
Testimonial components are customer reviews of your product or services and help you look more valuable to those exploring it for the first time. They are most often used for social proofing. This type of message is more credible than marketing slogans.
Use the extended version including title, avatars, names, descriptions and rating.
Testimonials
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, error amet numquam iure provident voluptate esse quasi, veritatis totam voluptas nostrum quisquam eum porro a pariatur veniam.
.jpg)
Maria Smantha
Web Developer
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod eos id officiis hic tenetur quae quaerat ad velit ab hic tenetur.
.jpg)
Lisa Cudrow
Graphic Designer
Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid commodi.
.jpg)
John Smith
Marketing Specialist
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti.
<div class="mx-auto text-center md:max-w-xl lg:max-w-3xl">
<h3
class="mb-6 text-3xl font-bold text-neutral-800 dark:text-neutral-200">
Testimonials
</h3>
<p class="mb-6 pb-2 md:mb-12 md:pb-0">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, error
amet numquam iure provident voluptate esse quasi, veritatis totam
voluptas nostrum quisquam eum porro a pariatur veniam.
</p>
</div>
<!-- Container for the Testimonials -->
<div class="grid gap-6 text-center md:grid-cols-3 lg:gap-12">
<!-- First Testimonial -->
<div class="mb-12 md:mb-0">
<div class="mb-6 flex justify-center">
<img
src="https://tecdn.b-cdn.net/img/Photos/Avatars/img%20(1).jpg"
class="w-32 rounded-full shadow-lg dark:shadow-black/30" />
</div>
<h5 class="mb-4 text-xl font-semibold">Maria Smantha</h5>
<h6 class="mb-4 font-semibold text-primary dark:text-primary-500">
Web Developer
</h6>
<p class="mb-4">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="currentColor"
class="inline-block h-7 w-7 pr-2"
viewBox="0 0 24 24">
<path
d="M13 14.725c0-5.141 3.892-10.519 10-11.725l.984 2.126c-2.215.835-4.163 3.742-4.38 5.746 2.491.392 4.396 2.547 4.396 5.149 0 3.182-2.584 4.979-5.199 4.979-3.015 0-5.801-2.305-5.801-6.275zm-13 0c0-5.141 3.892-10.519 10-11.725l.984 2.126c-2.215.835-4.163 3.742-4.38 5.746 2.491.392 4.396 2.547 4.396 5.149 0 3.182-2.584 4.979-5.199 4.979-3.015 0-5.801-2.305-5.801-6.275z" />
</svg>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod eos
id officiis hic tenetur quae quaerat ad velit ab hic tenetur.
</p>
</div>
<!-- Second Testimonial -->
<div class="mb-12 md:mb-0">
<div class="mb-6 flex justify-center">
<img
src="https://tecdn.b-cdn.net/img/Photos/Avatars/img%20(2).jpg"
class="w-32 rounded-full shadow-lg dark:shadow-black/30" />
</div>
<h5 class="mb-4 text-xl font-semibold">Lisa Cudrow</h5>
<h6 class="mb-4 font-semibold text-primary dark:text-primary-500">
Graphic Designer
</h6>
<p class="mb-4">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="currentColor"
class="inline-block h-7 w-7 pr-2"
viewBox="0 0 24 24">
<path
d="M13 14.725c0-5.141 3.892-10.519 10-11.725l.984 2.126c-2.215.835-4.163 3.742-4.38 5.746 2.491.392 4.396 2.547 4.396 5.149 0 3.182-2.584 4.979-5.199 4.979-3.015 0-5.801-2.305-5.801-6.275zm-13 0c0-5.141 3.892-10.519 10-11.725l.984 2.126c-2.215.835-4.163 3.742-4.38 5.746 2.491.392 4.396 2.547 4.396 5.149 0 3.182-2.584 4.979-5.199 4.979-3.015 0-5.801-2.305-5.801-6.275z" />
</svg>
Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis
suscipit laboriosam, nisi ut aliquid commodi.
</p>
<ul class="mb-0 flex items-center justify-center">
<li>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
class="h-5 w-5 text-yellow-500">
<path
fill-rule="evenodd"
d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.007 5.404.433c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.433 2.082-5.006z"
clip-rule="evenodd" />
</svg>
</li>
<li>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
class="h-5 w-5 text-yellow-500">
<path
fill-rule="evenodd"
d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.007 5.404.433c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.433 2.082-5.006z"
clip-rule="evenodd" />
</svg>
</li>
<li>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
class="h-5 w-5 text-yellow-500">
<path
fill-rule="evenodd"
d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.007 5.404.433c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.433 2.082-5.006z"
clip-rule="evenodd" />
</svg>
</li>
<li>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
class="h-5 w-5 text-yellow-500">
<path
fill-rule="evenodd"
d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.007 5.404.433c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.433 2.082-5.006z"
clip-rule="evenodd" />
</svg>
</li>
<li>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
class="h-5 w-5 text-yellow-500">
<path
d="M13 14.725c0-5.141 3.892-10.519 10-11.725l.984 2.126c-2.215.835-4.163 3.742-4.38 5.746 2.491.392 4.396 2.547 4.396 5.149 0 3.182-2.584 4.979-5.199 4.979-3.015 0-5.801-2.305-5.801-6.275zm-13 0c0-5.141 3.892-10.519 10-11.725l.984 2.126c-2.215.835-4.163 3.742-4.38 5.746 2.491.392 4.396 2.547 4.396 5.149 0 3.182-2.584 4.979-5.199 4.979-3.015 0-5.801-2.305-5.801-6.275z" />
</svg>
</li>
</ul>
</div>
<!-- Third Testimonial -->
<div class="mb-0">
<div class="mb-6 flex justify-center">
<img
src="https://tecdn.b-cdn.net/img/Photos/Avatars/img%20(9).jpg"
class="w-32 rounded-full shadow-lg dark:shadow-black/30" />
</div>
<div class="mb-12 md:mb-0">
<div class="mb-6 flex justify-center">
<img
src="https://tecdn.b-cdn.net/img/Photos/Avatars/img%20(2).jpg"
class="w-32 rounded-full shadow-lg dark:shadow-black/30" />
</div>
<h5 class="mb-4 text-xl font-semibold">Lisa Cudrow</h5>
<h6 class="mb-4 font-semibold text-primary dark:text-primary-400">
Graphic Designer
</h6>
<p class="mb-4 text-neutral-600 dark:text-neutral-300">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="currentColor"
class="inline-block h-7 w-7 pr-2"
viewBox="0 0 24 24">
<path
d="M13 14.725c0-5.141 3.892-10.519 10-11.725l.984 2.126c-2.215.835-4.163 3.742-4.38 5.746 2.491.392 4.396 2.547 4.396 5.149 0 3.182-2.584 4.979-5.199 4.979-3.015 0-5.801-2.305-5.801-6.275zm-13 0c0-5.141 3.892-10.519 10-11.725l.984 2.126c-2.215.835-4.163 3.742-4.38 5.746 2.491.392 4.396 2.547 4.396 5.149 0 3.182-2.584 4.979-5.199 4.979-3.015 0-5.801-2.305-5.801-6.275z" />
</svg>
Ut enim ad minima veniam, quis nostrum exercitationem ullam
corporis suscipit laboriosam, nisi ut aliquid commodi.
</p>
<ul class="mb-0 flex items-center justify-center">
<li>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
class="h-5 w-5 text-yellow-500">
<path
fill-rule="evenodd"
d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.007 5.404.433c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.433 2.082-5.006z"
clip-rule="evenodd" />
</svg>
</li>
<li>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
class="h-5 w-5 text-yellow-500">
<path
fill-rule="evenodd"
d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.007 5.404.433c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.433 2.082-5.006z"
clip-rule="evenodd" />
</svg>
</li>
<li>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
class="h-5 w-5 text-yellow-500">
<path
fill-rule="evenodd"
d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.007 5.404.433c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.433 2.082-5.006z"
clip-rule="evenodd" />
</svg>
</li>
<li>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
class="h-5 w-5 text-yellow-500">
<path
fill-rule="evenodd"
d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.007 5.404.433c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.433 2.082-5.006z"
clip-rule="evenodd" />
</svg>
</li>
<li>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
class="h-5 w-5 text-yellow-500">
<path
fill-rule="evenodd"
d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.007 5.404.433c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.433 2.082-5.006z"
clip-rule="evenodd" />
</svg>
</li>
</ul>
</div>
<!-- Fourth Testimonial -->
<div class="mb-0">
<div class="mb-6 flex justify-center">
<img
src="https://tecdn.b-cdn.net/img/Photos/Avatars/img%20(9).jpg"
class="w-32 rounded-full shadow-lg dark:shadow-black/30" />
</div>
<h5 class="mb-4 text-xl font-semibold">John Smith</h5>
<h6 class="mb-4 font-semibold text-primary dark:text-primary-400">
Marketing Specialist
</h6>
<p class="mb-4 text-neutral-600 dark:text-neutral-300">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="currentColor"
class="inline-block h-7 w-7 pr-2"
viewBox="0 0 24 24">
<path
d="M13 14.725c0-5.141 3.892-10.519 10-11.725l.984 2.126c-2.215.835-4.163 3.742-4.38 5.746 2.491.392 4.396 2.547 4.396 5.149 0 3.182-2.584 4.979-5.199 4.979-3.015 0-5.801-2.305-5.801-6.275zm-13 0c0-5.141 3.892-10.519 10-11.725l.984 2.126c-2.215.835-4.163 3.742-4.38 5.746 2.491.392 4.396 2.547 4.396 5.149 0 3.182-2.584 4.979-5.199 4.979-3.015 0-5.801-2.305-5.801-6.275z" />
</svg>
At vero eos et accusamus et iusto odio dignissimos ducimus qui
blanditiis praesentium voluptatum deleniti atque corrupti.
</p>
<ul class="mb-0 flex items-center justify-center">
<li>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
class="h-5 w-5 text-yellow-500">
<path
fill-rule="evenodd"
d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.007 5.404.433c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.433 2.082-5.006z"
clip-rule="evenodd" />
</svg>
</li>
<li>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
class="h-5 w-5 text-yellow-500">
<path
fill-rule="evenodd"
d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.007 5.404.433c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.433 2.082-5.006z"
clip-rule="evenodd" />
</svg>
</li>
<li>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
class="h-5 w-5 text-yellow-500">
<path
fill-rule="evenodd"
d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.007 5.404.433c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.433 2.082-5.006z"
clip-rule="evenodd" />
</svg>
</li>
<li>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
class="h-5 w-5 text-yellow-500">
<path
fill-rule="evenodd"
d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.007 5.404.433c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.433 2.082-5.006z"
clip-rule="evenodd" />
</svg>
</li>
<li>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
class="h-5 w-5 text-yellow-500"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="h-6 w-6">
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M11.48 3.499a.562.562 0 011.04 0l2.125 5.111a.563.563 0 00.475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 00-.182.557l1.285 5.385a.562.562 0 01-.84.61l-4.725-2.885a.563.563 0 00-.586 0L6.982 20.54a.562.562 0 01-.84-.61l1.285-5.386a.562.562 0 00-.182-.557l-4.204-3.602a.563.563 0 01.321-.988l5.518-.442a.563.563 0 00.475-.345L11.48 3.5z" />
</svg>
</li>
</ul>
</div>
</div>
</div>
Hey there 👋 we want to make TW elements a community-driven project. It's open source and free, and we would like it to stay that way. If you enjoy it, help the project grow by sharing it with your peers. Every share counts, thank you!
Testimonials with background image
Well-chosen background image can draw attention to testimonials. Use the code below to present your customers testimonials in the best way possible.
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Id quam sapiente molestiae numquam quas, voluptates omnis nulla ea odio quia similique corrupti magnam.
Anna Smith
Product manager
<!--Background-->
<section
class="rounded-md p-6 text-center shadow-lg md:p-12 md:text-left"
style="background-image: url(https://tecdn.b-cdn.net/img/Photos/Others/background2.jpg)">
<div class="flex justify-center">
<div class="max-w-3xl">
<div
class="m-4 block rounded-lg bg-white p-6 shadow-lg dark:bg-neutral-800 dark:shadow-black/20">
<!--Testimonial-->
<div class="md:flex md:flex-row">
<div
class="mx-auto mb-6 flex w-36 items-center justify-center md:mx-0 md:w-96 lg:mb-0">
<img
src="https://tecdn.b-cdn.net/img/Photos/Avatars/img%20%2810%29.jpg"
class="rounded-full shadow-md dark:shadow-black/30"
alt="woman avatar" />
</div>
<div class="md:ml-6">
<p
class="mb-6 font-light text-neutral-500 dark:text-neutral-300">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Id
quam sapiente molestiae numquam quas, voluptates omnis nulla
ea odio quia similique corrupti magnam.
</p>
<p
class="mb-2 text-xl font-semibold text-neutral-800 dark:text-neutral-200">
Anna Smith
</p>
<p
class="mb-0 font-semibold text-neutral-500 dark:text-neutral-400">
Product manager
</p>
</div>
</div>
</div>
</div>
</div>
</section>
Small testimonials carousel
The testimonials carousel uses the carousel functionality to make it cycle through different comments.
This compact version of testimonial includes a short paragraph with a quote, avatar and next/previous buttons navigation.
"Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, error amet numquam iure provident voluptate esse quasi, voluptas nostrum quisquam!"
.webp)
- Anna Morian
"Neque cupiditate assumenda in maiores repudiandae mollitia adipisci maiores repudiandae mollitia consectetur adipisicing architecto elit sed adipiscing elit."
.webp)
- Teresa May
"Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur est laborum neque cupiditate assumenda in maiores."
.webp)
- Kate Allise
<!--Carousel-->
<div
id="carouselExampleCaptions"
class="relative"
data-te-carousel-init
data-te-carousel-slide>
<div
class="relative w-full overflow-hidden after:clear-both after:block after:content-['']">
<!--First Testimonial / Carousel item-->
<div
class="relative float-left -mr-[100%] hidden w-full text-center transition-transform duration-[600ms] ease-in-out motion-reduce:transition-none"
data-te-carousel-active
data-te-carousel-item
style="backface-visibility: hidden">
<p
class="mx-auto max-w-4xl text-xl italic text-neutral-700 dark:text-neutral-300">
"Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit,
error amet numquam iure provident voluptate esse quasi, voluptas
nostrum quisquam!"
</p>
<div class="mb-6 mt-12 flex justify-center">
<img
src="https://tecdn.b-cdn.net/img/Photos/Avatars/img%20(2).webp"
class="h-24 w-24 rounded-full shadow-lg dark:shadow-black/30"
alt="smaple image" />
</div>
<p class="text-neutral-500 dark:text-neutral-300">- Anna Morian</p>
</div>
<!--Second Testimonial / Carousel item-->
<div
class="relative float-left -mr-[100%] hidden w-full text-center transition-transform duration-[600ms] ease-in-out motion-reduce:transition-none"
data-te-carousel-item
style="backface-visibility: hidden">
<p
class="mx-auto max-w-4xl text-xl italic text-neutral-700 dark:text-neutral-300">
"Neque cupiditate assumenda in maiores repudiandae mollitia
adipisci maiores repudiandae mollitia consectetur adipisicing
architecto elit sed adipiscing elit."
</p>
<div class="mb-6 mt-12 flex justify-center">
<img
src="https://tecdn.b-cdn.net/img/Photos/Avatars/img%20(31).webp"
class="h-24 w-24 rounded-full shadow-lg dark:shadow-black/30"
alt="smaple image" />
</div>
<p class="text-neutral-500 dark:text-neutral-300">- Teresa May</p>
</div>
<!--Third Testimonial / Carousel item-->
<div
class="relative float-left -mr-[100%] hidden w-full text-center transition-transform duration-[600ms] ease-in-out motion-reduce:transition-none"
data-te-carousel-item
style="backface-visibility: hidden">
<p
class="mx-auto max-w-4xl text-xl italic text-neutral-700 dark:text-neutral-300">
"Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur est laborum neque
cupiditate assumenda in maiores."
</p>
<div class="mb-6 mt-12 flex justify-center">
<img
src="https://tecdn.b-cdn.net/img/Photos/Avatars/img%20(10).webp"
class="h-24 w-24 rounded-full shadow-lg dark:shadow-black/30"
alt="smaple image" />
</div>
<p class="text-neutral-500 dark:text-neutral-300">- Kate Allise</p>
</div>
</div>
<!--Carousel Controls - prev item-->
<button
class="absolute bottom-0 left-0 top-0 z-[1] flex w-[15%] items-center justify-center border-0 bg-none p-0 text-center text-black opacity-50 transition-opacity duration-150 ease-[cubic-bezier(0.25,0.1,0.25,1.0)] hover:text-black hover:no-underline hover:opacity-90 hover:outline-none focus:text-black focus:no-underline focus:opacity-90 focus:outline-none motion-reduce:transition-none dark:text-white dark:opacity-50 dark:hover:text-white dark:focus:text-white"
type="button"
data-te-target="#carouselExampleCaptions"
data-te-slide="prev">
<span class="inline-block h-8 w-8">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="h-6 w-6">
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M15.75 19.5L8.25 12l7.5-7.5" />
</svg>
</span>
<span
class="!absolute !-m-px !h-px !w-px !overflow-hidden !whitespace-nowrap !border-0 !p-0 ![clip:rect(0,0,0,0)]"
>Previous</span
>
</button>
<!--Carousel Controls - next item-->
<button
class="absolute bottom-0 right-0 top-0 z-[1] flex w-[15%] items-center justify-center border-0 bg-none p-0 text-center text-black opacity-50 transition-opacity duration-150 ease-[cubic-bezier(0.25,0.1,0.25,1.0)] hover:text-black hover:no-underline hover:opacity-90 hover:outline-none focus:text-black focus:no-underline focus:opacity-90 focus:outline-none motion-reduce:transition-none dark:text-white dark:opacity-50 dark:hover:text-white dark:focus:text-white"
type="button"
data-te-target="#carouselExampleCaptions"
data-te-slide="next">
<span class="inline-block h-8 w-8">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="h-6 w-6">
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M8.25 4.5l7.5 7.5-7.5 7.5" />
</svg>
</span>
<span
class="!absolute !-m-px !h-px !w-px !overflow-hidden !whitespace-nowrap !border-0 !p-0 ![clip:rect(0,0,0,0)]"
>Next</span
>
</button>
</div>
// Initialization for ES Users
import {
Carousel,
initTE,
} from "tw-elements";
initTE({ Carousel });
Testimonials with colorful cards
The testimonials with colorful cards uses the cards component to give them a more organized look.
Present what people say about your project, using testimonials with colorful cards.
Testimonials
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, error amet numquam iure provident voluptate esse quasi, veritatis totam voluptas nostrum quisquam eum porro a pariatur veniam.
.webp)
Maria Smantha
Lorem ipsum dolor sit amet eos adipisci, consectetur adipisicing elit.
Lisa Cudrow
Neque cupiditate assumenda in maiores repudi mollitia architecto.
.webp)
John Smith
Delectus impedit saepe officiis ab aliquam repellat rem unde ducimus.
<section class="text-neutral-700 dark:text-neutral-300">
<div class="mx-auto text-center md:max-w-xl lg:max-w-3xl">
<h3 class="mb-6 text-3xl font-bold">Testimonials</h3>
<p class="mb-6 pb-2 md:mb-12 md:pb-0">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit,
error amet numquam iure provident voluptate esse quasi, veritatis
totam voluptas nostrum quisquam eum porro a pariatur veniam.
</p>
</div>
<!--First Testimonial-->
<div class="grid gap-6 text-center md:grid-cols-3">
<div>
<div
class="block rounded-lg bg-white shadow-lg dark:bg-neutral-700 dark:shadow-black/30">
<div class="h-28 overflow-hidden rounded-t-lg bg-[#9d789b]"></div>
<div
class="mx-auto -mt-12 w-24 overflow-hidden rounded-full border-2 border-white bg-white dark:border-neutral-800 dark:bg-neutral-800">
<img
src="https://tecdn.b-cdn.net/img/Photos/Avatars/img%20(1).webp" />
</div>
<div class="p-6">
<h4 class="mb-4 text-2xl font-semibold">Maria Smantha</h4>
<hr />
<p class="mt-4">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="currentColor"
class="inline-block h-7 w-7 pr-2"
viewBox="0 0 24 24">
<path
d="M13 14.725c0-5.141 3.892-10.519 10-11.725l.984 2.126c-2.215.835-4.163 3.742-4.38 5.746 2.491.392 4.396 2.547 4.396 5.149 0 3.182-2.584 4.979-5.199 4.979-3.015 0-5.801-2.305-5.801-6.275zm-13 0c0-5.141 3.892-10.519 10-11.725l.984 2.126c-2.215.835-4.163 3.742-4.38 5.746 2.491.392 4.396 2.547 4.396 5.149 0 3.182-2.584 4.979-5.199 4.979-3.015 0-5.801-2.305-5.801-6.275z" />
</svg>
Lorem ipsum dolor sit amet eos adipisci, consectetur
adipisicing elit.
</p>
</div>
</div>
</div>
<!--Second Testimonial-->
<div>
<div
class="block rounded-lg bg-white shadow-lg dark:bg-neutral-700 dark:shadow-black/30">
<div class="h-28 overflow-hidden rounded-t-lg bg-[#7a81a8]"></div>
<div
class="mx-auto -mt-12 w-24 overflow-hidden rounded-full border-2 border-white bg-white dark:border-neutral-800 dark:bg-neutral-800">
<img
src="https://tecdn.b-cdn.net/img/Photos/Avatars/img%20(2).webp" />
</div>
<div class="p-6">
<h4 class="mb-4 text-2xl font-semibold">Lisa Cudrow</h4>
<hr />
<p class="mt-4">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="currentColor"
class="inline-block h-7 w-7 pr-2"
viewBox="0 0 24 24">
<path
d="M13 14.725c0-5.141 3.892-10.519 10-11.725l.984 2.126c-2.215.835-4.163 3.742-4.38 5.746 2.491.392 4.396 2.547 4.396 5.149 0 3.182-2.584 4.979-5.199 4.979-3.015 0-5.801-2.305-5.801-6.275zm-13 0c0-5.141 3.892-10.519 10-11.725l.984 2.126c-2.215.835-4.163 3.742-4.38 5.746 2.491.392 4.396 2.547 4.396 5.149 0 3.182-2.584 4.979-5.199 4.979-3.015 0-5.801-2.305-5.801-6.275z" />
</svg>
Neque cupiditate assumenda in maiores repudi mollitia
architecto.
</p>
</div>
</div>
</div>
<!--Third Testimonial-->
<div>
<div
class="block rounded-lg bg-white shadow-lg dark:bg-neutral-700 dark:shadow-black/30">
<div class="h-28 overflow-hidden rounded-t-lg bg-[#6d5b98]"></div>
<div
class="mx-auto -mt-12 w-24 overflow-hidden rounded-full border-2 border-white bg-white dark:border-neutral-800 dark:bg-neutral-800">
<img
src="https://tecdn.b-cdn.net/img/Photos/Avatars/img%20(9).webp" />
</div>
<div class="p-6">
<h4 class="mb-4 text-2xl font-semibold">John Smith</h4>
<hr />
<p class="mt-4">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="currentColor"
class="inline-block h-7 w-7 pr-2"
viewBox="0 0 24 24">
<path
d="M13 14.725c0-5.141 3.892-10.519 10-11.725l.984 2.126c-2.215.835-4.163 3.742-4.38 5.746 2.491.392 4.396 2.547 4.396 5.149 0 3.182-2.584 4.979-5.199 4.979-3.015 0-5.801-2.305-5.801-6.275zm-13 0c0-5.141 3.892-10.519 10-11.725l.984 2.126c-2.215.835-4.163 3.742-4.38 5.746 2.491.392 4.396 2.547 4.396 5.149 0 3.182-2.584 4.979-5.199 4.979-3.015 0-5.801-2.305-5.801-6.275z" />
</svg>
Delectus impedit saepe officiis ab aliquam repellat rem unde
ducimus.
</p>
</div>
</div>
</div>
</div>
</section>
Two columns testimonials
Create a 2-column testimonials layout grid using code provided below:
Testimonials
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, error amet numquam iure provident voluptate esse quasi, veritatis totam voluptas nostrum quisquam eum porro a pariatur veniam.
.jpg)
"Lorem ipsum dolor sit amet eos adipisci, consectetur adipisicing elit sed ut perspiciatis unde omnis."
- Anna Morian
.jpg)
"Neque cupiditate assumenda in maiores repudiandae mollitia architecto elit sed adipiscing elit."
- Teresa May
<section class="px-4">
<div class="mx-auto max-w-3xl text-center">
<h3 class="mb-6 text-3xl font-bold">Testimonials</h3>
<p class="mb-6 pb-2 text-neutral-500 dark:text-neutral-300 md:mb-12">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit,
error amet numquam iure provident voluptate esse quasi, veritatis
totam voluptas nostrum quisquam eum porro a pariatur veniam.
</p>
</div>
<div class="grid gap-12 text-center md:grid-cols-2">
<!--First Testimonial-->
<div class="mb-6 md:mb-0">
<div class="mb-6 flex justify-center">
<img
src="https://tecdn.b-cdn.net/img/Photos/Avatars/img%20(22).jpg"
class="w-24 rounded-full shadow-lg dark:shadow-black/30" />
</div>
<p class="my-4 text-xl text-neutral-500 dark:text-neutral-300">
"Lorem ipsum dolor sit amet eos adipisci, consectetur adipisicing
elit sed ut perspiciatis unde omnis."
</p>
<p class="italic">- Anna Morian</p>
</div>
<!--Second Testimonial-->
<div class="mb-0">
<div class="mb-6 flex justify-center">
<img
src="https://tecdn.b-cdn.net/img/Photos/Avatars/img%20(19).jpg"
class="w-24 rounded-full shadow-lg dark:shadow-black/30" />
</div>
<p class="my-4 text-xl text-neutral-500 dark:text-neutral-300">
"Neque cupiditate assumenda in maiores repudiandae mollitia
architecto elit sed adipiscing elit."
</p>
<p class="italic">- Teresa May</p>
</div>
</div>
</section>
Related resources
Tutorials:
grid system
responsiveness
containers
icons
dark mode
flexbox
text
spacing
carousel
rounded corners
shadows
cards
advanced grid
sizing
forms
Extended Docs:
colors
dividers
headings
icons
images
typography
avatar
cards
carousel
list group
paragraphs
rating
borders
breakpoints
center grid items
center text
columns
dark theme
flexbox
position
spacing
text bold
text color
text decoration
text size
Design System (Figma):
introduction
content should be the star
less is more
power of visual hierarchy
de emphasize with no mercy
size matters
lowering contrast
low contrast vs low aesthetics
beyond borders
let it breathe
user experience
do not start with the roof
project personality
design system
plan the process
principles
tips and tricks