<section class="relative py-20 2xl:py-40 bg-gray-800 overflow-hidden">
<img class="absolute top-0 right-0 -mr-80 -mt-80" src="zospace-assets/lines/circle.svg" alt="">
<img class="hidden lg:block absolute bottom-0 left-0 w-96" src="zospace-assets/lines/half-double-circle.svg" alt="">
<div class="relative container px-4 mx-auto">
<div class="max-w-5xl mx-auto">
<div class="text-center mb-20 lg:mb-32">
<span class="text-lg text-blue-400 font-bold">Testimonials</span>
<h2 class="mt-12 text-5xl font-bold font-heading text-white">What people say</h2>
</div>
<div class="relative flex flex-wrap -mx-5 mb-20">
<div class="w-full lg:w-1/2 px-5 mb-12 lg:mb-0">
<div class="flex -mx-4 lg:mx-0">
<div class="w-1/3 px-4">
<img class="w-30 h-40 mx-auto rounded-full object-cover" src="https://images.pexels.com/photos/5325840/pexels-photo-5325840.jpeg?q=80&fm=jpg&crop=faces&cs=tinysrgb&fit=crop&h=940&w=940" alt="">
</div>
<div class="w-2/3 px-4">
<div class="relative inline-block mb-8 p-10 bg-gray-500 rounded-lg">
<div class="absolute top-0 left-0 -ml-5 mt-10 w-14 h-14 bg-gray-500" style="clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);"></div>
<img class="absolute top-0 right-0 md:-mr-6 -mt-6 lg:mt-14" src="zospace-assets/images/quote-circle.svg" alt="">
<p class="mb-8 text-lg text-gray-200">The brown me malesuada nisi quis arcu ultrices, a fermentum libero maximus. Donec est urna, semper. At sem quis, congue dictum ipsum quam, sagittis.</p>
<div class="flex mb-4">
<img class="mr-1" src="zospace-assets/images/star-full.svg" alt="">
<img class="mr-1" src="zospace-assets/images/star-full.svg" alt="">
<img class="mr-1" src="zospace-assets/images/star-full.svg" alt="">
<img class="mr-1" src="zospace-assets/images/star-full.svg" alt="">
<img src="zospace-assets/images/star-empty.svg" alt="">
</div>
<h3 class="mb-1 text-2xl text-white font-bold">Léa Herrera</h3>
<p class="text-white">Google</p>
</div>
</div>
</div>
</div>
<div class="w-full lg:w-1/2 px-5">
<div class="flex -mx-4 lg:mx-0">
<div class="w-1/3 px-4">
<img class="w-30 h-40 mx-auto rounded-full object-cover object-top" src="https://images.pexels.com/photos/5325893/pexels-photo-5325893.jpeg?q=80&fm=jpg&crop=faces&cs=tinysrgb&fit=crop&h=940&w=940" alt="">
</div>
<div class="w-2/3 px-4">
<div class="relative inline-block mb-8 p-10 bg-gray-500 rounded-lg">
<div class="absolute top-0 right-0 left-0 -ml-5 mt-10 w-14 h-14 bg-gray-500" style="clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);"></div>
<img class="absolute top-0 right-0 md:-mr-6 -mt-6 lg:mt-14" src="zospace-assets/images/quote-circle.svg" alt="">
<p class="mb-8 text-lg text-gray-200">The brown me malesuada nisi quis arcu ultrices, a fermentum libero maximus. Donec est urna, semper. At sem quis, congue dictum ipsum quam, sagittis.</p>
<div class="flex mb-4">
<img class="mr-1" src="zospace-assets/images/star-full.svg" alt="">
<img class="mr-1" src="zospace-assets/images/star-full.svg" alt="">
<img class="mr-1" src="zospace-assets/images/star-full.svg" alt="">
<img class="mr-1" src="zospace-assets/images/star-full.svg" alt="">
<img src="zospace-assets/images/star-half.svg" alt="">
</div>
<h3 class="mb-1 text-2xl text-white font-bold">Harry Douglas</h3>
<p class="text-white">Asos</p>
</div>
</div>
</div>
</div>
</div>
<div class="text-center">
<button class="inline-flex mr-2 items-center justify-center w-14 h-14 bg-blue-500 hover:bg-blue-600 rounded-full">
<svg width="7" height="14" viewbox="0 0 7 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6.84708 12.115C7.05097 12.3207 7.05097 12.6512 6.84708 12.8554C6.64319 13.0596 6.31377 13.0603 6.10987 12.8554L0.152917 6.87493C-0.0509739 6.67074 -0.0509738 6.34026 0.152917 6.13456L6.10988 0.154119C6.31377 -0.0500693 6.64319 -0.0500693 6.84708 0.154119C7.05097 0.359063 7.05097 0.690301 6.84708 0.894489L1.4143 6.50512L6.84708 12.115Z" fill="white"></path>
</svg>
</button>
<button class="inline-flex items-center justify-center w-14 h-14 bg-blue-500 hover:bg-blue-600 rounded-full">
<svg width="7" height="13" viewbox="0 0 7 13" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0.15292 0.901511C-0.0509709 0.696057 -0.0509709 0.365972 0.15292 0.16203C0.356811 -0.0419136 0.686232 -0.0426689 0.890123 0.16203L6.84708 6.13528C7.05097 6.33923 7.05097 6.66931 6.84708 6.87476L0.890121 12.848C0.686231 13.052 0.35681 13.052 0.152919 12.848C-0.050972 12.6433 -0.0509719 12.3125 0.152919 12.1085L5.5857 6.50465L0.15292 0.901511Z" fill="white"></path>
</svg>
</button>
</div>
</div>
</div>
</section>Framework
All Frameworks
UI Library
All Libraries
Components
- Alert 245
- Application 161
- Applications 5
- Banner 45
- Blog 209
- Call to action 318
- Careers 20
- Contact 130
- Contacts 5
- Content 172
- Cookies 153
- E-commerce (orders) 56
- E-commerce (products) 93
- FAQ 136
- Features 402
- Footers 186
- Graphs 46
- HTTP codes 153
- Headers 276
- How it works 171
- Logo clouds 246
- Modals 15
- Navbar 140
- Navigation (horizontal) 302
- Navigation (vertical) 14
- Navigations 4
- Newsletter 163
- Portfolio 147
- Pricing 160
- Projects 9
- Reviews 20
- Rich text 3
- Sign in / Sign up 236
- Stats 219
- Tables 5
- Tables 132
- Team 147
- Testimonials 179
- Users 59
Component #1
Testimonials Components by Shuffle
Choose from 179 variations of Testimonials UI components. Presented here are variants available in various UI libraries.
Get access to all UI components, code, and our visual editor. Try the demo for free!
Component #2
Component #3
Component #4
Component #5
