FAQs

Frequently Asked Questions

This tailwind example is contributed by ORGIN_DREAMS, on 23-May-2025. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are Frequently asked questions, QnA

FAQ

Author ORGIN_DREAMS

673

Fork Fullscreen

<section class="max-w-3xl mx-auto p-6">
  <h2 class="text-3xl font-bold mb-6 text-center">Frequently Asked Questions</h2>
  <div class="space-y-4">
    <div class="border rounded-md overflow-hidden">
      <button class="w-full px-6 py-4 text-left flex justify-between items-center focus:outline-none faq-btn">
        <span class="font-medium">What is your refund policy?</span>
        <svg class="w-5 h-5 transform transition-transform" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7"/></svg>
      </button>
      <div class="max-h-0 px-6 overflow-hidden transition-all duration-300 faq-content text-gray-700">
        <p class="pb-4">
          We offer a 30-day money-back guarantee on all purchases.
        </p>
      </div>
    </div>
    <div class="border rounded-md overflow-hidden">
      <button class="w-full px-6 py-4 text-left flex justify-between items-center focus:outline-none faq-btn">
        <span class="font-medium">How do I change my subscription plan?</span>
        <svg class="w-5 h-5 transform transition-transform" fill="none"

ChatGPT said:
stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7"/></svg>
</button>
<div class="max-h-0 px-6 overflow-hidden transition-all duration-300 faq-content text-gray-700">
<p class="pb-4">
You can change your plan anytime from your account settings page.
</p>
</div>
</div>

</div> <script> document.querySelectorAll('.faq-btn').forEach(btn => { btn.addEventListener('click', () => { const content = btn.nextElementSibling; const icon = btn.querySelector('svg'); content.style.maxHeight = content.style.maxHeight ? null : content.scrollHeight + 'px'; icon.classList.toggle('rotate-180'); }); }); </script> </section>

Related Examples

Acode master
Acode master(=>good work for Acode master)

Author:
Code Master(Mfuranziza Dusabe Hamza)

8 months ago

847
Help Center
Help Center

Author:
Tanvir Hasan Bappy (Tanvir)

1 year ago

1.1k
about video
about kelaplus video

Author:
Omer fils ELENGA

6 months ago

774
FAQ section
Frequently asked questions component

Author:
Bunny

3 years ago

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

Author:
Code Master(Mfuranziza Dusabe Hamza)

4 months ago

496
Simple expanded FAQ example

Author:
Orson Kincaid

1 year ago

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

Author:
Ayyamperumal S

1 year ago

2.2k
Free SEO Audit & Analysis Tool
Instant SEO analysis of your website. Check 50+ ranking factors including on-page SEO, technical issues, and mobile performance.

Author:
MD Mostafa Niloy

2 months ago

104
Frequently asked questions (FAQ)

Author:
Brandon D

3 years ago

12.3k
CTA Responsive
Gradient Style CTA

Author:
KULDEEP

6 months ago

439
Accordion FAQ
FAQ Accordion section without using any javascript

Author:
Sophia Baker

2 years ago

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

Author:
Abhijit Sen

2 years ago

18k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components