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

307

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

FAQ with Search

Author:
Dpk Mht

5 months ago

875
Frequently Asked Questions section

Author:
Brandon D

2 years ago

10.2k
Simple expanded FAQ example

Author:
Orson Kincaid

2 months ago

475
Tailwind FAQ accordion

Author:
yousef

8 months ago

2.6k
FAQ section
Frequently asked questions component

Author:
Bunny

1 year ago

9.4k
Accordion FAQ
FAQ Accordion section without using any javascript

Author:
Sophia Baker

1 year ago

17.1k
Help Center
Help Center

Author:
Tanvir Hasan Bappy (Tanvir)

2 weeks ago

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

Author:
Nirav Patel

8 months ago

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

1 year ago

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

Author:
inbarajan P

3 months ago

357
FAQ section

Author:
Brandon D

1 year ago

8.7k
FAQ Accordion Component
An interactive experience where users can click on questions to reveal or hide the corresponding answers.

Author:
King Kali

1 year ago

12.4k

Explore components by Tags

Didn't find component you were looking for?

Search from 1800+ components