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

1.8k

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 with Tailwind CSS and Alpine.js

Author:
ᴀʀ!ᴀ

2 months ago

382
Frequently Asked Questions
A beautiful and modern accordion FAQ component using HTML & Tailwind CSS with smooth animations.

Author:
Rajesh Maheshwari

3 months ago

613
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

8.9k
FAQ page

Author:
R Thapa

1 year ago

14.8k
FAQ section
Frequently asked questions component

Author:
Bunny

2 years ago

10.3k
Tailwind FAQ accordion

Author:
yousef

1 year ago

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

5 months ago

835
Cards Seaction - Services block

Author:
ABDO-SY

2 months ago

416
Help and support center ticketing system
Help and support center ticketing system

Author:
Rushikesh Latpate

4 months ago

599
Acode master
Acode master(=>good work for Acode master)

Author:
Acode Master(Mfuranziza Dusabe Hamza)

3 weeks ago

142
FAQ with Search

Author:
Dpk Mht

11 months ago

1.9k
Home
html , css

Author:
Hacker Development

1 month ago

43

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components