Home
Rushikesh Latpate
Help and support center ticketing system

Help and support center ticketing system

This tailwind example is contributed by Rushikesh Latpate, on 16-Feb-2025. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are Frequently asked questions, QnA

FAQ Other

Author Rushikesh Latpate

1.2k

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 and Support Center</h1>
      <a href="https://sugam24.in/web/?q=contact">
      <button class="px-4 py-2 bg-white text-[#006A4E] rounded-lg shadow hover:bg-gray-100">
        Contact Support
      </button>
      </a>
    </div>
  </header>

<main class="container mx-auto px-4 py-12">

<div class="sm:flex items-center max-w-screen-xl bg-indigo-100">
        <div class="sm:w-1/2 p-5">  
            <ul role="list" class="divide-gray-100">

<li class="flex justify-between gap-x-6 py-5 bg-indigo-50 hover:bg-white" style="padding: 10px;">
                <div class="flex min-w-0 gap-x-4">
                  <div class="min-w-0 flex-auto">
                    <p class="text-sm font-semibold leading-6 text-gray-900">Subject title of the ticket</p>
                    <p class="text-sm font-semibold leading-6 text-gray-900">Ticket ID: 2025/2652</p>
                  </div>
                </div>
                <div class="hidden shrink-0 sm:flex sm:flex-col sm:items-end">
                  <p class="text-sm leading-6 text-gray-900">2025-02-15</p>
                  <div class="mt-1 flex items-center gap-x-1.5">
                    <div class="flex-none rounded-full bg-emerald-500/20 p-1">
                      <div class="h-1.5 w-1.5 rounded-full bg-emerald-500"></div>
                    </div>
                    <p class="text-xs leading-5 text-gray-500">Active</p>
                  </div>
                </div>
              </li>

</ul>
        </div>   
        <div class="sm:w-1/2 p-5 bg-white">
            
               <div class="flex items-center justify-center w-full">
               <div class="flex flex-col max-w-sm">
                <div class="flex-grow overflow-y-auto">
                    
                    <div class="flex flex-col mb-4 gap-4 py-4">
                        <div class="flex justify-start">
                            <div class="bg-gray-100 rounded-lg px-4 py-2 max-w-[80%]">
                                <p class="text-gray-900 text-sm">Hello, how May I help You ?</p>
                            </div>
                        </div>
                        <div class="flex justify-end">
                            <div class="bg-blue-500 rounded-lg px-4 py-2 max-w-[80%]">
                                <p class="text-white text-sm">I'm good, thanks! How about you?</p>
                            </div>
                        </div>
                        <div class="flex justify-start">
                            <div class="bg-gray-100 rounded-lg px-4 py-2 max-w-[80%]">
                                <p class="text-gray-900 text-sm">I'm doing great, thanks for asking!</p>
                            </div>
                        </div>
                    </div>
                </div>
                <form>
                <div class="flex justify-center items-center h-4">
                    
                    <input type="text" class="border border-gray-300 rounded-lg py-2 px-4 w-full max-w-lg mr-4" placeholder="Type a message...">
                    <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">Send</button>
                </div>
                </form>
                </div>
                </div>
        </div>
    </div>

<div style="padding-top: 20px;"></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>

<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="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>

</main>
      </div>
    </div>

Related Examples

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

4 months ago

627
About Us Component

Author:
KULDEEP

4 months ago

814
Attractive Feature Section
With Gradient Color 6 Features

Author:
KULDEEP

3 months ago

669
about video
about kelaplus video

Author:
Omer fils ELENGA

3 months ago

378
CTA Responsive
Gradient Style CTA

Author:
KULDEEP

3 months ago

333
My Coding Journey
To transform a standard timeline into an engaging, scroll-driven narrative experience.

Author:
Code Master(Mfuranziza Dusabe Hamza)

1 month ago

185
macOS Style Webpage – macOS Design in the Browser
A simple webpage inspired by the macOS interface. It recreates the clean design, dock, and desktop look of macOS using only HTML, tailwind CSS, and JavaScript. This project focuses on front-end styling and layout to bring the visual feel of macOS to the web — not a full simulation, just the look and vibe.

Author:
Hamza Atig

1 week ago

167
cards
cards with background animation

Author:
Anonymous

1 year ago

3k
chart
to chart on your family and

Author:
Nishimwe Jeanine

5 months ago

432
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

17.7k
htmlcss1

Author:
Anonymous

4 months ago

190
Payment form

Author:
ORGIN_DREAMS

5 months ago

446

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components