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

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

650
About Us Component

Author:
KULDEEP

4 months ago

822
Attractive Feature Section
With Gradient Color 6 Features

Author:
KULDEEP

4 months ago

686
about video
about kelaplus video

Author:
Omer fils ELENGA

4 months ago

482
CTA Responsive
Gradient Style CTA

Author:
KULDEEP

4 months ago

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

Author:
Code Master(Mfuranziza Dusabe Hamza)

1 month ago

195
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

3 weeks ago

408
Free SEO Audit & Analysis Tool
Instant SEO analysis of your website. Check 50+ ranking factors including on-page SEO, technical issues, and mobile performance.

Author:
MD Mostafa Niloy

1 hour ago

1
Contact Us / Enquiry-form Responsive

Author:
KULDEEP

4 months ago

1k
portfolio
This portfolio page for Claire includes: 1. Responsive design that works on both desktop and mobile 2. Indigo-800 and Blue-900 color scheme for the background 3. Dark mode support (the design is already dark-themed) 4. Beautiful animations and effects: 1. Fade-in and slide-up animations for sections 2. Animated skill bars 3. Hover effects on projects and buttons 4. Smooth scrolling for navigation 5. Mobile-friendly navigation with a toggle menu 6. Sections for About, Skills, Projects, and Contact 7. A contact form with styled inputs 8. Social media links in the footer 9. Accessibility considerations (proper heading structure, color contrast, focus styles) Key features: - The background uses a gradient from Indigo-800 to Blue-900 - The header and footer have a frosted glass effect using backdrop filters - Text is white for high contrast against the dark background - Sections fade in and slide up as they enter the viewport - Skill bars animate when the skills section is in view - Project cards have a hover effect with scaling and increased opacity - The contact form has animated focus states - Social media icons change color on hover - The layout is responsive, with a hamburger menu for mobile screens This implementation provides a visually appealing and functional portfolio page for Claire, using HTML, Tailwind CSS, and vanilla JavaScript for the interactions and animations.

Author:
nejaa badr

1 year ago

2k
Pricing Plans

Author:
ariaw

2 months ago

200
Chat template
fullscreen chat template suitable for mobile devices

Author:
Manon Daniel

2 years ago

17.4k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components