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 14 1

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

CTA Responsive
Gradient Style CTA

KULDEEP

1 year ago

1k
Accordion FAQ
quick and easy access to frequently asked questions related to insurance. It allows users to expand and collapse questions with answers.

Anonymous

2 years ago

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

Omer fils ELENGA

1 week ago

11
FAQ with Tailwind CSS and Alpine.js

ariaw

1 year ago

1.6k
Simple expanded FAQ example

Orson Kincaid

2 years 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.6k
Attractive Feature Section
With Gradient Color 6 Features

KULDEEP

1 year ago

1.4k
FAQ with Search

Dpk Mht

2 years ago

2.9k
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
My Coding Journey
To transform a standard timeline into an engaging, scroll-driven narrative experience.

Code Master(Mfuranziza Dusabe Hamza)

1 year ago

790
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/

Achraf Testq

6 months ago

624
FAQs
This is a FAQ it is made using html and tailwindcss

ishimwe shadad

1 year ago

1.3k