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

451

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

Accordion FAQ
FAQ Accordion section without using any javascript

Author:
Sophia Baker

2 years ago

19.3k
FAQ Section

Author:
Abdul Baset Bappy

4 months ago

388
FAQ section

Author:
Simon Scheffer

2 years ago

10.9k
Accordion FAQ

Author:
Nikola Małecka

9 months ago

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

Author:
KULDEEP

4 months ago

627
FAQ section
Frequently asked questions component

Author:
Bunny

2 years ago

11k
FAQ Accordion Component
An interactive experience where users can click on questions to reveal or hide the corresponding answers.

Author:
King Kali

2 years ago

15.7k
Simple expanded FAQ example

Author:
Orson Kincaid

1 year ago

1.4k
CTA Responsive
Gradient Style CTA

Author:
KULDEEP

3 months ago

333
Accordion
The Accordion is a responsive and reusable component designed to display collapsible content sections. It's perfect for FAQs, menu items, or any other grouped information. Each section can expand or collapse individually to show or hide content. Features: Mobile-friendly and fully responsive design. Smooth animation for opening and closing panels. Supports multiple or single panel expansion. Highly customizable with props for colors, fonts, and behavior (e.g., single/multiple open panels). Accessible with keyboard navigation and ARIA attributes.

Author:
Abhiraj

9 months ago

1.8k
macOS Style Webpage – macOS Design in the Browser
A simple webpage inspired by the macOS interface. It recreates the clean design, dock, and desktop look of macOS using only HTML, tailwind CSS, and JavaScript. This project focuses on front-end styling and layout to bring the visual feel of macOS to the web — not a full simulation, just the look and vibe.

Author:
Hamza Atig

1 week ago

171
FAQ - Htmlwind
Offset intro faq section

Author:
Htmlwind

5 months ago

638

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components