<section class="py-24 lg:py-32 bg-white overflow-hidden">
<div class="container px-4 mx-auto">
<div class="flex flex-wrap -m-8">
<div class="w-full md:w-1/2 p-8">
<span class="inline-block max-w-max mb-6 px-3 py-1.5 text-sm text-white uppercase tracking-tight font-semibold bg-gray-600 rounded-full" style="background: url('basko-assets/images/gradient.png'); background-repeat: no-repeat; background-size: cover;">Try some freebie</span>
<h2 class="font-heading text-6xl tracking-tighter">Provide some additional information with this FAQ Accordion.</h2>
</div>
<div class="w-full md:w-1/2 p-8">
<div class="flex flex-wrap -m-1.5">
<div class="w-full p-1.5">
<a class="block p-6 border border-gray-200 hover:border-gray-300 rounded-lg transition duration-200" href="#">
<div class="flex flex-wrap items-center justify-between -m-2">
<div class="w-auto p-2">
<h3 class="font-semibold tracking-tight">How many items are there in this list?</h3>
</div>
<div class="w-auto p-2">
<svg width="9" height="14" viewbox="0 0 9 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1.5 1.16683L7.33333 7.00016L1.5 12.8335" stroke="#171A1F" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</div>
</div>
<p class="hidden mt-6 tracking-tight">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
</a>
</div>
<div class="w-full p-1.5">
<a class="block p-6 border border-gray-200 hover:border-gray-300 rounded-lg transition duration-200" href="#">
<div class="flex flex-wrap items-center justify-between -m-2">
<div class="w-auto p-2">
<h3 class="font-semibold tracking-tight">Can you describe Newleaf in just one sentence?</h3>
</div>
<div class="w-auto p-2">
<svg width="9" height="14" viewbox="0 0 9 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1.5 1.16683L7.33333 7.00016L1.5 12.8335" stroke="#171A1F" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</div>
</div>
<p class="hidden mt-6 tracking-tight">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
</a>
</div>
<div class="w-full p-1.5">
<a class="block p-6 border border-gray-200 hover:border-gray-300 rounded-lg transition duration-200" href="#">
<div class="flex flex-wrap items-center justify-between -m-2">
<div class="w-auto p-2">
<h3 class="font-semibold tracking-tight">Can I use this template for my client?</h3>
</div>
<div class="w-auto p-2">
<svg width="9" height="14" viewbox="0 0 9 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1.5 1.16683L7.33333 7.00016L1.5 12.8335" stroke="#171A1F" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</div>
</div>
<p class="hidden mt-6 tracking-tight">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
</a>
</div>
<div class="w-full p-1.5">
<a class="block p-6 border border-gray-200 hover:border-gray-300 rounded-lg transition duration-200" href="#">
<div class="flex flex-wrap items-center justify-between -m-2">
<div class="w-auto p-2">
<h3 class="font-semibold tracking-tight">Do you offer templates in other categories?</h3>
</div>
<div class="w-auto p-2">
<svg width="9" height="14" viewbox="0 0 9 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1.5 1.16683L7.33333 7.00016L1.5 12.8335" stroke="#171A1F" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</div>
</div>
<p class="hidden mt-6 tracking-tight">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
</a>
</div>
<div class="w-full p-1.5">
<a class="block p-6 border border-gray-200 hover:border-gray-300 rounded-lg transition duration-200" href="#">
<div class="flex flex-wrap items-center justify-between -m-2">
<div class="w-auto p-2">
<h3 class="font-semibold tracking-tight">Do I need to credit you when I use this template?</h3>
</div>
<div class="w-auto p-2">
<svg width="9" height="14" viewbox="0 0 9 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1.5 1.16683L7.33333 7.00016L1.5 12.8335" stroke="#171A1F" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</div>
</div>
<p class="hidden mt-6 tracking-tight">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
</a>
</div>
</div>
</div>
</div>
</div>
</section>Framework
Tailwind CSS
UI Library
All Libraries
Components
- Advanced inputs 18
- Alert 111
- Application 113
- Banners 76
- Benefits 16
- Blog 143
- Brands 3
- Breadcrumbs 27
- Call to action 227
- Cards 43
- Careers 34
- Contact 117
- Content 90
- Cookies 104
- Dashboards 13
- Download 5
- Dropdowns 4
- E-commerce (orders) 65
- E-commerce (products) 101
- Empty state 4
- FAQ 103
- Features 263
- Footers 163
- Forms 9
- Graphs 58
- HTTP codes 119
- Hero section 184
- How it works 135
- Instagram photos 9
- Integrations 8
- Logo clouds 179
- Modals 35
- Navbar 212
- Navigation (horizontal) 241
- Navigation (vertical) 12
- Newsletter 138
- Notifications 11
- Paginations 16
- Portfolio 93
- Pricing 141
- Product info 5
- Projects 6
- Reviews 36
- Rich text 3
- Search 3
- Sign in / Sign up 201
- Snackbars 10
- Stats 173
- Steps 12
- Tables 91
- Tabs 2
- Team 122
- Testimonials 160
- Users 17
Component #1
Component #2
Component #3
Component #4
Component #5
Component #6
Component #7
Component #8
Component #9
Component #10
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.
