FAQ section

This tailwind example is contributed by Brandon D, on 19-Jan-2023. Component is made with Tailwind v3.4. It is responsive. similar terms for this example are Frequently asked questions, QnA

FAQ

Author Brandon D

Tailwind v3.4 11.4k 12

Fork Fullscreen

<div class="py-4 max-w-screen-sm mx-auto">
    <div class="text-center mb-16">
        <p class="mt-4 text-sm leading-7 text-gray-500 font-regular">
            F.A.Q
        </p>
        <h3 class="text-3xl sm:text-4xl leading-normal font-extrabold tracking-tight text-gray-900">
            Frequently Asked <span class="text-indigo-600">Questions</span>
        </h3>
    </div>

<div class="py-3 uppercase text-sm text-gray-500 font-medium">
            Technical
        </div>

<div class="flex items-start my-8">
                <div
                    class="hidden sm:flex items-center justify-center p-3 mr-3 rounded-full bg-indigo-500 text-white border-4 border-white text-xl font-semibold">
                    <svg width="24px" fill="white" height="24px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                        <g data-name="Layer 2">
                            <g data-name="menu-arrow">
                                <rect width="24" height="24" transform="rotate(180 12 12)" opacity="0"></rect>
                                <path
                                    d="M17 9A5 5 0 0 0 7 9a1 1 0 0 0 2 0 3 3 0 1 1 3 3 1 1 0 0 0-1 1v2a1 1 0 0 0 2 0v-1.1A5 5 0 0 0 17 9z">
                                </path>
                                <circle cx="12" cy="19" r="1"></circle>
                            </g>
                        </g>
                    </svg>
                </div>
                <div class="text-md">
                    <h1 class="text-gray-900 font-semibold mb-2">What might be your first question?</h1>
                    <p class="text-gray-500 text-sm">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores
                        impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione.</p>
                </div>
            </div>
            <div class="flex items-start my-8">
                <div
                    class="hidden sm:flex items-center justify-center p-3 mr-3 rounded-full bg-indigo-500 text-white border-4 border-white text-xl font-semibold">
                    <svg width="24px" fill="white" height="24px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                        <g data-name="Layer 2">
                            <g data-name="menu-arrow">
                                <rect width="24" height="24" transform="rotate(180 12 12)" opacity="0"></rect>
                                <path
                                    d="M17 9A5 5 0 0 0 7 9a1 1 0 0 0 2 0 3 3 0 1 1 3 3 1 1 0 0 0-1 1v2a1 1 0 0 0 2 0v-1.1A5 5 0 0 0 17 9z">
                                </path>
                                <circle cx="12" cy="19" r="1"></circle>
                            </g>
                        </g>
                    </svg>
                </div>
                <div class="text-md">
                    <h1 class="text-gray-900 font-semibold mb-2">What might be your first question?</h1>
                    <p class="text-gray-500 text-sm">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores
                        impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione.</p>
                </div>
            </div>
            <div class="flex items-start my-8">
                <div
                    class="hidden sm:flex items-center justify-center p-3 mr-3 rounded-full bg-indigo-500 text-white border-4 border-white text-xl font-semibold">
                    <svg width="24px" fill="white" height="24px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                        <g data-name="Layer 2">
                            <g data-name="menu-arrow">
                                <rect width="24" height="24" transform="rotate(180 12 12)" opacity="0"></rect>
                                <path
                                    d="M17 9A5 5 0 0 0 7 9a1 1 0 0 0 2 0 3 3 0 1 1 3 3 1 1 0 0 0-1 1v2a1 1 0 0 0 2 0v-1.1A5 5 0 0 0 17 9z">
                                </path>
                                <circle cx="12" cy="19" r="1"></circle>
                            </g>
                        </g>
                    </svg>
                </div>
                <div class="text-md">
                    <h1 class="text-gray-900 font-semibold mb-2">What might be your first question?</h1>
                    <p class="text-gray-500 text-sm">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores
                        impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione.</p>
                </div>
            </div>

</div>

<div class="py-3 uppercase text-sm text-gray-500 font-medium">
            Billings
        </div>

</div>

Related Examples

FAQ with dropdown
Created by Surjith S M -> https://twitter.com/surjithctly This component does not use javascript for dropdown

Abhijit Sen

3 years ago

18.6k
Accordion FAQ
FAQ Accordion section without using any javascript

Sophia Baker

3 years ago

20.5k
FAQ page

R Thapa

3 years ago

16.1k
Frequently Asked Questions section

Brandon D

3 years ago

12.7k
Frequently asked questions (FAQ)

Brandon D

3 years ago

13.2k
FAQ Accordion Component
An interactive experience where users can click on questions to reveal or hide the corresponding answers.

King Kali

3 years ago

17.2k
FAQ cards
FAQ section with cards

Moriba Traore

3 years ago

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

Anonymous

2 years ago

10.6k
FAQ section
Frequently asked questions component

Bunny

3 years ago

11.9k
FAQ Section

Abdul Baset Bappy

1 year ago

1.1k
Responsive Portfolio Webpage with Tailwind CSS
This is a reusable and responsive portfolio webpage template created with HTML and Tailwind CSS. Designed for developers or creatives, the template includes essential sections like Header, Hero, About, Skills, Experience, Projects, Testimonials, Contact Form, and Footer. It features a clean, modern design and is fully customizable without requiring JavaScript. Perfect for showcasing personal or professional work on the web.

Ayyamperumal S

1 year ago

3.2k
The Free AI Tools Grid Section (210+ Tools, No Signup)
A responsive and SEO-optimized grid section showcasing over 210 free AI tools. Designed with Tailwind CSS, fully responsive, fast-loading, and built for high user engagement. No sign-up required, privacy-friendly, and optimized for performance and discoverability.https://www.thefreeaitools.com/

Hasan AlDoy (McDoy)

5 months ago

481