Home
Rajesh Maheshwari
Frequently Asked Questions

Frequently Asked Questions

A beautiful and modern accordion FAQ component using HTML & Tailwind CSS with smooth animations.

This tailwind example is contributed by Rajesh Maheshwari, on 28-Feb-2025. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are Frequently asked questions, QnA,collapsible

FAQ Accordion

Author Rajesh Maheshwari

1.6k

Fork Fullscreen

<!DOCTYPE html>
<html lang="en">

<div class="w-full max-w-2xl p-8 bg-white shadow-xl rounded-lg">
        <h2 class="text-3xl font-bold text-gray-800 text-center mb-6">Frequently Asked Questions</h2>

<div class="space-y-4">
            <div class="border border-gray-300 rounded-lg overflow-hidden">
                <button class="w-full flex justify-between items-center p-5 text-lg font-medium bg-gray-100 hover:bg-gray-200 transition-all toggle">
                    <span>📦 What is your return policy?</span>
                    <svg class="w-5 h-5 transition-transform transform rotate-0 icon" 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"></path>
                    </svg>
                </button>
                <div class="hidden bg-white p-5 text-gray-700">
                    We offer a 30-day money-back guarantee if you're not satisfied with your purchase.
                </div>
            </div>

<div class="border border-gray-300 rounded-lg overflow-hidden">
                <button class="w-full flex justify-between items-center p-5 text-lg font-medium bg-gray-100 hover:bg-gray-200 transition-all toggle">
                    <span>🚚 Do you provide international shipping?</span>
                    <svg class="w-5 h-5 transition-transform transform rotate-0 icon" 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"></path>
                    </svg>
                </button>
                <div class="hidden bg-white p-5 text-gray-700">
                    Yes, we ship worldwide with additional shipping charges based on location.
                </div>
            </div>

<div class="border border-gray-300 rounded-lg overflow-hidden">
                <button class="w-full flex justify-between items-center p-5 text-lg font-medium bg-gray-100 hover:bg-gray-200 transition-all toggle">
                    <span>💳 What payment methods do you accept?</span>
                    <svg class="w-5 h-5 transition-transform transform rotate-0 icon" 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"></path>
                    </svg>
                </button>
                <div class="hidden bg-white p-5 text-gray-700">
                    We accept Visa, MasterCard, PayPal, and Apple Pay.
                </div>
            </div>

<div class="border border-gray-300 rounded-lg overflow-hidden">
                <button class="w-full flex justify-between items-center p-5 text-lg font-medium bg-gray-100 hover:bg-gray-200 transition-all toggle">
                    <span>📧 How can I contact support?</span>
                    <svg class="w-5 h-5 transition-transform transform rotate-0 icon" 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"></path>
                    </svg>
                </button>
                <div class="hidden bg-white p-5 text-gray-700">
                    You can contact our support team via email at rajesh@maheshwari.com.
                </div>
            </div>
        </div>
    </div>

if (content.classList.contains("hidden")) {
                    document.querySelectorAll(".hidden").forEach(item => item.classList.add("hidden"));
                    document.querySelectorAll(".icon").forEach(icon => icon.classList.remove("rotate-180"));
                    content.classList.remove("hidden");
                    icon.classList.add("rotate-180");
                } else {
                    content.classList.add("hidden");
                    icon.classList.remove("rotate-180");
                }
            });
        });
    </script>

</body>

</html>

Related Examples

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

Author:
Manuela Bianka

3 years ago

11.9k
Accordion FAQ
FAQ Accordion section without using any javascript

Author:
Sophia Baker

3 years ago

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

16.4k
Tailwind FAQ accordion

Author:
yousef

1 year ago

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

Author:
inbarajan P

1 year ago

2.4k
Accordion FAQ

Author:
Nikola Małecka

1 year ago

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

1 year ago

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

Author:
Nirav Patel

1 year ago

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

Author:
Code Master(Mfuranziza Dusabe Hamza)

5 months ago

602
CTA Responsive
Gradient Style CTA

Author:
KULDEEP

7 months ago

553
Our Services Section – Animated & Responsive
A modern and dynamic “Services” section built with Tailwind CSS and Alpine.js, designed to showcase your company’s main offerings with clean visuals and engaging animations. This component uses smooth fade and slide animations to reveal each service card as it comes into view. Each card highlights a core business area — Web Development, Mobile Apps, and Cloud Solutions — with beautiful hover effects, icons, and descriptive lists. Perfect for SaaS websites, agencies, and startups looking to present their services in a visually appealing, professional, and responsive layout. Key Features Smooth scroll-triggered animations with Alpine.js Responsive grid layout (mobile → desktop ready) Built with Tailwind CSS for fast customization Dark mode support included Interactive hover effects for each service card Ideal for corporate, SaaS, or portfolio websites 💡 Services Included 🌐 Web Development (Responsive, SEO-friendly, Optimized) 📱 Mobile Apps (Cross-platform, iOS & Android) ☁️ Cloud Solutions (AWS, Azure, Auto-scaling, Security)

Author:
wavy kits

4 months ago

738
Footer with mobile accordion
A modern dark-themed footer component built with Tailwind CSS, featuring a responsive 5-column grid layout for desktop that transforms into an accordion menu on mobile devices. Perfect for beverage, e-commerce, or corporate websites, it includes organized navigation categories, hover effects on links, social media integration, and a clean copyright section - all styled with a professional stone-gray color scheme.

Author:
Maxim

1 year ago

1.4k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components