Home
Bunny
FAQ section

FAQ section

Frequently asked questions component

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

FAQ

Author Bunny

11.3k

Fork Fullscreen

<div class="bg-white">
    <div class="max-w-screen-xl mx-auto pt-12 pb-16 sm:pt-16 sm:pb-20 px-4 sm:px-6 lg:pt-20 lg:pb-28 lg:px-8">
        <h2 class="text-3xl leading-9 font-extrabold text-gray-900 text-center">
            Frequently asked questions
        </h2>
        <div class="mt-6 border-t-4 border-gray-100 pt-10">
            <div class="grid grid-cols-1 md:grid-cols-2 md:gap-x-8 md:gap-y-12">
                <dl>
                    <dt class="font-medium leading-6 text-gray-900 text-lg mt-4">What is the return policy for your
                        products?</dt>
                    <dd class="mt-4">
                        <p class="leading-6 text-base text-gray-500">
                            Our return policy allows customers to return products within 30 days of purchase for a full
                            refund or exchange.
                        </p>
                    </dd>
                </dl>

<dl>
                    <dt class="font-medium leading-6 text-gray-900 text-lg mt-4">
                        How do I track my order?
                    </dt>
                    <dd class="mt-4">
                        <p class="leading-6 text-base text-gray-500">
                            You can track your order by logging into your account on our website and viewing the
                            tracking information provided.
                        </p>
                    </dd>
                </dl>

<dl>
                    <dt class="font-medium leading-6 text-gray-900 text-lg mt-4">
                        What are the shipping options available?
                    </dt>
                    <dd class="mt-4">
                        <p class="leading-6 text-base text-gray-500">
                            We offer standard and expedited shipping options for all orders. Delivery times and prices
                            will vary depending on your location and the size of your order.
                        </p>
                    </dd>
                </dl>

<dl>
                    <dt class="font-medium leading-6 text-gray-900 text-lg mt-4">
                        What are the hours of operation?
                    </dt>
                    <dd class="mt-4">
                        <p class="leading-6 text-base text-gray-500">
                            Our customer service department is open Monday-Friday, 9am-5pm EST.
                        </p>
                    </dd>
                </dl>
            </div>
        </div>
    </div>
</div>

Related Examples

FAQ page

Author:
R Thapa

2 years ago

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

Author:
Abhijit Sen

2 years ago

18k
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

2 years ago

10.1k
Frequently Asked Questions section

Author:
Brandon D

3 years ago

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

Author:
King Kali

2 years ago

16.3k
FAQ section

Author:
Brandon D

3 years ago

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

Author:
Dika Rahman

1 year ago

1.7k
Home
html , css

Author:
Hacker Development

9 months ago

681
Accordion
The Accordion is a responsive and reusable component designed to display collapsible content sections. It's perfect for FAQs, menu items, or any other grouped information. Each section can expand or collapse individually to show or hide content. Features: Mobile-friendly and fully responsive design. Smooth animation for opening and closing panels. Supports multiple or single panel expansion. Highly customizable with props for colors, fonts, and behavior (e.g., single/multiple open panels). Accessible with keyboard navigation and ARIA attributes.

Author:
Abhiraj

1 year ago

1.9k
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.

Author:
Ayyamperumal S

1 year ago

2.3k
Login / Register Form
Tailwind CSS styling only – no frameworks required Smooth tab switch with JavaScript Fully responsive for mobile and desktop Clean, modern form design with interactive elements

Author:
KULDEEP

7 months ago

1k
FAQ with Tailwind CSS and Alpine.js

Author:
ariaw

10 months ago

982

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components