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 3

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

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.

Ayyamperumal S

1 year ago

3.2k
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.1k
Accordion FAQ
FAQ Accordion section without using any javascript

Sophia Baker

3 years ago

20.5k
FAQ section

Brandon D

3 years ago

11.4k
about video
about kelaplus video

Omer fils ELENGA

1 year ago

1.2k
FAQ section

Simon Scheffer

3 years ago

11.5k
Simple expanded FAQ example

Orson Kincaid

1 year ago

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

Ayyamperumal S

1 year ago

1.7k
FAQ - Htmlwind
Offset intro faq section

Htmlwind

1 year ago

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

5 months ago

448
Pricing component luxuries
A modern, luxurious, and elegant pricing component with HTML and Tailwind CSS.

Alif Bima Pradana

7 months ago

885
Accordion FAQ
FAQ Accordion section without using any javascript

Ganesh Salunke

4 months ago

286