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

878

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

1 month ago

358
About Us Component

Author:
KULDEEP

1 month ago

344
Attractive Feature Section
With Gradient Color 6 Features

Author:
KULDEEP

3 weeks ago

157
about video
about kelaplus video

Author:
Omer fils ELENGA

3 weeks ago

57
CTA Responsive
Gradient Style CTA

Author:
KULDEEP

3 weeks ago

31
Hacker terminal #fake
hacker terminal tailwind css

Author:
QQ-VVN

2 months ago

527
Simple Login & Register Page
Login and Register Page using Tailwind, Alpine JS, and Fontawesome

Author:
Ahita Bisma Adlula

5 months ago

1.8k
Tailwind FAQ accordion

Author:
yousef

1 year ago

4.6k
Footer
Elevate your website design with this sleek and minimalist light mode footer component by AB NAHID AGENCY. Crafted for clean UI experiences, it’s perfect for modern web apps, blogs, and business platforms. Easy to integrate, fully responsive, and built with scalability in mind—designed to blend seamlessly with any light-themed layout.

Author:
Abdul Jabbar Al Nahid

2 weeks ago

133
Glassmorphism form

Author:
Geoffrey Callaghan

1 year ago

6.2k
Sign up
sign up page

Author:
gidy

2 months ago

513
Chat Bot

Author:
Md. Tofayel islam

2 weeks ago

160

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components