<section class="relative pt-24 pb-28 bg-blueGray-50 overflow-hidden">
<img class="absolute bottom-0 left-1/2 transform -translate-x-1/2" src="flaro-assets/images/faqs/gradient.svg" alt="">
<div class="relative z-10 container px-4 mx-auto">
<div class="md:max-w-4xl mx-auto">
<p class="mb-7 text-sm text-indigo-600 text-center font-semibold uppercase tracking-px">Have any questions?</p>
<h2 class="mb-16 text-6xl md:text-8xl xl:text-10xl text-center font-bold font-heading tracking-px-n leading-none">Frequently Asked Questions</h2>
<div class="mb-11 flex flex-wrap -m-1">
<div class="w-full p-1">
<a href="#">
<div class="py-7 px-8 bg-white bg-opacity-60 border-2 border-indigo-600 rounded-2xl shadow-10xl">
<div class="flex flex-wrap justify-between -m-2">
<div class="flex-1 p-2">
<h3 class="mb-4 text-lg font-semibold leading-normal">Do you provide any free plan?</h3>
<p class="text-gray-600 font-medium">Lorem ipsum dolor sit amet, to the consectr adipiscing elit. Volutpat tempor to the condi mentum vitae vel purus.</p>
</div>
<div class="w-auto p-2">
<svg class="relative top-1" width="20" height="20" viewbox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M4.16732 12.5L10.0007 6.66667L15.834 12.5" stroke="#4F46E5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</div>
</div>
</div>
</a>
</div>
<div class="w-full p-1">
<a href="#">
<div class="py-7 px-8 bg-white bg-opacity-60 border border-gray-200 hover:border-gray-300 rounded-2xl shadow-10xl">
<div class="flex flex-wrap justify-between -m-2">
<div class="flex-1 p-2">
<h3 class="text-lg font-semibold leading-normal">How to claim your 25% discount offer?</h3>
</div>
<div class="w-auto p-2">
<svg class="relative top-1" width="18" height="18" viewbox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M14.25 6.75L9 12L3.75 6.75" stroke="#18181B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</div>
</div>
</div>
</a>
</div>
<div class="w-full p-1">
<a href="#">
<div class="py-7 px-8 bg-white bg-opacity-60 border border-gray-200 hover:border-gray-300 rounded-2xl shadow-10xl">
<div class="flex flex-wrap justify-between -m-2">
<div class="flex-1 p-2">
<h3 class="text-lg font-semibold leading-normal">What’s your refund policy?</h3>
</div>
<div class="w-auto p-2">
<svg class="relative top-1" width="18" height="18" viewbox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M14.25 6.75L9 12L3.75 6.75" stroke="#18181B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</div>
</div>
</div>
</a>
</div>
<div class="w-full p-1">
<a href="#">
<div class="py-7 px-8 bg-white bg-opacity-60 border border-gray-200 hover:border-gray-300 rounded-2xl shadow-10xl">
<div class="flex flex-wrap justify-between -m-2">
<div class="flex-1 p-2">
<h3 class="text-lg font-semibold leading-normal">How to get support for the product?</h3>
</div>
<div class="w-auto p-2">
<svg class="relative top-1" width="18" height="18" viewbox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M14.25 6.75L9 12L3.75 6.75" stroke="#18181B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</div>
</div>
</div>
</a>
</div>
</div>
<p class="text-gray-600 text-center font-medium">
<span>Still have any questions?</span>
<a class="font-semibold text-indigo-600 hover:text-indigo-700" href="#">Contact us</a>
</p>
</div>
</div>
</section>Framework
Tailwind CSS
UI Library
All Libraries
Components
- Alert 101
- Application 103
- Banners 73
- Benefits 16
- Blog 122
- Breadcrumbs 24
- Call to action 189
- Cards 29
- Careers 28
- Confirmation 6
- Contact 96
- Content 80
- Cookies 92
- Dashboards 13
- E-commerce (orders) 35
- E-commerce (products) 54
- FAQ 86
- Features 215
- Footers 136
- Forms 9
- Gallery 22
- Graphs 38
- HTTP codes 98
- Hero section 152
- How it works 121
- Instagram photos 5
- Logo clouds 170
- Modals 29
- Navbar 209
- Navigation (horizontal) 208
- Navigation (vertical) 7
- Newsletter 118
- Notifications 7
- Paginations 12
- Portfolio 87
- Pricing 119
- Product info 5
- Projects 6
- Reviews 26
- Rich text 3
- Sign in / Sign up 165
- Snackbars 10
- Stats 144
- Tables 70
- Team 108
- Testimonials 139
- Users 17
Component #1
The frequently asked questions section is used to present answers to frequently asked questions. Tailwind FAQ components will allow you to show them in an aesthetic and clear way.
Choose from many variations of the Tailwind components FAQ. The variants shown here are available in various UI libraries in the Shuffle editor. You will also find many other types of components that will be in the same style. This will allow you to build a comprehensive Tailwind website template. Each library is designed by a professional designer and coded by our team of developers.
Get access to all sections of the Tailwind components FAQ, 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
