for qution and answer

Forked from @zone-mona/for-qution-and-answer

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

This tailwind example is contributed by Omer fils ELENGA, on 04-Oct-2026. Component is made with Tailwind v3.4. It is responsive. similar terms for this example are Frequently asked questions, QnA

FAQ

Author Omer fils ELENGA

Tailwind v3.4 11

Fork Fullscreen

<section class="py-16 md:py-24 bg-[#FACC15] text-slate-900 overflow-hidden" id="faq">
  <div class="container mx-auto px-4 sm:px-6 max-w-4xl">
    
    
    <div class="text-center max-w-xl mx-auto mb-16 space-y-3">
      <span class="inline-block px-4 py-1 rounded-full bg-slate-900/10 text-slate-900 font-mono text-xs font-bold uppercase tracking-widest backdrop-blur-sm border border-slate-900/10">
        Frequently asked questions
      </span>
      <h2 class="text-3xl sm:text-4xl lg:text-5xl font-black tracking-tight text-slate-900">
        Got questions? We’re here to help!
      </h2>
    </div>

<div class="relative min-h-[750px] sm:min-h-[650px] flex flex-col justify-start items-center">

<div class="group absolute w-full top-0 transition-all duration-500 ease-out hover:-translate-y-2 hover:z-50 cursor-pointer" style="z-index: 10;">
        <div class="bg-[#1E40AF] text-white p-6 sm:p-8 rounded-3xl border border-blue-400/30 shadow-[0_10px_30px_rgba(0,0,0,0.15)] group-hover:shadow-[0_20px_40px_rgba(0,0,0,0.3)] transition-all">
          <div class="flex flex-col md:flex-row md:items-start justify-between gap-4">
            <div class="flex items-start gap-3 md:w-1/2">
              <span class="font-mono text-xl font-bold text-blue-300">01</span>
              <h3 class="text-lg sm:text-xl font-bold leading-snug">
                How soon will I receive the voucher code once I make the payment?
              </h3>
            </div>
            <div class="md:w-1/2 md:pl-6 border-t md:border-t-0 md:border-l border-blue-500/40 pt-3 md:pt-0">
              <p class="text-blue-100 font-normal leading-relaxed text-sm sm:text-base">
                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="group absolute w-full top-16 sm:top-20 transition-all duration-500 ease-out hover:-translate-y-2 hover:z-50 cursor-pointer" style="z-index: 20;">
        <div class="bg-[#1D4ED8] text-white p-6 sm:p-8 rounded-3xl border border-blue-400/30 shadow-[0_10px_30px_rgba(0,0,0,0.18)] group-hover:shadow-[0_20px_40px_rgba(0,0,0,0.3)] transition-all">
          <div class="flex flex-col md:flex-row md:items-start justify-between gap-4">
            <div class="flex items-start gap-3 md:w-1/2">
              <span class="font-mono text-xl font-bold text-blue-300">02</span>
              <h3 class="text-lg sm:text-xl font-bold leading-snug">
                Within what timeframe do I need to book the slot after purchasing the voucher?
              </h3>
            </div>
            <div class="md:w-1/2 md:pl-6 border-t md:border-t-0 md:border-l border-blue-400/40 pt-3 md:pt-0">
              <p class="text-blue-100 font-normal leading-relaxed text-sm sm:text-base">
                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="group absolute w-full top-32 sm:top-40 transition-all duration-500 ease-out hover:-translate-y-2 hover:z-50 cursor-pointer" style="z-index: 30;">
        <div class="bg-[#2563EB] text-white p-6 sm:p-8 rounded-3xl border border-blue-300/30 shadow-[0_10px_30px_rgba(0,0,0,0.2)] group-hover:shadow-[0_20px_40px_rgba(0,0,0,0.3)] transition-all">
          <div class="flex flex-col md:flex-row md:items-start justify-between gap-4">
            <div class="flex items-start gap-3 md:w-1/2">
              <span class="font-mono text-xl font-bold text-blue-200">03</span>
              <h3 class="text-lg sm:text-xl font-bold leading-snug">
                Is this refundable?
              </h3>
            </div>
            <div class="md:w-1/2 md:pl-6 border-t md:border-t-0 md:border-l border-blue-300/40 pt-3 md:pt-0">
              <p class="text-blue-100 font-normal leading-relaxed text-sm sm:text-base">
                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="group absolute w-full top-48 sm:top-60 transition-all duration-500 ease-out hover:-translate-y-2 hover:z-50 cursor-pointer" style="z-index: 40;">
        <div class="bg-[#3B82F6] text-white p-6 sm:p-8 rounded-3xl border border-blue-200/30 shadow-[0_10px_30px_rgba(0,0,0,0.22)] group-hover:shadow-[0_20px_40px_rgba(0,0,0,0.3)] transition-all">
          <div class="flex flex-col md:flex-row md:items-start justify-between gap-4">
            <div class="flex items-start gap-3 md:w-1/2">
              <span class="font-mono text-xl font-bold text-blue-100">04</span>
              <h3 class="text-lg sm:text-xl font-bold leading-snug">
                Can I book any available slot?
              </h3>
            </div>
            <div class="md:w-1/2 md:pl-6 border-t md:border-t-0 md:border-l border-blue-200/40 pt-3 md:pt-0">
              <p class="text-blue-50 font-normal leading-relaxed text-sm sm:text-base">
                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="group absolute w-full top-64 sm:top-80 transition-all duration-500 ease-out hover:-translate-y-2 hover:z-50 cursor-pointer" style="z-index: 50;">
        <div class="bg-[#0F172A] text-white p-6 sm:p-8 rounded-3xl border border-slate-700 shadow-[0_10px_30px_rgba(0,0,0,0.25)] group-hover:shadow-[0_20px_40px_rgba(0,0,0,0.3)] transition-all">
          <div class="flex flex-col md:flex-row md:items-start justify-between gap-4">
            <div class="flex items-start gap-3 md:w-1/2">
              <span class="font-mono text-xl font-bold text-blue-400">05</span>
              <h3 class="text-lg sm:text-xl font-bold leading-snug">
                Do I have to pay anything extra at PearsonToefl.com?
              </h3>
            </div>
            <div class="md:w-1/2 md:pl-6 border-t md:border-t-0 md:border-l border-slate-800 pt-3 md:pt-0">
              <p class="text-slate-300 font-normal leading-relaxed text-sm sm:text-base">
                No, you don't have to pay anything extra. This prepaid TOEFL voucher is inclusive of GST and covers the full cost.
              </p>
            </div>
          </div>
        </div>
      </div>

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

Related Examples

FAQ page

R Thapa

3 years ago

16.1k
Tailwind FAQ accordion

yousef

2 years ago

6.2k
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.5k
FAQ section
Frequently asked questions component

Bunny

3 years ago

11.9k
Acode master
Acode master(=>good work for Acode master)

Code Master(Mfuranziza Dusabe Hamza)

1 year ago

1.6k
FAQ section

Simon Scheffer

3 years ago

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

Rajesh Maheshwari

1 year ago

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

Nirav Patel

2 years ago

3.2k
Free SEO Audit & Analysis Tool
Instant SEO analysis of your website. Check 50+ ranking factors including on-page SEO, technical issues, and mobile performance.

MD Mostafa Niloy

11 months ago

759
CTA Responsive
Gradient Style CTA

KULDEEP

1 year ago

1.1k
FAQs
This is a FAQ it is made using html and tailwindcss

ishimwe shadad

1 year ago

1.3k
The Free AI Tools Grid Section (210+ Tools, No Signup)
A responsive and SEO-optimized grid section showcasing over 210 free AI tools. Designed with Tailwind CSS, fully responsive, fast-loading, and built for high user engagement. No sign-up required, privacy-friendly, and optimized for performance and discoverability.https://www.thefreeaitools.com/

Hasan AlDoy (McDoy)

6 months ago

482