Tailwind FAQ Sections

<!-- Toggle/Expandable FAQ (Simplified) -->
<div class="max-w-3xl mx-auto divide-y divide-gray-200">

  <!-- FAQ Item 1 -->
  <details class="group py-4">
    <summary class="flex justify-between items-center font-medium cursor-pointer list-none">
      <span class="text-gray-800">What payment methods do you accept?</span>
      <!-- Custom marker (optional, requires CSS in head/style file) -->
      <span class="marker text-gray-500">&gt;</span>
    </summary>
    <p class="text-gray-600 mt-3 text-sm">
      We accept all major credit cards (Visa, Mastercard, American Express), PayPal, and direct bank transfers for enterprise plans.
    </p>
  </details>

  <!-- FAQ Item 2 -->
  <details class="group py-4">
    <summary class="flex justify-between items-center font-medium cursor-pointer list-none">
      <span class="text-gray-800">Is there a free trial available?</span>
      <span class="marker text-gray-500">&gt;</span>
    </summary>
    <p class="text-gray-600 mt-3 text-sm">
      Yes, we offer a 14-day free trial for all our plans. No credit card is required to sign up for the trial. You can explore all features during this period.
    </p>
  </details>

  <!-- FAQ Item 3 -->
  <details class="group py-4">
    <summary class="flex justify-between items-center font-medium cursor-pointer list-none">
      <span class="text-gray-800">How can I contact support?</span>
      <span class="marker text-gray-500">&gt;</span>
    </summary>
    <p class="text-gray-600 mt-3 text-sm">
      You can reach our support team via email at support@example.com or through the contact form on our website. We typically respond within 24 hours on business days.
    </p>
  </details>

</div>

<!-- CSS for custom marker (add to your main CSS or <style> tag):
details > summary { list-style: none; }
details > summary::-webkit-details-marker { display: none; }
details > summary::marker { display: none; }
details summary .marker { display: inline-block; transition: transform 0.2s; margin-left: 0.5rem; }
details[open] summary .marker { transform: rotate(90deg); }
-->

<!-- Searchable FAQ -->
<div class="max-w-3xl mx-auto" id="searchable-faq-container"> <!-- Unique ID for container -->
  <!-- Search Input -->
  <div class="mb-6 relative">
    <input
      type="search"
      id="faq-search-input" <!-- Unique ID for input -->
      placeholder="Search FAQs..."
      class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500"
    />
    <!-- Search Icon -->
    <svg class="absolute right-3 top-1/2 transform -translate-y-1/2 h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
    </svg>
  </div>

  <!-- List of FAQ Items -->
  <div id="faq-list" class="space-y-4"> <!-- Unique ID for list -->

    <!-- FAQ Item 1 -->
    <div class="faq-item border rounded-lg p-4 bg-white shadow-sm"> <!-- Class for targeting -->
      <h3 class="faq-question font-medium text-gray-800">How do I reset my password?</h3>
      <p class="faq-answer text-gray-600 mt-2 text-sm">
        You can reset your password by clicking the "Forgot Password?" link on the login page. Enter your email address, and we'll send you instructions to create a new password.
      </p>
    </div>

    <!-- FAQ Item 2 -->
    <div class="faq-item border rounded-lg p-4 bg-white shadow-sm">
      <h3 class="faq-question font-medium text-gray-800">Where can I find my invoices?</h3>
      <p class="faq-answer text-gray-600 mt-2 text-sm">
        Your invoices are available in your account dashboard under the "Billing" section. You can view and download past invoices there.
      </p>
    </div>

    <!-- FAQ Item 3 -->
    <div class="faq-item border rounded-lg p-4 bg-white shadow-sm">
      <h3 class="faq-question font-medium text-gray-800">What is the refund policy?</h3>
      <p class="faq-answer text-gray-600 mt-2 text-sm">
        We offer a 30-day money-back guarantee on all our plans. If you're not satisfied, contact support within 30 days of your purchase for a full refund.
      </p>
    </div>

     <!-- FAQ Item 4 -->
    <div class="faq-item border rounded-lg p-4 bg-white shadow-sm">
      <h3 class="faq-question font-medium text-gray-800">Can I upgrade or downgrade my plan?</h3>
      <p class="faq-answer text-gray-600 mt-2 text-sm">
        Yes, you can change your plan at any time from your account settings. Upgrades are effective immediately, while downgrades take effect at the end of your current billing cycle. Any price difference for upgrades will be prorated.
      </p>
    </div>
    <!-- Add more .faq-item divs as needed -->

  </div>

  <!-- No Results Message -->
  <div id="faq-no-results" class="text-center text-gray-500 py-6 hidden"> <!-- Unique ID for message -->
    No matching FAQs found.
  </div>
</div>

<!-- JavaScript for Search Functionality (Place this script tag preferably before your closing </body> tag, or ensure it runs after the DOM is loaded) -->
<script>
  const faqSearchInput = document.getElementById('faq-search-input');
  // Ensure targeting is specific if you have multiple search FAQs on one page
  const faqContainer = document.getElementById('searchable-faq-container');
  const faqItems = faqContainer ? faqContainer.querySelectorAll('#faq-list .faq-item') : [];
  const noResultsMessage = faqContainer ? faqContainer.querySelector('#faq-no-results') : null;

  if (faqSearchInput && faqItems.length > 0 && noResultsMessage) {
    faqSearchInput.addEventListener('input', (e) => {
      const searchTerm = e.target.value.toLowerCase().trim();
      let resultsFound = false;

      faqItems.forEach(item => {
        // Check both question and answer text
        const question = item.querySelector('.faq-question')?.textContent.toLowerCase() || '';
        const answer = item.querySelector('.faq-answer')?.textContent.toLowerCase() || '';
        const isMatch = question.includes(searchTerm) || answer.includes(searchTerm);

        if (isMatch) {
          item.classList.remove('hidden');
          resultsFound = true;
        } else {
          item.classList.add('hidden');
        }
      });

      // Toggle the visibility of the 'no results' message
      noResultsMessage.classList.toggle('hidden', resultsFound);
    });
  } else {
      console.warn("Searchable FAQ elements ('#faq-search-input', '#faq-list .faq-item', '#faq-no-results' within '#searchable-faq-container') not found. Search functionality might be broken.");
  }
</script>

<!-- Categorized FAQ -->
<div class="max-w-4xl mx-auto space-y-8">

  <!-- Category 1: General Questions -->
  <div>
    <h3 class="text-lg font-semibold text-gray-800 mb-4 border-b pb-2">General Questions</h3>
    <div class="space-y-3">
      <!-- FAQ Item 1.1 -->
      <details class="group">
        <summary class="flex items-center justify-between font-medium cursor-pointer list-none">
          <span>What is Project X?</span>
          <span class="marker text-gray-500">&gt;</span> <!-- Optional marker -->
        </summary>
        <p class="text-gray-600 mt-2 text-sm">Project X is a revolutionary platform designed to streamline your workflow and boost productivity through advanced AI features.</p>
      </details>

      <!-- FAQ Item 1.2 -->
      <details class="group">
        <summary class="flex items-center justify-between font-medium cursor-pointer list-none">
          <span>Who is this platform for?</span>
           <span class="marker text-gray-500">&gt;</span>
        </summary>
        <p class="text-gray-600 mt-2 text-sm">It's designed for freelancers, small teams, and large enterprises looking to optimize their project management processes.</p>
      </details>
      <!-- Add more items to this category if needed -->
    </div>
  </div>

  <!-- Category 2: Billing & Plans -->
  <div>
    <h3 class="text-lg font-semibold text-gray-800 mb-4 border-b pb-2">Billing &amp; Plans</h3>
    <div class="space-y-3">
      <!-- FAQ Item 2.1 -->
      <details class="group">
        <summary class="flex items-center justify-between font-medium cursor-pointer list-none">
          <span>What are the available plans?</span>
           <span class="marker text-gray-500">&gt;</span>
        </summary>
        <p class="text-gray-600 mt-2 text-sm">We offer Free, Pro, and Enterprise plans. Detailed features for each plan can be found on our pricing page.</p>
      </details>

      <!-- FAQ Item 2.2 -->
      <details class="group">
        <summary class="flex items-center justify-between font-medium cursor-pointer list-none">
          <span>Can I change my plan later?</span>
           <span class="marker text-gray-500">&gt;</span>
        </summary>
        <p class="text-gray-600 mt-2 text-sm">Yes, you can upgrade or downgrade your plan at any time through your account settings.</p>
      </details>
      <!-- Add more items to this category if needed -->
    </div>
  </div>

  <!-- Category 3: Technical Support -->
  <div>
    <h3 class="text-lg font-semibold text-gray-800 mb-4 border-b pb-2">Technical Support</h3>
    <div class="space-y-3">
      <!-- FAQ Item 3.1 -->
      <details class="group">
        <summary class="flex items-center justify-between font-medium cursor-pointer list-none">
          <span>How do I get help?</span>
           <span class="marker text-gray-500">&gt;</span>
        </summary>
        <p class="text-gray-600 mt-2 text-sm">Our support team is available via email and live chat during business hours. Pro and Enterprise users have priority support.</p>
      </details>
      <!-- Add more items to this category if needed -->
    </div>
  </div>
  <!-- Add more categories as needed -->

</div>

<!-- Optional CSS for marker (add to your main CSS or <style> tag):
details > summary { list-style: none; }
details > summary::-webkit-details-marker { display: none; }
details > summary::marker { display: none; }
details summary .marker { display: inline-block; transition: transform 0.2s; margin-left: 0.5rem; }
details[open] summary .marker { transform: rotate(90deg); }
-->

<!-- Grid Layout FAQ -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">

  <!-- FAQ Item 1 -->
  <div class="border rounded-lg p-4 bg-white shadow-sm">
    <h3 class="font-semibold text-gray-800 mb-2">What is the setup process?</h3>
    <p class="text-gray-600 text-sm">Sign up, connect your accounts, and follow the onboarding guide. It usually takes less than 10 minutes.</p>
  </div>

  <!-- FAQ Item 2 -->
  <div class="border rounded-lg p-4 bg-white shadow-sm">
    <h3 class="font-semibold text-gray-800 mb-2">Do you offer integrations?</h3>
    <p class="text-gray-600 text-sm">Yes, we integrate with popular tools like Slack, Google Workspace, Zapier, and more. Check our integrations page for a full list.</p>
  </div>

  <!-- FAQ Item 3 -->
  <div class="border rounded-lg p-4 bg-white shadow-sm">
    <h3 class="font-semibold text-gray-800 mb-2">Is my data secure?</h3>
    <p class="text-gray-600 text-sm">Data security is our top priority. We use industry-standard encryption and security practices. See our security page for details.</p>
  </div>

  <!-- FAQ Item 4 -->
  <div class="border rounded-lg p-4 bg-white shadow-sm">
    <h3 class="font-semibold text-gray-800 mb-2">What if I need more features?</h3>
    <p class="text-gray-600 text-sm">Our Enterprise plan offers custom solutions and dedicated support. Contact sales to discuss your specific requirements.</p>
  </div>

  <!-- FAQ Item 5 -->
  <div class="border rounded-lg p-4 bg-white shadow-sm">
    <h3 class="font-semibold text-gray-800 mb-2">Where are you based?</h3>
    <p class="text-gray-600 text-sm">Our team is fully remote, with members distributed across various time zones to provide timely support.</p>
  </div>

  <!-- FAQ Item 6 -->
  <div class="border rounded-lg p-4 bg-white shadow-sm">
    <h3 class="font-semibold text-gray-800 mb-2">How often are updates released?</h3>
    <p class="text-gray-600 text-sm">We release minor updates and bug fixes weekly, with major feature updates rolled out quarterly.</p>
  </div>

  <!-- Add more items as needed -->

</div>

<!-- List Layout FAQ -->
<div class="max-w-3xl mx-auto space-y-6">

  <!-- FAQ Item 1 -->
  <div class="border-l-4 border-blue-500 pl-4"> <!-- Example using left border -->
    <h3 class="font-medium text-gray-800">What technologies are used?</h3>
    <p class="text-gray-600 mt-1 text-sm">Our platform is built primarily with React, Node.js, and PostgreSQL, hosted on AWS infrastructure.</p>
  </div>

  <!-- FAQ Item 2 -->
  <div class="border-l-4 border-blue-500 pl-4">
    <h3 class="font-medium text-gray-800">Is there an API available?</h3>
    <p class="text-gray-600 mt-1 text-sm">Yes, a comprehensive REST API is available for Pro and Enterprise customers. Documentation can be found in the developer portal.</p>
  </div>

  <!-- FAQ Item 3 -->
  <div class="border-l-4 border-blue-500 pl-4">
    <h3 class="font-medium text-gray-800">How does the pricing work?</h3>
    <p class="text-gray-600 mt-1 text-sm">Pricing is based on the number of users and selected features. We offer monthly and annual billing options, with discounts for annual commitments.</p>
  </div>

  <!-- FAQ Item 4 -->
  <div class="border-l-4 border-blue-500 pl-4">
    <h3 class="font-medium text-gray-800">Can I get a demo?</h3>
    <p class="text-gray-600 mt-1 text-sm">Absolutely! Please schedule a personalized demo through our website, and one of our specialists will walk you through the platform.</p>
  </div>

  <!-- Add more items as needed -->

</div>

<!-- Split Layout FAQ -->
<div class="flex flex-col md:flex-row gap-8 max-w-6xl mx-auto">

  <!-- Left Column: Category/Topic Links -->
  <div class="w-full md:w-1/3 lg:w-1/4">
    <h3 class="text-lg font-semibold text-gray-800 mb-4">Topics</h3>
    <nav class="space-y-2">
      <!-- Use href="#your-section-id" to link to content -->
      <!-- Add classes to style the active link (can be done with JS) -->
      <a href="#faq-split-getting-started" class="faq-nav-link block text-blue-600 hover:underline font-medium" data-target-section="faq-split-getting-started">Getting Started</a>
      <a href="#faq-split-account" class="faq-nav-link block text-gray-600 hover:underline" data-target-section="faq-split-account">Account Management</a>
      <a href="#faq-split-features" class="faq-nav-link block text-gray-600 hover:underline" data-target-section="faq-split-features">Features</a>
      <a href="#faq-split-troubleshooting" class="faq-nav-link block text-gray-600 hover:underline" data-target-section="faq-split-troubleshooting">Troubleshooting</a>
    </nav>
  </div>

  <!-- Right Column: Questions & Answers -->
  <div class="w-full md:w-2/3 lg:w-3/4 space-y-8">

    <!-- Section 1: Getting Started -->
    <div id="faq-split-getting-started" class="faq-content-section">
      <h4 class="text-xl font-semibold text-gray-800 mb-4">Getting Started</h4>
      <div class="space-y-4">
        <details class="group">
          <summary class="font-medium cursor-pointer list-none">How do I sign up?</summary>
          <p class="text-gray-600 text-sm mt-2">Click the 'Sign Up' button in the top right corner and follow the prompts. You'll need to provide an email and create a password.</p>
        </details>
        <details class="group">
          <summary class="font-medium cursor-pointer list-none">Is there an onboarding tutorial?</summary>
          <p class="text-gray-600 text-sm mt-2">Yes, upon your first login, you'll be guided through a brief interactive tutorial covering the main features.</p>
        </details>
      </div>
    </div>

    <!-- Section 2: Account Management -->
    <div id="faq-split-account" class="faq-content-section">
      <h4 class="text-xl font-semibold text-gray-800 mb-4">Account Management</h4>
      <div class="space-y-4">
        <details class="group">
          <summary class="font-medium cursor-pointer list-none">How do I update my email address?</summary>
          <p class="text-gray-600 text-sm mt-2">Go to Account Settings > Profile, and you'll find the option to change your registered email address.</p>
        </details>
        <details class="group">
          <summary class="font-medium cursor-pointer list-none">How do I cancel my subscription?</summary>
          <p class="text-gray-600 text-sm mt-2">Visit the Billing section in your Account Settings. You'll find the option to cancel your subscription there. Cancellations take effect at the end of the current billing period.</p>
        </details>
      </div>
    </div>

    <!-- Section 3: Features -->
    <div id="faq-split-features" class="faq-content-section">
      <h4 class="text-xl font-semibold text-gray-800 mb-4">Features</h4>
      <div class="space-y-4">
        <details class="group">
          <summary class="font-medium cursor-pointer list-none">Can I collaborate with my team?</summary>
          <p class="text-gray-600 text-sm mt-2">Yes, our Pro and Enterprise plans include team collaboration features like shared workspaces and user roles.</p>
        </details>
      </div>
    </div>

    <!-- Section 4: Troubleshooting -->
    <div id="faq-split-troubleshooting" class="faq-content-section">
      <h4 class="text-xl font-semibold text-gray-800 mb-4">Troubleshooting</h4>
      <div class="space-y-4">
        <details class="group">
          <summary class="font-medium cursor-pointer list-none">The application is loading slowly, what can I do?</summary>
          <p class="text-gray-600 text-sm mt-2">Try clearing your browser cache and cookies. Ensure you have a stable internet connection. If the problem persists, please contact support.</p>
        </details>
      </div>
    </div>
    <!-- Add more sections as needed -->
  </div>
</div>

<!-- Optional JavaScript for Nav Link Highlighting -->
<script>
  document.addEventListener('DOMContentLoaded', () => {
    // Use more specific selectors if needed to avoid conflicts
    const splitFaqContainer = document.querySelector('#preview-split') || document.body; // Adjust container if needed
    const navLinks = splitFaqContainer.querySelectorAll('.faq-nav-link');

    if(navLinks.length > 0) {
        navLinks.forEach(link => {
            link.addEventListener('click', function(e) {
                // Basic smooth scroll (browser native)
                const targetId = this.getAttribute('href');
                const targetElement = splitFaqContainer.querySelector(targetId);
                if(targetElement) {
                   // Optional: prevent default jump and scroll smoothly
                   // e.preventDefault();
                   // targetElement.scrollIntoView({ behavior: 'smooth', block: 'start' });
                }

                // Update link styles
                navLinks.forEach(l => {
                    l.classList.remove('text-blue-600', 'font-medium');
                    l.classList.add('text-gray-600');
                });
                this.classList.add('text-blue-600', 'font-medium');
                this.classList.remove('text-gray-600');
            });
        });

        // Add Intersection Observer logic here for scroll-based highlighting if desired
    }
  });
</script>

<!-- Icon + Text FAQ -->
<div class="max-w-3xl mx-auto space-y-5">

  <!-- FAQ Item 1 -->
  <details class="group">
    <summary class="flex items-center gap-3 cursor-pointer list-none">
      <!-- Question Icon (Heroicon: question-mark-circle) -->
      <svg class="w-5 h-5 text-blue-500 shrink-0" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" d="M9.879 7.519c1.171-1.025 3.071-1.025 4.242 0 1.172 1.025 1.172 2.687 0 3.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45 1.827v.75M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9 5.25h.008v.008H12v-.008z" />
      </svg>
      <span class="font-medium text-gray-800">How does the trial work?</span>
    </summary>
    <p class="text-gray-600 mt-2 pl-8 text-sm"> <!-- Adjust pl-* based on icon size + gap -->
      The 14-day free trial gives you full access to the Pro plan features. After the trial ends, you can choose to upgrade or your account will be automatically moved to the Free plan with limited features.
    </p>
  </details>

  <!-- FAQ Item 2 -->
  <details class="group">
    <summary class="flex items-center gap-3 cursor-pointer list-none">
      <!-- Security Icon (Heroicon: shield-check) -->
      <svg class="w-5 h-5 text-green-500 shrink-0" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" >
          <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75m-3-7.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285z" />
      </svg>
      <span class="font-medium text-gray-800">Is my payment information secure?</span>
    </summary>
    <p class="text-gray-600 mt-2 pl-8 text-sm">
      Yes, we use Stripe, a certified PCI Service Provider Level 1, to handle all payment processing. We do not store your credit card details on our servers.
    </p>
  </details>

  <!-- FAQ Item 3 -->
  <details class="group">
      <summary class="flex items-center gap-3 cursor-pointer list-none">
          <!-- Support Icon (Heroicon: information-circle) -->
          <svg class="w-5 h-5 text-red-500 shrink-0" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
             <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z" />
          </svg>
         <span class="font-medium text-gray-800">What if I encounter a bug?</span>
     </summary>
     <p class="text-gray-600 mt-2 pl-8 text-sm">
         Please report any bugs through our support channel or the feedback form within the application. Include steps to reproduce the issue, and we'll investigate promptly.
     </p>
  </details>

  <!-- Add more items as needed, choosing appropriate icons -->

</div>
<!-- Consider using an icon library like Heroicons (https://heroicons.com/) for consistency -->