<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 CSS
UI Library
All Libraries
Components
- Alert 88
- Application 85
- Banner 28
- Blog 105
- Call to action 158
- Cards 24
- Careers 20
- Charts 3
- Contact 81
- Content 70
- Cookies 84
- E-commerce (orders) 28
- E-commerce (products) 49
- FAQ 71
- Features 175
- Footers 106
- Forms 6
- Graphs 28
- HTTP codes 83
- Headers 127
- How it works 104
- Logo clouds 131
- Modals 14
- Navbar 116
- Navigation (horizontal) 164
- Navigation (vertical) 2
- Newsletter 92
- Notifications 4
- Portfolio 82
- Pricing 99
- Reviews 10
- Rich text 3
- Section headings 72
- Sign in / Sign up 125
- Stats 126
- Tables 64
- Team 91
- Testimonials 112
- Users 17
Component #1
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 #2
Component #3
Component #4
Component #5
Component #6
Component #7
Component #8
Component #9
Component #10
