Home
Dika Rahman
FAQ with dropdown with Dark mode

FAQ with dropdown with Dark mode

Forked from> @abhi/faq-with-dropdown

Added dark mode and improved UI and Code quality

This tailwind example is contributed by Dika Rahman, on 02-Oct-2024. Component is made with Tailwind CSS v3. It is responsive. It supports dark mode. similar terms for this example are Frequently asked questions, QnA

FAQ

Author Dika Rahman

1.5k

Fork Fullscreen

<div class="dark:bg-gray-800 h-screen">
    <div class="w-full max-w-3xl px-2 mx-auto py-12 dark:bg-transparent dark:text-gray-200">
        <h3 class="mt-3 text-xl font-bold text-gray-800 md:text-2xl dark:text-gray-100">
            Frequently Asked Questions
        </h3>
        <div class="grid max-w-5xl mx-auto mt-6 divide-y divide-gray-200 dark:divide-gray-700">
            <details class="group py-4">
                <summary class="flex items-center justify-between font-medium list-none cursor-pointer">
                    <span>Is TechSupportPro free to use?</span>
                    <span class="transition group-open:rotate-180">
                        <svg fill="none" height="24" shape-rendering="geometricPrecision" stroke="currentColor"
                            stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" viewBox="0 0 24 24"
                            width="24" class="dark:stroke-gray-400">
                            <path d="M6 9l6 6 6-6"></path>
                        </svg>
                    </span>
                </summary>
                <p class="mt-3 text-gray-600 group-open:animate-fadeIn dark:text-gray-300">
                    Yes! You can access our basic support services for free. However, we also offer premium plans
                    with
                    additional features.
                </p>
            </details>

<details class="group py-4">
                <summary class="flex items-center justify-between font-medium list-none cursor-pointer">
                    <span>Does TechSupportPro have a community forum?</span>
                    <span class="transition group-open:rotate-180">
                        <svg fill="none" height="24" shape-rendering="geometricPrecision" stroke="currentColor"
                            stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" viewBox="0 0 24 24"
                            width="24" class="dark:stroke-gray-400">
                            <path d="M6 9l6 6 6-6"></path>
                        </svg>
                    </span>
                </summary>
                <p class="mt-3 text-gray-600 group-open:animate-fadeIn dark:text-gray-300">
                    Absolutely! Our community forum allows users to ask questions, share solutions, and collaborate
                    on
                    various tech issues.
                    <a href="/forum">TechSupportPro - Forum</a>
                </p>
            </details>

<details class="group py-4">
                <summary class="flex items-center justify-between font-medium list-none cursor-pointer">
                    <span>What kind of support services does TechSupportPro provide?</span>
                    <span class="transition group-open:rotate-180">
                        <svg fill="none" height="24" shape-rendering="geometricPrecision" stroke="currentColor"
                            stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" viewBox="0 0 24 24"
                            width="24" class="dark:stroke-gray-400">
                            <path d="M6 9l6 6 6-6"></path>
                        </svg>
                    </span>
                </summary>
                <p class="mt-3 text-gray-600 group-open:animate-fadeIn dark:text-gray-300">
                    We offer a wide range of services, including tech troubleshooting, software installations,
                    network
                    setup assistance, and device optimization. Our support covers both home users and businesses.
                </p>
            </details>

<details class="group py-4">
                <summary class="flex items-center justify-between font-medium list-none cursor-pointer">
                    <span>How can I save my support tickets for future reference?</span>
                    <span class="transition group-open:rotate-180">
                        <svg fill="none" height="24" shape-rendering="geometricPrecision" stroke="currentColor"
                            stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" viewBox="0 0 24 24"
                            width="24" class="dark:stroke-gray-400">
                            <path d="M6 9l6 6 6-6"></path>
                        </svg>
                    </span>
                </summary>
                <p class="mt-3 text-gray-600 group-open:animate-fadeIn dark:text-gray-300">
                    After logging into your account, you can view and save your support tickets under the "My
                    Tickets"
                    section of your dashboard.
                </p>
            </details>

<details class="group py-4">
                <summary class="flex items-center justify-between font-medium list-none cursor-pointer">
                    <span>How do I get in touch with TechSupportPro for urgent assistance?</span>
                    <span class="transition group-open:rotate-180">
                        <svg fill="none" height="24" shape-rendering="geometricPrecision" stroke="currentColor"
                            stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" viewBox="0 0 24 24"
                            width="24" class="dark:stroke-gray-400">
                            <path d="M6 9l6 6 6-6"></path>
                        </svg>
                    </span>
                </summary>
                <p class="mt-3 text-gray-600 group-open:animate-fadeIn dark:text-gray-300">
                    You can reach us through our 24/7 live chat or call our support hotline for urgent technical
                    assistance.
                </p>
            </details>

</div>
    </div>
</div>

Related Examples

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

9 months ago

1.8k
FAQs
Frequently Asked Questions

Author:
ORGIN_DREAMS

5 months ago

528
Accordion FAQ
quick and easy access to frequently asked questions related to insurance. It allows users to expand and collapse questions with answers.

Author:
Anonymous

2 years ago

9.8k
FAQ with Tailwind CSS and Alpine.js

Author:
ariaw

7 months ago

838
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

3 weeks ago

393
Accordion FAQ

Author:
Nikola Małecka

10 months ago

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

Author:
inbarajan P

1 year ago

1.9k
Help and support center ticketing system
Help and support center ticketing system

Author:
Rushikesh Latpate

8 months ago

1.3k
FAQ cards
FAQ section with cards

Author:
Moriba Traore

2 years ago

14.1k
FAQ - Htmlwind
Offset intro faq section

Author:
Htmlwind

5 months ago

642
FAQ page

Author:
R Thapa

2 years ago

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

646

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components