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

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

3 months ago

616
About Us Component

Author:
KULDEEP

3 months ago

662
Attractive Feature Section
With Gradient Color 6 Features

Author:
KULDEEP

3 months ago

566
about video
about kelaplus video

Author:
Omer fils ELENGA

3 months ago

330
CTA Responsive
Gradient Style CTA

Author:
KULDEEP

2 months ago

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

Author:
Code Master(Mfuranziza Dusabe Hamza)

3 weeks ago

152
Aurora Spinner
Aurora Spinner using tailwindcss

Author:
Deepak Kumar Chouhan

9 months ago

1.1k
Interactive Game Flip Card – Pure HTML & CSS Component
An elegant and interactive game info flip card built purely with HTML and CSS. This component flips smoothly on hover to reveal detailed game information on the back, providing a modern and engaging way to showcase your games without using JavaScript. Perfect for gaming websites wanting sleek animations and clean design.

Author:
Code Master(Mfuranziza Dusabe Hamza)

4 months ago

529
Play, Pause and Stop buttons

Author:
Lukas Müller

2 years ago

11.2k
FAQ page

Author:
R Thapa

2 years ago

15.1k
Apple Dock Navigation Bar

Author:
Cristian

9 months ago

1.3k
button animation
button animation big

Author:
QQ-VVN

5 months ago

399

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components