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.
<section class="mb-20 text-gray-700">
<div class="text-center md:max-w-xl lg:max-w-3xl mx-auto">
<h3 class="text-3xl font-bold mb-6 text-gray-800">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>
<div class="grid md:grid-cols-3 gap-6 lg:gap-12 text-center">
<div class="mb-12 md:mb-0">
<div class="flex justify-center mb-6">
<img
src="https://mdbootstrap.com/img/Photos/Avatars/img%20(1).jpg"
class="rounded-full shadow-lg w-32"
/>
</div>
<h5 class="text-xl font-semibold mb-4">Maria Smantha</h5>
<h6 class="font-semibold text-blue-600 mb-4">Web Developer</h6>
<p class="mb-4">
<svg
aria-hidden="true"
focusable="false"
data-prefix="fas"
data-icon="quote-left"
class="w-6 pr-2 inline-block"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
>
<path
fill="currentColor"
d="M464 256h-80v-64c0-35.3 28.7-64 64-64h8c13.3 0 24-10.7 24-24V56c0-13.3-10.7-24-24-24h-8c-88.4 0-160 71.6-160 160v240c0 26.5 21.5 48 48 48h128c26.5 0 48-21.5 48-48V304c0-26.5-21.5-48-48-48zm-288 0H96v-64c0-35.3 28.7-64 64-64h8c13.3 0 24-10.7 24-24V56c0-13.3-10.7-24-24-24h-8C71.6 32 0 103.6 0 192v240c0 26.5 21.5 48 48 48h128c26.5 0 48-21.5 48-48V304c0-26.5-21.5-48-48-48z"
></path>
</svg>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod eos id officiis hic
tenetur quae quaerat ad velit ab hic tenetur.
</p>
<ul class="flex justify-center mb-0">
<li>
<svg
aria-hidden="true"
focusable="false"
data-prefix="fas"
data-icon="star"
class="w-4 text-yellow-500"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 576 512"
>
<path
fill="currentColor"
d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"
></path>
</svg>
</li>
<li>
<svg
aria-hidden="true"
focusable="false"
data-prefix="fas"
data-icon="star"
class="w-4 text-yellow-500"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 576 512"
>
<path
fill="currentColor"
d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"
></path>
</svg>
</li>
<li>
<svg
aria-hidden="true"
focusable="false"
data-prefix="fas"
data-icon="star"
class="w-4 text-yellow-500"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 576 512"
>
<path
fill="currentColor"
d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"
></path>
</svg>
</li>
<li>
<svg
aria-hidden="true"
focusable="false"
data-prefix="fas"
data-icon="star"
class="w-4 text-yellow-500"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 576 512"
>
<path
fill="currentColor"
d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"
></path>
</svg>
</li>
<li>
<svg
aria-hidden="true"
focusable="false"
data-prefix="fas"
data-icon="star-half-alt"
class="w-4 text-yellow-500"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 536 512"
>
<path
fill="currentColor"
d="M508.55 171.51L362.18 150.2 296.77 17.81C290.89 5.98 279.42 0 267.95 0c-11.4 0-22.79 5.9-28.69 17.81l-65.43 132.38-146.38 21.29c-26.25 3.8-36.77 36.09-17.74 54.59l105.89 103-25.06 145.48C86.98 495.33 103.57 512 122.15 512c4.93 0 10-1.17 14.87-3.75l130.95-68.68 130.94 68.7c4.86 2.55 9.92 3.71 14.83 3.71 18.6 0 35.22-16.61 31.66-37.4l-25.03-145.49 105.91-102.98c19.04-18.5 8.52-50.8-17.73-54.6zm-121.74 123.2l-18.12 17.62 4.28 24.88 19.52 113.45-102.13-53.59-22.38-11.74.03-317.19 51.03 103.29 11.18 22.63 25.01 3.64 114.23 16.63-82.65 80.38z"
></path>
</svg>
</li>
</ul>
</div>
<div class="mb-12 md:mb-0">
<div class="flex justify-center mb-6">
<img
src="https://mdbootstrap.com/img/Photos/Avatars/img%20(2).jpg"
class="rounded-full shadow-lg w-32"
/>
</div>
<h5 class="text-xl font-semibold mb-4">Lisa Cudrow</h5>
<h6 class="font-semibold text-blue-600 mb-4">Graphic Designer</h6>
<p class="mb-4">
<svg
aria-hidden="true"
focusable="false"
data-prefix="fas"
data-icon="quote-left"
class="w-6 pr-2 inline-block"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
>
<path
fill="currentColor"
d="M464 256h-80v-64c0-35.3 28.7-64 64-64h8c13.3 0 24-10.7 24-24V56c0-13.3-10.7-24-24-24h-8c-88.4 0-160 71.6-160 160v240c0 26.5 21.5 48 48 48h128c26.5 0 48-21.5 48-48V304c0-26.5-21.5-48-48-48zm-288 0H96v-64c0-35.3 28.7-64 64-64h8c13.3 0 24-10.7 24-24V56c0-13.3-10.7-24-24-24h-8C71.6 32 0 103.6 0 192v240c0 26.5 21.5 48 48 48h128c26.5 0 48-21.5 48-48V304c0-26.5-21.5-48-48-48z"
></path></svg>Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit
laboriosam, nisi ut aliquid commodi.
</p>
<ul class="flex justify-center mb-0">
<li>
<svg
aria-hidden="true"
focusable="false"
data-prefix="fas"
data-icon="star"
class="w-4 text-yellow-500"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 576 512"
>
<path
fill="currentColor"
d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"
></path>
</svg>
</li>
<li>
<svg
aria-hidden="true"
focusable="false"
data-prefix="fas"
data-icon="star"
class="w-4 text-yellow-500"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 576 512"
>
<path
fill="currentColor"
d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"
></path>
</svg>
</li>
<li>
<svg
aria-hidden="true"
focusable="false"
data-prefix="fas"
data-icon="star"
class="w-4 text-yellow-500"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 576 512"
>
<path
fill="currentColor"
d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"
></path>
</svg>
</li>
<li>
<svg
aria-hidden="true"
focusable="false"
data-prefix="fas"
data-icon="star"
class="w-4 text-yellow-500"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 576 512"
>
<path
fill="currentColor"
d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"
></path>
</svg>
</li>
<li>
<svg
aria-hidden="true"
focusable="false"
data-prefix="fas"
data-icon="star"
class="w-4 text-yellow-500"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 576 512"
>
<path
fill="currentColor"
d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"
></path>
</svg>
</li>
</ul>
</div>
<div class="mb-0">
<div class="flex justify-center mb-6">
<img
src="https://mdbootstrap.com/img/Photos/Avatars/img%20(9).jpg"
class="rounded-full shadow-lg w-32"
/>
</div>
<h5 class="text-xl font-semibold mb-4">John Smith</h5>
<h6 class="font-semibold text-blue-600 mb-4">Marketing Specialist</h6>
<p class="mb-4">
<svg
aria-hidden="true"
focusable="false"
data-prefix="fas"
data-icon="quote-left"
class="w-6 pr-2 inline-block"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
>
<path
fill="currentColor"
d="M464 256h-80v-64c0-35.3 28.7-64 64-64h8c13.3 0 24-10.7 24-24V56c0-13.3-10.7-24-24-24h-8c-88.4 0-160 71.6-160 160v240c0 26.5 21.5 48 48 48h128c26.5 0 48-21.5 48-48V304c0-26.5-21.5-48-48-48zm-288 0H96v-64c0-35.3 28.7-64 64-64h8c13.3 0 24-10.7 24-24V56c0-13.3-10.7-24-24-24h-8C71.6 32 0 103.6 0 192v240c0 26.5 21.5 48 48 48h128c26.5 0 48-21.5 48-48V304c0-26.5-21.5-48-48-48z"
></path></svg>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis
praesentium voluptatum deleniti atque corrupti.
</p>
<ul class="flex justify-center mb-0">
<li>
<svg
aria-hidden="true"
focusable="false"
data-prefix="fas"
data-icon="star"
class="w-4 text-yellow-500"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 576 512"
>
<path
fill="currentColor"
d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"
></path>
</svg>
</li>
<li>
<svg
aria-hidden="true"
focusable="false"
data-prefix="fas"
data-icon="star"
class="w-4 text-yellow-500"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 576 512"
>
<path
fill="currentColor"
d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"
></path>
</svg>
</li>
<li>
<svg
aria-hidden="true"
focusable="false"
data-prefix="fas"
data-icon="star"
class="w-4 text-yellow-500"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 576 512"
>
<path
fill="currentColor"
d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"
></path>
</svg>
</li>
<li>
<svg
aria-hidden="true"
focusable="false"
data-prefix="fas"
data-icon="star"
class="w-4 text-yellow-500"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 576 512"
>
<path
fill="currentColor"
d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"
></path>
</svg>
</li>
<li>
<svg
aria-hidden="true"
focusable="false"
data-prefix="far"
data-icon="star"
class="w-4 text-yellow-500"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 576 512"
>
<path
fill="currentColor"
d="M528.1 171.5L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6zM388.6 312.3l23.7 138.4L288 385.4l-124.3 65.3 23.7-138.4-100.6-98 139-20.2 62.2-126 62.2 126 139 20.2-100.6 98z"
></path>
</svg>
</li>
</ul>
</div>
</div>
</section>
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.
Testimonials with background image
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
<section class="p-6 md:p-12 text-center md:text-left shadow-lg rounded-md" style="background-image: url(https://mdbcdn.b-cdn.net/img/Photos/Others/background2.jpg)">
<div class="flex justify-center">
<div class="max-w-3xl">
<div class="block p-6 rounded-lg shadow-lg bg-white m-4">
<div class="md:flex md:flex-row">
<div
class="md:w-96 w-36 flex justify-center items-center mb-6 lg:mb-0 mx-auto md:mx-0"
>
<img
src="https://mdbootstrap.com/img/Photos/Avatars/img%20%2810%29.jpg"
class="rounded-full shadow-md"
alt="woman avatar"
/>
</div>
<div class="md:ml-6">
<p class="text-gray-500 font-light mb-6">
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="font-semibold text-xl mb-2 text-gray-800">Anna Smith</p>
<p class="font-semibold text-gray-500 mb-0">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
<div id="carouselExampleCaptions" class="carousel slide relative carousel-dark" data-bs-ride="carousel">
<div class="carousel-inner relative w-full overflow-hidden">
<div class="carousel-item active relative float-left w-full text-center">
<p class="text-xl italic mx-auto text-gray-700 max-w-4xl">
"Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, error amet
numquam iure provident voluptate esse quasi, voluptas nostrum quisquam!"
</p>
<div class="mt-12 mb-6 flex justify-center">
<img
src="https://mdbcdn.b-cdn.net/img/Photos/Avatars/img%20(2).webp"
class="rounded-full w-24 h-24 shadow-lg"
alt="smaple image"
/>
</div>
<p class="text-gray-500">- Anna Morian</p>
</div>
<div class="carousel-item relative float-left w-full text-center">
<p class="text-xl italic mx-auto text-gray-700 max-w-4xl">
"Neque cupiditate assumenda in maiores repudiandae mollitia adipisci maiores
repudiandae mollitia consectetur adipisicing architecto elit sed adipiscing
elit."
</p>
<div class="mt-12 mb-6 flex justify-center">
<img
src="https://mdbcdn.b-cdn.net/img/Photos/Avatars/img%20(31).webp"
class="rounded-full w-24 h-24 shadow-lg"
alt="smaple image"
/>
</div>
<p class="text-gray-500">- Teresa May</p>
</div>
<div class="carousel-item relative float-left w-full text-center">
<p class="text-xl italic mx-auto text-gray-700 max-w-4xl">
"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="mt-12 mb-6 flex justify-center">
<img
src="https://mdbcdn.b-cdn.net/img/Photos/Avatars/img%20(10).webp"
class="rounded-full w-24 h-24 shadow-lg"
alt="smaple image"
/>
</div>
<p class="text-gray-500">- Kate Allise</p>
</div>
</div>
<button
class="carousel-control-prev absolute top-0 bottom-0 flex items-center justify-center p-0 text-center border-0 hover:outline-none hover:no-underline focus:outline-none focus:no-underline left-0"
type="button"
data-bs-target="#carouselExampleCaptions"
data-bs-slide="prev"
>
<span class="carousel-control-prev-icon inline-block bg-no-repeat" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button
class="carousel-control-next absolute top-0 bottom-0 flex items-center justify-center p-0 text-center border-0 hover:outline-none hover:no-underline focus:outline-none focus:no-underline right-0"
type="button"
data-bs-target="#carouselExampleCaptions"
data-bs-slide="next"
>
<span class="carousel-control-next-icon inline-block bg-no-repeat" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
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="mb-20 text-gray-700">
<div class="text-center md:max-w-xl lg:max-w-3xl mx-auto">
<h3 class="text-3xl font-bold mb-6 text-gray-800">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>
<div class="grid md:grid-cols-3 gap-6 text-center">
<div>
<div class="block rounded-lg shadow-lg bg-white">
<div class="overflow-hidden rounded-t-lg h-28" style="background-color: #9d789b;"></div>
<div class="w-24 -mt-12 overflow-hidden border border-2 border-white rounded-full mx-auto bg-white">
<img src="https://mdbcdn.b-cdn.net/img/Photos/Avatars/img%20(1).webp" />
</div>
<div class="p-6">
<h4 class="text-2xl font-semibold mb-4">Maria Smantha</h4>
<hr />
<p class="mt-4">
<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="quote-left" class="w-6 pr-2 inline-block" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path fill="currentColor" d="M464 256h-80v-64c0-35.3 28.7-64 64-64h8c13.3 0 24-10.7 24-24V56c0-13.3-10.7-24-24-24h-8c-88.4 0-160 71.6-160 160v240c0 26.5 21.5 48 48 48h128c26.5 0 48-21.5 48-48V304c0-26.5-21.5-48-48-48zm-288 0H96v-64c0-35.3 28.7-64 64-64h8c13.3 0 24-10.7 24-24V56c0-13.3-10.7-24-24-24h-8C71.6 32 0 103.6 0 192v240c0 26.5 21.5 48 48 48h128c26.5 0 48-21.5 48-48V304c0-26.5-21.5-48-48-48z"></path>
</svg>
Lorem ipsum dolor sit amet eos adipisci, consectetur adipisicing elit.
</p>
</div>
</div>
</div>
<div>
<div class="block rounded-lg shadow-lg bg-white">
<div class="overflow-hidden rounded-t-lg h-28" style="background-color: #7a81a8;"></div>
<div class="w-24 -mt-12 overflow-hidden border border-2 border-white rounded-full mx-auto bg-white">
<img src="https://mdbcdn.b-cdn.net/img/Photos/Avatars/img%20(2).webp" />
</div>
<div class="p-6">
<h4 class="text-2xl font-semibold mb-4">Lisa Cudrow</h4>
<hr />
<p class="mt-4">
<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="quote-left" class="w-6 pr-2 inline-block" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path fill="currentColor" d="M464 256h-80v-64c0-35.3 28.7-64 64-64h8c13.3 0 24-10.7 24-24V56c0-13.3-10.7-24-24-24h-8c-88.4 0-160 71.6-160 160v240c0 26.5 21.5 48 48 48h128c26.5 0 48-21.5 48-48V304c0-26.5-21.5-48-48-48zm-288 0H96v-64c0-35.3 28.7-64 64-64h8c13.3 0 24-10.7 24-24V56c0-13.3-10.7-24-24-24h-8C71.6 32 0 103.6 0 192v240c0 26.5 21.5 48 48 48h128c26.5 0 48-21.5 48-48V304c0-26.5-21.5-48-48-48z"></path>
</svg>
Neque cupiditate assumenda in maiores
repudi mollitia architecto.
</p>
</div>
</div>
</div>
<div>
<div class="block rounded-lg shadow-lg bg-white">
<div class="overflow-hidden rounded-t-lg h-28" style="background-color: #6d5b98;"></div>
<div class="w-24 -mt-12 overflow-hidden border border-2 border-white rounded-full mx-auto bg-white">
<img src="https://mdbcdn.b-cdn.net/img/Photos/Avatars/img%20(9).webp" />
</div>
<div class="p-6">
<h4 class="text-2xl font-semibold mb-4">John Smith</h4>
<hr />
<p class="mt-4">
<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="quote-left" class="w-6 pr-2 inline-block" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path fill="currentColor" d="M464 256h-80v-64c0-35.3 28.7-64 64-64h8c13.3 0 24-10.7 24-24V56c0-13.3-10.7-24-24-24h-8c-88.4 0-160 71.6-160 160v240c0 26.5 21.5 48 48 48h128c26.5 0 48-21.5 48-48V304c0-26.5-21.5-48-48-48zm-288 0H96v-64c0-35.3 28.7-64 64-64h8c13.3 0 24-10.7 24-24V56c0-13.3-10.7-24-24-24h-8C71.6 32 0 103.6 0 192v240c0 26.5 21.5 48 48 48h128c26.5 0 48-21.5 48-48V304c0-26.5-21.5-48-48-48z"></path>
</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="mb-20 text-gray-700 px-4">
<div class="text-center max-w-3xl mx-auto">
<h3 class="text-3xl font-bold mb-6 text-gray-800">Testimonials</h3>
<p class="mb-6 pb-2 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 md:grid-cols-2 gap-12 text-center">
<div class="mb-6 md:mb-0">
<div class="flex justify-center mb-6">
<img
src="https://mdbootstrap.com/img/Photos/Avatars/img%20(22).jpg"
class="rounded-full shadow-lg w-24"
/>
</div>
<p class="text-xl my-4 text-gray-500">
"Lorem ipsum dolor sit amet eos adipisci, consectetur adipisicing elit sed ut
perspiciatis unde omnis."
</p>
<p class="italic">- Anna Morian</p>
</div>
<div class="mb-0">
<div class="flex justify-center mb-6">
<img
src="https://mdbootstrap.com/img/Photos/Avatars/img%20(19).jpg"
class="rounded-full shadow-lg w-24"
/>
</div>
<p class="text-xl my-4 text-gray-500">
"Neque cupiditate assumenda in maiores repudiandae mollitia architecto elit sed
adipiscing elit."
</p>
<p class="italic">- Teresa May</p>
</div>
</div>
</section>
If you are looking for more advanced options, try Bootstrap Testimonials from MDBootstrap.