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 2

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 Accordion Component
An interactive experience where users can click on questions to reveal or hide the corresponding answers.

King Kali

2 years ago

17.2k
Our Services Section – Animated & Responsive
A modern and dynamic “Services” section built with Tailwind CSS and Alpine.js, designed to showcase your company’s main offerings with clean visuals and engaging animations. This component uses smooth fade and slide animations to reveal each service card as it comes into view. Each card highlights a core business area — Web Development, Mobile Apps, and Cloud Solutions — with beautiful hover effects, icons, and descriptive lists. Perfect for SaaS websites, agencies, and startups looking to present their services in a visually appealing, professional, and responsive layout. Key Features Smooth scroll-triggered animations with Alpine.js Responsive grid layout (mobile → desktop ready) Built with Tailwind CSS for fast customization Dark mode support included Interactive hover effects for each service card Ideal for corporate, SaaS, or portfolio websites 💡 Services Included 🌐 Web Development (Responsive, SEO-friendly, Optimized) 📱 Mobile Apps (Cross-platform, iOS & Android) ☁️ Cloud Solutions (AWS, Azure, Auto-scaling, Security)

wavy kits

11 months ago

1.4k
FAQ with Search

Dpk Mht

2 years ago

2.9k
FAQs
Frequently Asked Questions

ORGIN_DREAMS

1 year ago

1.3k
FAQ cards
FAQ section with cards

Moriba Traore

3 years ago

14.5k
suuply chain
hhh

Ishimwe Shadad

3 months ago

319
Frequently Asked Questions section

Brandon D

3 years ago

12.6k
About Us Component

KULDEEP

1 year ago

2.1k
FAQ with dropdown
Created by Surjith S M -> https://twitter.com/surjithctly This component does not use javascript for dropdown

Abhijit Sen

3 years ago

18.5k
FAQ Section with AlpineJS

Maxim

1 year ago

2k
FAQ with dropdown
Created by Surjith S M -> https://twitter.com/surjithctly This component does not use javascript for dropdown

Kevin

11 months ago

476
FAQ Section

Abdul Baset Bappy

1 year ago

1.1k