FAQ with dropdown with Dark mode

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 v3.4. It is responsive. It supports dark mode. similar terms for this example are Frequently asked questions, QnA

FAQ

Author Dika Rahman

Tailwind v3.4 2.2k 10

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

Accordion FAQ
FAQ Accordion section without using any javascript

Sophia Baker

3 years ago

20.7k
Cards Seaction - Services block

ABDO-SY

1 year ago

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

KULDEEP

1 year ago

1.7k
FAQ Section with smooth Animations

JUGENDRA GANGWAR

1 month ago

21
FAQ section
Frequently asked questions component

Bunny

3 years ago

11.9k
Simple expanded FAQ example

Orson Kincaid

2 years ago

2.1k
About Us Component

KULDEEP

1 year ago

2.1k
The Free AI Tools Grid Section (210+ Tools, No Signup)
A responsive and SEO-optimized grid section showcasing over 210 free AI tools. Designed with Tailwind CSS, fully responsive, fast-loading, and built for high user engagement. No sign-up required, privacy-friendly, and optimized for performance and discoverability.https://www.thefreeaitools.com/

Hasan AlDoy (McDoy)

6 months ago

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

Omer fils ELENGA

1 month ago

15
Help Center
Help Center

Tanvir Hasan Bappy (Tanvir)

1 year ago

1.3k
FAQs
This is a FAQ it is made using html and tailwindcss

ishimwe shadad

1 year ago

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

Anonymous

3 years ago

10.7k