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

Website Pricing List Card Component
Website Pricing List Card Component with Package Names: Basic Package → Starter Website Premium Package → Business Website Professional Package → E-Commerce Solution Pricing Structure: Increased prices significantly to reflect web development services one-time payment model FAQ Content.

Author:
Ayyamperumal S

6 months ago

1k
Accordion FAQ
FAQ Accordion section without using any javascript

Author:
Sophia Baker

2 years ago

19.3k
about video
about kelaplus video

Author:
Omer fils ELENGA

3 months ago

341
FAQ page

Author:
R Thapa

2 years ago

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

Author:
ishimwe shadad

5 months ago

612
FAQ section
Frequently asked questions component

Author:
Bunny

2 years ago

11k
FAQ cards
FAQ section with cards

Author:
Moriba Traore

2 years ago

14.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

9 months ago

1.7k
FAQ Section

Author:
Abdul Baset Bappy

4 months ago

309
Acode master
Acode master(=>good work for Acode master)

Author:
Code Master(Mfuranziza Dusabe Hamza)

5 months ago

667
Home
html , css

Author:
Hacker Development

5 months ago

394
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

3 months ago

623

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components