Help Center

This tailwind example is contributed by Tanvir Hasan Bappy (Tanvir), on 03-Dec-2024. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are Frequently asked questions, QnA

FAQ

Author Tanvir Hasan Bappy (Tanvir)

545

Fork Fullscreen

<header class="bg-[#006A4E] text-white py-6">
    <div class="container mx-auto px-4 flex justify-between items-center">
      <h1 class="text-3xl font-bold">Help Center</h1>
      <button class="px-4 py-2 bg-white text-[#006A4E] rounded-lg shadow hover:bg-gray-100">
        Contact Support
      </button>
    </div>
  </header>

<main class="container mx-auto px-4 py-12">
    
    <div class="mb-8">
        <input 
          type="text" 
          id="searchInput"
          placeholder="Search for help..." 
          class="w-full p-4 text-lg border rounded-lg shadow focus:ring-2 focus:ring-[#006A4E] focus:outline-none"
        />
      </div>

<section class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
      
      <div class="bg-white p-6 rounded-lg shadow hover:shadow-lg transition">
        <h2 class="text-xl font-semibold text-[#006A4E]mb-2">Getting Started</h2>
        <p class="text-gray-700">Learn the basics of our platform to get started quickly.</p>
        <a href="#" class="text-[#006A4E] mt-4 inline-block">Learn More →</a>
      </div>
      
      <div class="bg-white p-6 rounded-lg shadow hover:shadow-lg transition">
        <h2 class="text-xl font-semibold text-[#006A4E]mb-2">Account Management</h2>
        <p class="text-gray-700">Manage your account, settings, and privacy preferences.</p>
        <a href="#" class="text-[#006A4E] mt-4 inline-block">Learn More →</a>
      </div>
      
      <div class="bg-white p-6 rounded-lg shadow hover:shadow-lg transition">
        <h2 class="text-xl font-semibold text-[#006A4E] mb-2">Troubleshooting</h2>
        <p class="text-gray-700">Resolve common issues with step-by-step solutions.</p>
        <a href="#" class="text-[#006A4E] mt-4 inline-block">Learn More →</a>
      </div>
      
    </section>

<section class="mt-12">
      <h2 class="text-2xl font-bold text-gray-800 mb-6">Frequently Asked Questions</h2>
      <div class="space-y-4">
        
        <div class="bg-white p-6 rounded-lg shadow">
          <h3 class="text-lg font-semibold text-gray-800">How do I reset my password?</h3>
          <p class="text-gray-600 mt-2">To reset your password, click on "Forgot Password" on the login page and follow the instructions.</p>
        </div>
        
        <div class="bg-white p-6 rounded-lg shadow">
          <h3 class="text-lg font-semibold text-gray-800">Can I upgrade my plan later?</h3>
          <p class="text-gray-600 mt-2">Yes, you can upgrade or downgrade your plan anytime from the account settings page.</p>
        </div>
      </div>
    </section>
  </main>

searchInput.addEventListener('input', function () {
      const query = this.value.toLowerCase();

categories.forEach(category => {
        const text = category.textContent.toLowerCase();
        if (text.includes(query)) {
          category.classList.remove('hidden');
        } else {
          category.classList.add('hidden');
        }
      });
    });
  </script>

Related Examples

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

14.1k
Simple expanded FAQ example

Author:
Orson Kincaid

6 months ago

1k
Help and support center ticketing system
Help and support center ticketing system

Author:
Rushikesh Latpate

1 month ago

225
FAQ with dropdown
Created by Surjith S M -> https://twitter.com/surjithctly This component does not use javascript for dropdown

Author:
Abhijit Sen

2 years ago

16k
Accordion FAQ
FAQ Accordion section without using any javascript

Author:
Sophia Baker

2 years ago

18k
FAQ with dropdown with Dark mode
Added dark mode and improved UI and Code quality

Author:
Dika Rahman

6 months ago

784
Frequently asked questions (FAQ)

Author:
Brandon D

2 years ago

11.4k
FAQ section

Author:
Simon Scheffer

2 years ago

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

3 months ago

538
FAQ section
Frequently asked questions component

Author:
Bunny

2 years ago

10.1k
FAQ page

Author:
R Thapa

1 year ago

14.6k
FAQ section

Author:
Brandon D

2 years ago

10k

Explore components by Tags

Didn't find component you were looking for?

Search from 2100+ components