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

139

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

Help Center
Help Center

Author:
Tanvir Hasan Bappy (Tanvir)

7 months ago

729
FAQ with dropdown with Dark mode
Added dark mode and improved UI and Code quality

Author:
Dika Rahman

9 months ago

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

3 months ago

585
FAQ section

Author:
Simon Scheffer

2 years ago

10.7k
Cards Seaction - Services block

Author:
ABDO-SY

3 months ago

555
FAQ section

Author:
Brandon D

2 years ago

10.6k
Accordion FAQ

Author:
Nikola Małecka

6 months ago

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

Author:
inbarajan P

10 months ago

1.5k
Accordion FAQ
FAQ Accordion section without using any javascript

Author:
Sophia Baker

2 years ago

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

Author:
Nirav Patel

1 year ago

1.8k
FAQ with Search

Author:
Dpk Mht

1 year ago

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

5 months ago

1.4k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components