for qution and answer

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

This tailwind example is contributed by Nirav Patel, on 28-Mar-2024. Component is made with Tailwind v3.4. It is responsive. similar terms for this example are Frequently asked questions, QnA

FAQ

Author Nirav Patel

Tailwind v3.4 3.2k 11

Fork Fullscreen

<section class="sm:py-10 bg-yellow-400 overflow-hidden" id="faq">
        <div class="container mx-auto px-4">
            <div class="relative py-16 px-8 bg-yelloww overflow-hidden rounded-3xl">
                <div class="relative z-10 md:max-w-7xl mx-auto">
                    <div class="md:max-w-xl mb-10"><span class="inline-block mb-5 text-md text-mygray font-bold uppercase tracking-widest">Frequently
                            asked questions</span>
                        <h2 class="font-heading text-4xl    text-mygray text-4xl lg:text-5xl font-bold font-heading">
                            Got questions? We’re here to help!</h2>
                    </div>
                    <div class="flex flex-wrap -m-3">
                        <div class="w-full p-3">
                            <div class="p-10 bg-blue-700 rounded-3xl">
                                <div class="flex flex-wrap -m-2">
                                    <div class="w-full md:w-1/2 p-2">
                                        <h3 class="font-heading text-xl text-white font-black">How soon will I
                                            receive the voucher code once I make the payment?
                                        </h3>
                                    </div>
                                    <div class="w-full md:w-1/2 p-2">
                                        <p class="text-white font-medium">You will receive the voucher code
                                            immediately via email and SMS once you make the payment. The process is
                                            completely automated and takes only 30 seconds.
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="w-full p-3">
                            <div class="p-10 bg-blue-700 rounded-3xl">
                                <div class="flex flex-wrap -m-2">
                                    <div class="w-full md:w-1/2 p-2">
                                        <h3 class="font-heading text-xl text-white font-black">Within what timeframe
                                            do I need to book the slot after purchasing the voucher?
                                        </h3>
                                    </div>
                                    <div class="w-full md:w-1/2 p-2">
                                        <p class="text-white font-medium">This voucher is valid for 11 months. It is
                                            important to complete your exam within this 11-month period starting from
                                            the date of purchase.
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="w-full p-3">
                            <div class="p-10 bg-blue-700 rounded-3xl">
                                <div class="flex flex-wrap -m-2">
                                    <div class="w-full md:w-1/2 p-2">
                                        <h3 class="font-heading text-xl text-white font-black">Is this refundable?
                                        </h3>
                                    </div>
                                    <div class="w-full md:w-1/2 p-2">
                                        <p class="text-white font-medium">Sure, if you change your mind and plan not
                                            to appear for Toefl Academic and return the unused voucher code to us, we
                                            will
                                            happily refund 70% of the amount within 6 months of purchase.
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>

<div class="w-full p-3">
                            <div class="p-10 bg-blue-700 rounded-3xl">
                                <div class="flex flex-wrap -m-2">
                                    <div class="w-full md:w-1/2 p-2">
                                        <h3 class="font-heading text-xl text-white font-black">Can I book any
                                            available slot?
                                        </h3>
                                    </div>
                                    <div class="w-full md:w-1/2 p-2">
                                        <p class="text-white font-medium">Yes, you can book any available slot across
                                            India. You just need to book your slot 48 hours in advance.
                                        </p>
                                    </div>
                                </div>

</div>
                        </div>
                        <div class="w-full p-3">
                            <div class="p-10 bg-blue-700 rounded-3xl">
                                <div class="flex flex-wrap -m-2">
                                    <div class="w-full md:w-1/2 p-2">
                                        <h3 class="font-heading text-xl text-white font-black lg:pr-10">Do I have to
                                            pay anything extra at PearsonToefl.com website at the time of slot booking?
                                        </h3>
                                    </div>
                                    <div class="w-full md:w-1/2 p-2">
                                        <p class="text-white font-medium">No, you don't have to pay anything extra on
                                            PearsonToefl.com website to book your slot. This prepaid Toefl voucher is
                                            inclusive of GST and covers the full cost of Toefl Academic.
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="w-full p-3">
                            <div class="p-10 bg-blue-700 rounded-3xl">
                                <div class="flex flex-wrap -m-2">
                                    <div class="w-full md:w-1/2 p-2">
                                        <h3 class="font-heading text-xl text-white font-black">
                                            Can you book my slot for me?
                                        </h3>
                                    </div>
                                    <div class="w-full md:w-1/2 p-2">
                                        <p class="text-white font-medium">Sure, if you're new to TOEFL and GRE and
                                            don't know
                                            how to book your slot, our team will happily help you to book your slot or
                                            we will book it for you.

</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="w-full p-3">
                            <div class="p-10 bg-blue-700 rounded-3xl">
                                <div class="flex flex-wrap -m-2">
                                    <div class="w-full md:w-1/2 p-2">
                                        <h3 class="font-heading text-xl text-white font-black">Can you give me some
                                            more discount?
                                        </h3>
                                    </div>
                                    <div class="w-full md:w-1/2 p-2">
                                        <p class="text-white font-medium">Unfortunately, we cannot provide any
                                            further discount. There is no room for any additional discount since these
                                            are genuine vouchers and they include 18% GST, unlike others.

</p>
                                    </div>

</div>

</div>
                        </div>

</div>
                </div>
            </div>

</div>

</section>

Related Examples

faq ui simple
faq ui simple

Omer fils ELENGA

8 months ago

451
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.

Abhiraj

1 year ago

2.7k
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 Section with AlpineJS

Maxim

1 year ago

2.1k
FAQ Section with smooth Animations

JUGENDRA GANGWAR

1 month ago

21
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.

Ayyamperumal S

1 year ago

1.8k
Cards Seaction - Services block

ABDO-SY

1 year ago

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

KULDEEP

1 year ago

1.7k
FAQ section
Frequently asked questions component

Bunny

3 years ago

11.9k
Attractive Feature Section
With Gradient Color 6 Features

KULDEEP

1 year ago

1.4k
Accordion FAQ
FAQ Accordion section without using any javascript

Sophia Baker

3 years ago

20.7k
Simple expanded FAQ example

Orson Kincaid

2 years ago

2.1k