Home
Abdul Baset Bappy
FAQ Section

FAQ Section

This tailwind example is contributed by Abdul Baset Bappy, on 19-Jun-2025. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are Frequently asked questions, QnA

FAQ

Author Abdul Baset Bappy

292

Fork Fullscreen

<section class="py-10 bg-gray-50 sm:py-16 lg:py-24">
    <div class="px-4 mx-auto sm:px-6 lg:px-8 max-w-7xl">
        <div class="max-w-2xl mx-auto text-center">
            <h2 class="text-3xl font-bold leading-tight text-black sm:text-4xl lg:text-5xl">Frequently Asked Questions</h2>
            <p class="max-w-xl mx-auto mt-4 text-base leading-relaxed text-gray-600">Amet minim mollit non deserunt ullamco est sit aliqua dolor do</p>
        </div>

<div class="max-w-3xl mx-auto mt-8 space-y-4 md:mt-16">
            <div class="transition-all duration-200 bg-white border border-gray-200 shadow-lg cursor-pointer hover:bg-gray-50">
                <button type="button" class="flex items-center justify-between w-full px-4 py-5 sm:p-6">
                    <span class="flex text-lg font-semibold text-black"> How to create an account? </span>

<div class="px-4 pb-5 sm:px-6 sm:pb-6">
                    <p>Amet minim mollit non deserunt ullamco est sit <a href="#" title="" class="text-blue-600 transition-all duration-200 hover:underline">aliqua dolor</a> do amet sint. Velit officia consequat duis enim velit mollit.</p>
                </div>
            </div>

<div class="transition-all duration-200 bg-white border border-gray-200 cursor-pointer hover:bg-gray-50">
                <button type="button" class="flex items-center justify-between w-full px-4 py-5 sm:p-6">
                    <span class="flex text-lg font-semibold text-black"> How can I make payment using Paypal? </span>

<div class="hidden px-4 pb-5 sm:px-6 sm:pb-6">
                    <p>Amet minim mollit non deserunt ullamco est sit <a href="#" title="" class="text-blue-600 transition-all duration-200 hover:underline">aliqua dolor</a> do amet sint. Velit officia consequat duis enim velit mollit.</p>
                </div>
            </div>

<div class="transition-all duration-200 bg-white border border-gray-200 cursor-pointer hover:bg-gray-50">
                <div class="">
                    <button type="button" class="flex items-center justify-between w-full px-4 py-5 sm:p-6">
                        <span class="flex text-lg font-semibold text-black"> Can I cancel my plan? </span>

<div class="hidden px-4 pb-5 sm:px-6 sm:pb-6">
                        <p>Amet minim mollit non deserunt ullamco est sit <a href="#" title="" class="text-blue-600 transition-all duration-200 hover:underline">aliqua dolor</a> do amet sint. Velit officia consequat duis enim velit mollit.</p>
                    </div>
                </div>
            </div>

<p class="text-center text-gray-600 textbase mt-9">Didn’t find the answer you are looking for? <a href="#" title="" class="font-medium text-blue-600 transition-all duration-200 hover:text-blue-700 focus:text-blue-700 hover:underline">Contact our support</a></p>
    </div>
</section>

Related Examples

CTA Responsive
Gradient Style CTA

Author:
KULDEEP

2 months ago

93
Frequently asked questions (FAQ)

Author:
Brandon D

2 years ago

12k
FAQ - full size
Full sized FAQ section

Author:
kishan pc

1 year ago

2k
FAQ with Tailwind CSS and Alpine.js

Author:
ariaw

6 months ago

563
Tailwind FAQ accordion

Author:
yousef

1 year ago

4.8k
FAQ page

Author:
R Thapa

1 year ago

15.1k
for qution and answer
this is i made for qution and ans and referense from etsnote.com

Author:
Nirav Patel

1 year ago

2k
Help and support center ticketing system
Help and support center ticketing system

Author:
Rushikesh Latpate

7 months ago

999
Accordion FAQ
quick and easy access to frequently asked questions related to insurance. It allows users to expand and collapse questions with answers.

Author:
Anonymous

1 year ago

9.4k
FAQ with dropdown with Dark mode
Added dark mode and improved UI and Code quality

Author:
Dika Rahman

11 months ago

1.5k
Website Pricing List Card Component
Website Pricing List Card Component with Package Names: Basic Package → Starter Website Premium Package → Business Website Professional Package → E-Commerce Solution Pricing Structure: Increased prices significantly to reflect web development services one-time payment model FAQ Content.

Author:
Ayyamperumal S

5 months ago

847
Home
html , css

Author:
Hacker Development

4 months ago

328

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components