Component:

Faq Business Modern

Name: Faq Business Modern
Availability: InStock

Free

Tailwind

React

Vue

Svelte

Astro

HTML / CSS

Tags: FAQ Content Sale Support Business Modern

Colors:

Description:

This carefully crafted FAQ component is perfect for Business landing pages, featuring a Modern design that looks great and converts well.

Simply copy the code with the "Copy" button, paste it into your project and customize the colors, text and images to match your brand.


                <!--
@type: FAQ
@industry: Business
@style: Modern
@category: Content, Sale, Support
@framework: HTML/CSS
@license: Free
-->

<style>
  :root {
    --slate-50: #f8fafc;
    --slate-200: #e2e8f0;
    --slate-500: #64748b;
    --slate-600: #475569;
    --slate-900: #0f172a;
  }
  
  /* Reset */
  * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  }
  
  /* Component styles */
  .faq-section {
    background-color: var(--slate-50);
    padding: 4rem 1rem;
  }
  
  
  .faq-wrapper {
    max-width: 48rem; /* max-w-3xl */
    margin-left: auto;
    margin-right: auto;
  }
  
  .faq-title {
    font-size: 1.5rem;
    line-height: 2rem;
    font-weight: 700;
    color: var(--slate-900);
    margin-bottom: 2rem;
    text-align: center;
  }
  
  .faq-items {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
  }
  
  .faq-item {
    border-bottom: 1px solid var(--slate-200);
    padding-bottom: 1.5rem;
  }
  
  .faq-item:last-child {
    border-bottom: none;
    padding-bottom: 0.5rem;
  }
  
  .faq-button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
  }
  
  .faq-button:focus {
    outline: none;
  }
  
  .faq-question {
    font-size: 1.125rem;
    line-height: 1.75rem;
    font-weight: 500;
    color: var(--slate-900);
  }
  
  .faq-icon {
    height: 1.25rem;
    width: 1.25rem;
    color: var(--slate-500);
    transition: transform 0.2s ease;
  }
  
  .faq-content {
    margin-top: 0.75rem;
    display: none;
  }
  
  .faq-answer {
    color: var(--slate-600);
  }
  
  /* Responsive breakpoints */
  @media (min-width: 768px) {
    .faq-section {
      padding: 6rem 1.5rem;
    }
  }
  </style>
  
  <section class="faq-section">
    <div>
      <div class="faq-wrapper">
        <h3 class="faq-title">Frequently asked questions</h3>
        <div class="faq-items">
          <!-- FAQ Item 1 -->
          <div class="faq-item">
            <button class="faq-button" aria-expanded="false" aria-controls="faq-1">
              <h4 class="faq-question">Can I change plans later?</h4>
              <svg class="faq-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
              </svg>
            </button>
            <div id="faq-1" class="faq-content">
              <p class="faq-answer">Yes, you can upgrade or downgrade your plan at any time. When you upgrade, you'll be charged the prorated amount for the remainder of your billing cycle. When you downgrade, the new rate will apply to your next billing cycle.</p>
            </div>
          </div>
          
          <!-- FAQ Item 2 -->
          <div class="faq-item">
            <button class="faq-button" aria-expanded="false" aria-controls="faq-2">
              <h4 class="faq-question">What payment methods do you accept?</h4>
              <svg class="faq-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
              </svg>
            </button>
            <div id="faq-2" class="faq-content">
              <p class="faq-answer">We accept all major credit cards (Visa, Mastercard, American Express), PayPal, and bank transfers for annual plans. We don't store your payment information on our servers—we use a secure payment processor.</p>
            </div>
          </div>
          
          <!-- FAQ Item 3 -->
          <div class="faq-item">
            <button class="faq-button" aria-expanded="false" aria-controls="faq-3">
              <h4 class="faq-question">Do you offer a free trial?</h4>
              <svg class="faq-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
              </svg>
            </button>
            <div id="faq-3" class="faq-content">
              <p class="faq-answer">Yes, we offer a 14-day free trial on all plans. No credit card is required to start your trial. You can upgrade to a paid plan at any time during your trial period.</p>
            </div>
          </div>
          
          <!-- FAQ Item 4 -->
          <div class="faq-item">
            <button class="faq-button" aria-expanded="false" aria-controls="faq-4">
              <h4 class="faq-question">What's your refund policy?</h4>
              <svg class="faq-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
              </svg>
            </button>
            <div id="faq-4" class="faq-content">
              <p class="faq-answer">We offer a 30-day money-back guarantee. If you're not satisfied with our product, you can request a full refund within 30 days of your purchase. To request a refund, please contact our support team.</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  
    <script>
      // FAQ accordion functionality
      document.querySelectorAll('.faq-button').forEach(button => {
        button.addEventListener('click', () => {
          const content = document.getElementById(button.getAttribute('aria-controls'));
          const isExpanded = button.getAttribute('aria-expanded') === 'true';
          
          button.setAttribute('aria-expanded', !isExpanded);
          content.style.display = !isExpanded ? 'block' : 'none';
          
          // Rotate the icon
          const icon = button.querySelector('svg');
          icon.style.transform = !isExpanded ? 'rotate(180deg)' : '';
        });
      });
    </script>
  </section>


                <!--
@type: FAQ
@industry: Business
@style: Modern
@category: Content, Sale, Support
@framework: Tailwind
@license: Free
-->

<section class="bg-slate-50 py-16 md:py-24">
  <div class="container mx-auto px-4 md:px-6 lg:px-8 max-w-7xl">
    <div class="max-w-3xl mx-auto">
      <h3 class="text-2xl font-bold text-slate-900 mb-8 text-center">Frequently asked questions</h3>
      <div class="space-y-6">
        <!-- FAQ Item 1 -->
        <div class="border-b border-slate-200 pb-6">
          <button class="flex items-center justify-between w-full text-left focus:outline-none" aria-expanded="false" aria-controls="faq-1">
            <h4 class="text-lg font-medium text-slate-900">Can I change plans later?</h4>
            <svg class="h-5 w-5 text-slate-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
              <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
            </svg>
          </button>
          <div id="faq-1" class="mt-3 hidden">
            <p class="text-slate-600">Yes, you can upgrade or downgrade your plan at any time. When you upgrade, you'll be charged the prorated amount for the remainder of your billing cycle. When you downgrade, the new rate will apply to your next billing cycle.</p>
          </div>
        </div>
        
        <!-- FAQ Item 2 -->
        <div class="border-b border-slate-200 pb-6">
          <button class="flex items-center justify-between w-full text-left focus:outline-none" aria-expanded="false" aria-controls="faq-2">
            <h4 class="text-lg font-medium text-slate-900">What payment methods do you accept?</h4>
            <svg class="h-5 w-5 text-slate-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
              <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
            </svg>
          </button>
          <div id="faq-2" class="mt-3 hidden">
            <p class="text-slate-600">We accept all major credit cards (Visa, Mastercard, American Express), PayPal, and bank transfers for annual plans. We don't store your payment information on our servers—we use a secure payment processor.</p>
          </div>
        </div>
        
        <!-- FAQ Item 3 -->
        <div class="border-b border-slate-200 pb-6">
          <button class="flex items-center justify-between w-full text-left focus:outline-none" aria-expanded="false" aria-controls="faq-3">
            <h4 class="text-lg font-medium text-slate-900">Do you offer a free trial?</h4>
            <svg class="h-5 w-5 text-slate-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
              <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
            </svg>
          </button>
          <div id="faq-3" class="mt-3 hidden">
            <p class="text-slate-600">Yes, we offer a 14-day free trial on all plans. No credit card is required to start your trial. You can upgrade to a paid plan at any time during your trial period.</p>
          </div>
        </div>
        
        <!-- FAQ Item 4 -->
        <div class="pb-2">
          <button class="flex items-center justify-between w-full text-left focus:outline-none" aria-expanded="false" aria-controls="faq-4">
            <h4 class="text-lg font-medium text-slate-900">What's your refund policy?</h4>
            <svg class="h-5 w-5 text-slate-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
              <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
            </svg>
          </button>
          <div id="faq-4" class="mt-3 hidden">
            <p class="text-slate-600">We offer a 30-day money-back guarantee. If you're not satisfied with our product, you can request a full refund within 30 days of your purchase. To request a refund, please contact our support team.</p>
          </div>
        </div>
      </div>
    </div>
  </div>

  <script>
    // FAQ accordion functionality
    document.querySelectorAll('[aria-controls^="faq-"]').forEach(button => {
      button.addEventListener('click', () => {
        const content = document.getElementById(button.getAttribute('aria-controls'));
        const isExpanded = button.getAttribute('aria-expanded') === 'true';
        
        button.setAttribute('aria-expanded', !isExpanded);
        content.classList.toggle('hidden');
        
        // Rotate the icon
        const icon = button.querySelector('svg');
        icon.style.transform = !isExpanded ? 'rotate(180deg)' : '';
        icon.style.transition = 'transform 0.2s ease';
      });
    });
  </script>
</section>

Faq Business Modern

This is a Pro component

Access the full component collection

Premium components

Save components

Unlimited usage

Landing page submissions