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.1k

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

Tailwind FAQ accordion

Author:
yousef

1 year ago

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

4 months ago

822
FAQ section

Author:
Simon Scheffer

2 years ago

10.5k
FAQ - Htmlwind
Offset intro faq section

Author:
Htmlwind

4 hours ago

2
Home
html , css

Author:
Hacker Development

3 weeks ago

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

Author:
Nirav Patel

1 year ago

1.7k
FAQ with Tailwind CSS and Alpine.js

Author:
ᴀʀ!ᴀ

2 months ago

374
Cards Seaction - Services block

Author:
ABDO-SY

2 months ago

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

Author:
Manuela Bianka

2 years ago

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

8.8k
Frequently asked questions (FAQ)

Author:
Brandon D

2 years ago

11.5k
FAQ with Search

Author:
Dpk Mht

11 months ago

1.8k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components