<section class="relative py-20 md:pt-32 bg-blue-800 overflow-x-hidden">
<img class="absolute h-24 md:h-auto top-0 left-0 right-0" src="yofte-assets/elements/line-top.svg" alt="">
<div class="relative container px-4 mx-auto">
<h2 class="mb-20 text-5xl text-white font-bold font-heading">What Customers Say</h2>
<div class="relative max-w-4xl mx-auto">
<div class="absolute inset-0 border border-gray-500 my-8 -ml-6 -mr-6"></div>
<div class="relative mx-auto mb-20 py-12 md:py-28 bg-blue-800 border border-white">
<img class="w-32 h-32 mb-10 mx-auto rounded-full" src="yofte-assets/images/placeholder-portrait.png" alt="">
<div class="relative max-w-2xl px-4 mx-auto">
<img class="hidden md:block absolute top-0 left-0" src="yofte-assets/elements/quote.svg" alt="">
<img class="hidden md:block absolute top-0 right-0" src="yofte-assets/elements/quote.svg" alt="">
<div class="max-w-md mx-auto px-4">
<h3 class="mb-16 text-2xl font-bold font-heading text-white">Tonight I had interdum at ante porta, eleifend feugiat nunc. In semper euismod mi a accumsan. Thaaank you! 👏💥</h3>
<div class="flex flex-wrap items-center">
<p class="mb-6 md:mb-0 text-gray-300">Alice Kenowski, NYC</p>
<div class="ml-auto flex items-center justify-end">
<a class="mr-5 flex items-center justify-center w-12 h-12 bg-orange-300 hover:bg-orange-400 rounded-md" href="#">
<svg width="8" height="12" viewbox="0 0 8 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M3.02344 5.99748L7.14844 10.1225L5.97043 11.3008L0.66742 5.99748L5.97043 0.694179L7.14844 1.87248L3.02344 5.99748Z" fill="white"></path>
</svg>
</a>
<a class="flex items-center justify-center w-12 h-12 bg-blue-300 hover:bg-blue-400 rounded-md" href="#">
<svg width="8" height="12" viewbox="0 0 8 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M4.97656 6.00252L0.851562 1.87752L2.02957 0.699219L7.33258 6.00252L2.02957 11.3058L0.851562 10.1275L4.97656 6.00252Z" fill="white"></path>
</svg>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="text-center"><a class="inline-block bg-orange-300 hover:bg-orange-400 text-white font-bold font-heading py-5 px-8 rounded-md uppercase" href="#">Show More</a></div>
</div>
</section>Framework
Tailwind
UI Library
All Libraries
Components
- Alert 80
- Application 46
- Banner 10
- Blog 65
- Call to action 113
- Contact 48
- Content 48
- Cookies 46
- E-commerce (orders) 14
- E-commerce (products) 24
- FAQ 52
- Features 108
- Footer 65
- Graphs 9
- HTTP codes 39
- Headers 88
- How it works 73
- Logo clouds 80
- Modals 2
- Navbar 28
- Navigation (horizontal) 113
- Navigation (vertical) 2
- Newsletter 52
- Portfolio 66
- Pricing 62
- Reviews 5
- Sign in / Sign up 73
- Stats 45
- Ta general tables 7
- Tables 25
- Team 52
- Testimonials 68
- Users 17
Your customers' words are the best advertising. Therefore, you should present them in the most beneficial way. Tailwind reviews components will allow you to show the ratings of your company or products in a clear and attractive way. Check also the testimonals category to see similar sections.
In this mode, you will see versions of the Tailwind reviews components that are available within our UI libraries. You will also find many other types of components that will be in the same theme. Our UI libraries are prepared by experienced designers and the code underneath them is created by an in-house team of developers.
Get access to all Tailwind reviews components, code and our editor. Try the demo for free.
Component #1
Component #2
Component #3
Component #4
Component #5
