FAQ Section with smooth Animations

This tailwind example is contributed by JUGENDRA GANGWAR, on 29-Sep-2026. Component is made with Tailwind v3.4. It is responsive. similar terms for this example are Frequently asked questions, QnA

FAQ

Author JUGENDRA GANGWAR

Tailwind v3.4 17 2

Fork Fullscreen

<section id="faq" class="bg-gradient-to-b from-sky-50 to-white px-6 py-6 dark:from-slate-900 dark:to-slate-950 sm:py-12">
  <div class="mx-auto max-w-3xl">
    <div class="text-center">
      <h2 class="text-2xl tracking-tight text-slate-900 dark:text-white sm:text-4xl">
        Frequently asked questions
      </h2>
      <p class="mx-auto mt-4 max-w-xl text-base leading-7 text-slate-600 dark:text-slate-400">
        Quick answers to common questions. Can't find what you need? Our support team is happy to help.
      </p>
    </div>
    <div id="faq-list" class="mt-12 space-y-3">
      <div data-faq data-open="true" class="group rounded-2xl border border-slate-200 bg-white/80 shadow-sm backdrop-blur transition-all duration-300 hover:border-sky-300 data-[open=true]:border-sky-400 data-[open=true]:shadow-lg data-[open=true]:shadow-sky-100 dark:border-slate-800 dark:bg-slate-900/70 dark:hover:border-sky-700 dark:data-[open=true]:border-sky-500 dark:data-[open=true]:shadow-none">
        <h3>
          <button type="button" aria-expanded="true" aria-controls="faq-a1" id="faq-q1" class="flex w-full items-center justify-between gap-4 rounded-2xl px-6 py-5 text-left focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-sky-500">
            <span class="text-base font-semibold text-slate-900 dark:text-white sm:text-lg">How do I create an account?</span>
            <span class="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-sky-100 text-sky-700 transition-all duration-300 group-data-[open=true]:rotate-45 group-data-[open=true]:bg-sky-600 group-data-[open=true]:text-white dark:bg-sky-900/50 dark:text-sky-300">
              <svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><path d="M12 5v14M5 12h14"/></svg>
            </span>
          </button>
        </h3>
        <div id="faq-a1" role="region" aria-labelledby="faq-q1" class="grid grid-rows-[0fr] transition-[grid-template-rows] duration-300 ease-out group-data-[open=true]:grid-rows-[1fr]">
          <div class="overflow-hidden">
            <p class="px-6 pb-6 leading-7 text-slate-600 opacity-0 transition-opacity duration-300 group-data-[open=true]:opacity-100 group-data-[open=true]:delay-100 dark:text-slate-400">
              Select <strong class="font-semibold text-slate-800 dark:text-slate-200">Sign up</strong>, enter your email and a password, then confirm the link we send you. Your account is ready in under a minute.
            </p>
          </div>
        </div>
      </div>
      <div data-faq data-open="false" class="group rounded-2xl border border-slate-200 bg-white/80 shadow-sm backdrop-blur transition-all duration-300 hover:border-sky-300 data-[open=true]:border-sky-400 data-[open=true]:shadow-lg data-[open=true]:shadow-sky-100 dark:border-slate-800 dark:bg-slate-900/70 dark:hover:border-sky-700 dark:data-[open=true]:border-sky-500 dark:data-[open=true]:shadow-none">
        <h3>
          <button type="button" aria-expanded="false" aria-controls="faq-a2" id="faq-q2" class="flex w-full items-center justify-between gap-4 rounded-2xl px-6 py-5 text-left focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-sky-500">
            <span class="text-base font-semibold text-slate-900 dark:text-white sm:text-lg">Can I change or cancel my plan later?</span>
            <span class="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-sky-100 text-sky-700 transition-all duration-300 group-data-[open=true]:rotate-45 group-data-[open=true]:bg-sky-600 group-data-[open=true]:text-white dark:bg-sky-900/50 dark:text-sky-300">
              <svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><path d="M12 5v14M5 12h14"/></svg>
            </span>
          </button>
        </h3>
        <div id="faq-a2" role="region" aria-labelledby="faq-q2" class="grid grid-rows-[0fr] transition-[grid-template-rows] duration-300 ease-out group-data-[open=true]:grid-rows-[1fr]">
          <div class="overflow-hidden">
            <p class="px-6 pb-6 leading-7 text-slate-600 opacity-0 transition-opacity duration-300 group-data-[open=true]:opacity-100 group-data-[open=true]:delay-100 dark:text-slate-400">
              Yes. You can upgrade, downgrade or cancel at any time from your billing settings. Changes take effect at the end of your current billing period.
            </p>
          </div>
        </div>
      </div>
      <div data-faq data-open="false" class="group rounded-2xl border border-slate-200 bg-white/80 shadow-sm backdrop-blur transition-all duration-300 hover:border-sky-300 data-[open=true]:border-sky-400 data-[open=true]:shadow-lg data-[open=true]:shadow-sky-100 dark:border-slate-800 dark:bg-slate-900/70 dark:hover:border-sky-700 dark:data-[open=true]:border-sky-500 dark:data-[open=true]:shadow-none">
        <h3>
          <button type="button" aria-expanded="false" aria-controls="faq-a3" id="faq-q3" class="flex w-full items-center justify-between gap-4 rounded-2xl px-6 py-5 text-left focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-sky-500">
            <span class="text-base font-semibold text-slate-900 dark:text-white sm:text-lg">Which payment methods do you accept?</span>
            <span class="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-sky-100 text-sky-700 transition-all duration-300 group-data-[open=true]:rotate-45 group-data-[open=true]:bg-sky-600 group-data-[open=true]:text-white dark:bg-sky-900/50 dark:text-sky-300">
              <svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><path d="M12 5v14M5 12h14"/></svg>
            </span>
          </button>
        </h3>
        <div id="faq-a3" role="region" aria-labelledby="faq-q3" class="grid grid-rows-[0fr] transition-[grid-template-rows] duration-300 ease-out group-data-[open=true]:grid-rows-[1fr]">
          <div class="overflow-hidden">
            <p class="px-6 pb-6 leading-7 text-slate-600 opacity-0 transition-opacity duration-300 group-data-[open=true]:opacity-100 group-data-[open=true]:delay-100 dark:text-slate-400">
              We accept major credit and debit cards, UPI and net banking. All payments are processed securely and we never store your full card details.
            </p>
          </div>
        </div>
      </div>
      <div data-faq data-open="false" class="group rounded-2xl border border-slate-200 bg-white/80 shadow-sm backdrop-blur transition-all duration-300 hover:border-sky-300 data-[open=true]:border-sky-400 data-[open=true]:shadow-lg data-[open=true]:shadow-sky-100 dark:border-slate-800 dark:bg-slate-900/70 dark:hover:border-sky-700 dark:data-[open=true]:border-sky-500 dark:data-[open=true]:shadow-none">
        <h3>
          <button type="button" aria-expanded="false" aria-controls="faq-a4" id="faq-q4" class="flex w-full items-center justify-between gap-4 rounded-2xl px-6 py-5 text-left focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-sky-500">
            <span class="text-base font-semibold text-slate-900 dark:text-white sm:text-lg">Is my data safe?</span>
            <span class="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-sky-100 text-sky-700 transition-all duration-300 group-data-[open=true]:rotate-45 group-data-[open=true]:bg-sky-600 group-data-[open=true]:text-white dark:bg-sky-900/50 dark:text-sky-300">
              <svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><path d="M12 5v14M5 12h14"/></svg>
            </span>
          </button>
        </h3>
        <div id="faq-a4" role="region" aria-labelledby="faq-q4" class="grid grid-rows-[0fr] transition-[grid-template-rows] duration-300 ease-out group-data-[open=true]:grid-rows-[1fr]">
          <div class="overflow-hidden">
            <p class="px-6 pb-6 leading-7 text-slate-600 opacity-0 transition-opacity duration-300 group-data-[open=true]:opacity-100 group-data-[open=true]:delay-100 dark:text-slate-400">
              Yes. Your data is encrypted in transit and at rest, and access is limited to the people who need it. You can export or delete your data whenever you like.
            </p>
          </div>
        </div>
      </div>
      <div data-faq data-open="false" class="group rounded-2xl border border-slate-200 bg-white/80 shadow-sm backdrop-blur transition-all duration-300 hover:border-sky-300 data-[open=true]:border-sky-400 data-[open=true]:shadow-lg data-[open=true]:shadow-sky-100 dark:border-slate-800 dark:bg-slate-900/70 dark:hover:border-sky-700 dark:data-[open=true]:border-sky-500 dark:data-[open=true]:shadow-none">
        <h3>
          <button type="button" aria-expanded="false" aria-controls="faq-a5" id="faq-q5" class="flex w-full items-center justify-between gap-4 rounded-2xl px-6 py-5 text-left focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-sky-500">
            <span class="text-base font-semibold text-slate-900 dark:text-white sm:text-lg">How can I contact support?</span>
            <span class="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-sky-100 text-sky-700 transition-all duration-300 group-data-[open=true]:rotate-45 group-data-[open=true]:bg-sky-600 group-data-[open=true]:text-white dark:bg-sky-900/50 dark:text-sky-300">
              <svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><path d="M12 5v14M5 12h14"/></svg>
            </span>
          </button>
        </h3>
        <div id="faq-a5" role="region" aria-labelledby="faq-q5" class="grid grid-rows-[0fr] transition-[grid-template-rows] duration-300 ease-out group-data-[open=true]:grid-rows-[1fr]">
          <div class="overflow-hidden">
            <p class="px-6 pb-6 leading-7 text-slate-600 opacity-0 transition-opacity duration-300 group-data-[open=true]:opacity-100 group-data-[open=true]:delay-100 dark:text-slate-400">
              Use the <a href="/contact" class="font-semibold text-sky-700 underline underline-offset-2 hover:text-sky-900 dark:text-sky-400">contact page</a> or email us. We reply within one business day.
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
  <script>
    (function () {
      var items = document.querySelectorAll('#faq-list [data-faq]');
      items.forEach(function (item) {
        var btn = item.querySelector('button');
        btn.addEventListener('click', function () {
          var willOpen = item.dataset.open !== 'true';
          items.forEach(function (other) {
            other.dataset.open = 'false';
            other.querySelector('button').setAttribute('aria-expanded', 'false');
          });
          item.dataset.open = String(willOpen);
          btn.setAttribute('aria-expanded', String(willOpen));
        });
      });
    })();
  </script>
</section>

Related Examples

Accordion FAQ
FAQ Accordion section without using any javascript

Ganesh Salunke

5 months ago

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

Omer fils ELENGA

2 weeks ago

11
Home
html , css

Hacker Development

1 year ago

1.5k
My Coding Journey
To transform a standard timeline into an engaging, scroll-driven narrative experience.

Code Master(Mfuranziza Dusabe Hamza)

1 year ago

791
FAQ - full size
Full sized FAQ section

kishan pc

2 years ago

3k
Modern SaaS Agency Landing Page with Dark Mode & Mobile MenuE-Com With nav and filter
A premium SaaS agency landing page built with HTML, Tailwind CSS, and JavaScript. It features a sticky glassmorphism navbar, responsive mobile navigation drawer, light/dark mode toggle, animated hero section, case studies, services, process timeline, testimonial, FAQ accordion, booking CTA, and a clean modern footer. Perfect for startups, AI products, software agencies, creative studios, and digital businesses.

JUGENDRA GANGWAR

3 months ago

407
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.6k
FAQs
This is a FAQ it is made using html and tailwindcss

ishimwe shadad

1 year ago

1.3k
FAQ Section with AlpineJS

Maxim

1 year ago

2.1k
Frequently Asked Questions section

Brandon D

3 years ago

12.7k
Simple expanded FAQ example

Orson Kincaid

2 years ago

2.1k
Tailwind FAQ accordion

yousef

2 years ago

6.2k