FAQ Accordion with Smooth Animation

responsive FAQ accordion with smooth expand and collapse animations

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

FAQ Other

Author JUGENDRA GANGWAR

Tailwind v3.4 1

Fork Fullscreen

<section class="mx-auto w-full max-w-2xl px-5 py-12">
  <div class="mb-9 text-center">
    <span class="rounded-full bg-indigo-50 px-4 py-2 text-xs font-semibold tracking-wider text-indigo-600">HELP CENTER</span>
    <h2 class="mt-5 text-3xl font-semibold tracking-tight text-slate-900 sm:text-4xl uppercase">Frequently asked questions</h2>
    <p class="mt-3 font-semibold text-slate-600">Everything you need to know about getting started.</p>
  </div>
  <div id="faqList" class="space-y-3">
    <article class="faq-item active rounded-2xl border border-indigo-100 bg-white shadow-sm">
      <button class="faq-trigger flex w-full items-center justify-between gap-4 p-5 text-left" aria-expanded="true">
        <span class="text-sm font-semibold text-slate-900 sm:text-base">How do I create an account?</span>
        <span class="faq-icon flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-indigo-50 text-xl text-indigo-600">+</span>
      </button>
      <div class="faq-answer"><div><p class="px-5 pb-5 text-sm leading-7 text-slate-500">Simply click the sign-up button, enter your email address and create a secure password. You can start using your account after verification.</p></div></div>
    </article>
    <article class="faq-item rounded-2xl border border-slate-200 bg-white shadow-sm">
      <button class="faq-trigger flex w-full items-center justify-between gap-4 p-5 text-left" aria-expanded="false">
        <span class="text-sm font-semibold text-slate-900 sm:text-base">Can I change my subscription plan?</span>
        <span class="faq-icon flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-slate-100 text-xl text-slate-600">+</span>
      </button>
      <div class="faq-answer"><div><p class="px-5 pb-5 text-sm leading-7 text-slate-500">Yes, you can upgrade or downgrade your subscription at any time from your account settings.</p></div></div>
    </article>
    <article class="faq-item rounded-2xl border border-slate-200 bg-white shadow-sm">
      <button class="faq-trigger flex w-full items-center justify-between gap-4 p-5 text-left" aria-expanded="false">
        <span class="text-sm font-semibold text-slate-900 sm:text-base">Is my personal information secure?</span>
        <span class="faq-icon flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-slate-100 text-xl text-slate-600">+</span>
      </button>
      <div class="faq-answer"><div><p class="px-5 pb-5 text-sm leading-7 text-slate-500">We use industry-standard security practices to protect your account information and personal data.</p></div></div>
    </article>
    <article class="faq-item rounded-2xl border border-slate-200 bg-white shadow-sm">
      <button class="faq-trigger flex w-full items-center justify-between gap-4 p-5 text-left" aria-expanded="false">
        <span class="text-sm font-semibold text-slate-900 sm:text-base">How can I contact customer support?</span>
        <span class="faq-icon flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-slate-100 text-xl text-slate-600">+</span>
      </button>
      <div class="faq-answer"><div><p class="px-5 pb-5 text-sm leading-7 text-slate-500">Reach our support team through the contact page or by sending us an email.</p></div></div>
    </article>
  </div>
  <div class="mt-7 rounded-2xl bg-indigo-600 p-6 text-center text-white">
    <h3 class="text-lg font-semibold">Still have questions?</h3>
    <p class="mt-1 text-sm text-indigo-100">Our team is here to help you.</p>
    <a href="mailto:support@example.com" class="mt-4 inline-flex rounded-xl bg-white px-5 py-3 text-sm font-semibold text-indigo-600 hover:bg-indigo-50">Contact Support ↗</a>
  </div>
</section>

</script>

Related Examples

Login / Register Form
Tailwind CSS styling only – no frameworks required Smooth tab switch with JavaScript Fully responsive for mobile and desktop Clean, modern form design with interactive elements

KULDEEP

1 year ago

1.7k
About Us Component

KULDEEP

1 year ago

2.1k
Attractive Feature Section
With Gradient Color 6 Features

KULDEEP

1 year ago

1.4k
about video
about kelaplus video

Omer fils ELENGA

1 year ago

1.3k
CTA Responsive
Gradient Style CTA

KULDEEP

1 year ago

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

Code Master(Mfuranziza Dusabe Hamza)

1 year ago

794
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
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

632
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

485
Responsive Light Mode Footer Component
This is a fully responsive and reusable light-mode footer component designed by ABNahid Agency. Built with a clean structure and optimized for modern web applications, this footer features essential sections, including About, Services, Contact, and Social Links. Ideal for personal portfolios, business websites, or startup platforms—plug and play in your React or HTML project.

Abdul Jabbar Al Nahid

1 year ago

1.1k
Responsive fullscreen youtube video

Anonymous

3 years ago

9.5k
Food Ordering Dashboard
A responsive user interface for selecting and ordering your favorite meals. The dashboard allows users to browse food categories, view dish details, and place orders with ease.

Muhammad Umair Arshad

1 year ago

1.7k