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)

838

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

Cards Seaction - Services block

Author:
ABDO-SY

5 months ago

912
FAQs
This is a FAQ it is made using html and tailwindcss

Author:
ishimwe shadad

3 months ago

497
Frequently asked questions (FAQ)

Author:
Brandon D

2 years ago

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

7 months ago

1.3k
Frequently Asked Questions section

Author:
Brandon D

2 years ago

11.7k
FAQ - full size
Full sized FAQ section

Author:
kishan pc

1 year ago

2k
Accordion FAQ
FAQ Accordion section without using any javascript

Author:
Sophia Baker

2 years ago

19k
Accordion FAQ

Author:
Nikola Małecka

7 months ago

800
FAQ Section with AlpineJS

Author:
Maxim

5 months ago

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

Author:
Manuela Bianka

3 years ago

11.7k
FAQs
Frequently Asked Questions

Author:
ORGIN_DREAMS

3 months ago

258
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

9.4k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components