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

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 page

Author:
R Thapa

1 year ago

14.7k
Help and support center ticketing system
Help and support center ticketing system

Author:
Rushikesh Latpate

3 months ago

588
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

4 months ago

1.1k
Simple expanded FAQ example

Author:
Orson Kincaid

7 months ago

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

4 months ago

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

Author:
Acode Master(Mfuranziza Dusabe Hamza)

1 week ago

46
Tailwind FAQ accordion

Author:
yousef

1 year ago

4.1k
FAQ - full size
Full sized FAQ section

Author:
kishan pc

1 year ago

2k
Home
html , css

Author:
Hacker Development

3 weeks ago

41
FAQ section

Author:
Simon Scheffer

2 years ago

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

2 months ago

387
Accordion FAQ
FAQ Accordion section without using any javascript

Author:
Sophia Baker

2 years ago

18.4k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components