Home
Nirav Patel
for qution and answer

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 CSS v3. It is responsive. similar terms for this example are Frequently asked questions, QnA

FAQ

Author Nirav Patel

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

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.2k
Cards Seaction - Services block

Author:
ABDO-SY

4 months ago

756
FAQ section

Author:
Brandon D

2 years ago

10.7k
Simple expanded FAQ example

Author:
Orson Kincaid

10 months ago

1.1k
FAQ section
Frequently asked questions component

Author:
Bunny

2 years ago

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

17k
Frequently asked questions (FAQ)

Author:
Brandon D

2 years ago

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

6 months ago

973
FAQ page

Author:
R Thapa

1 year ago

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

Author:
Dika Rahman

10 months ago

1.2k
Help and support center ticketing system
Help and support center ticketing system

Author:
Rushikesh Latpate

5 months ago

878
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

4 months ago

719

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components