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

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

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

Author:
Nirav Patel

1 year ago

1.7k
Cards Seaction - Services block

Author:
ABDO-SY

2 months ago

274
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

16.5k
Frequently asked questions (FAQ)

Author:
Brandon D

2 years ago

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

4 months ago

822
Home
html , css

Author:
Hacker Development

3 weeks ago

42
FAQ.
Super simple animated FAQ with tailwind group hoverable accordion open and close.

Author:
inbarajan P

8 months ago

1.4k
FAQ section

Author:
Simon Scheffer

2 years ago

10.5k
FAQ Section with AlpineJS

Author:
Maxim

2 months ago

634
FAQ cards
FAQ section with cards

Author:
Moriba Traore

2 years ago

13.7k
FAQ section
An expanding frequently asked questions section made without using javascript.

Author:
Manuela Bianka

2 years ago

11.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.

Author:
Ayyamperumal S

2 months ago

387

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components