Tailwind FAQ Components (219)

Framework

UI Library

Components

FAQ from Saturn

Tailwind CSS

Saturn

<section class="relative py-20 overflow-hidden bg-gray-50">
  <img class="absolute top-0 left-0 mt-44" src="saturn-assets/images/faq/light-blue-left.png" alt="">
  <img class="absolute top-0 right-0 mt-10" src="saturn-assets/images/faq/star-right.svg" alt="">
  <div class="relative container px-4 mx-auto">
    <div class="max-w-5xl mx-auto">
      <div class="text-center mb-24">
        <span class="inline-block py-1 px-3 mb-4 text-xs font-semibold text-orange-900 bg-orange-50 rounded-full">FREQUENTLY ASK QUESTION</span>
        <h1 class="font-heading text-5xl xs:text-6xl md:text-7xl font-bold text-gray-900">
          <span>You ask? We</span>
          <span class="font-serif italic">answer</span>
        </h1>
      </div>
      <div class="pt-18 sm:pt-24 px-8 sm:px-20 pb-18 bg-white rounded-4xl shadow-lg">
        <div x-data="{ accordion: false }" x-on:click="accordion = !accordion" class="flex cursor-pointer mb-8 pb-8 group w-full items-start justify-between border-b border-gray-100 text-left">
            <div class="max-w-xl pr-5">
                <h3 class="text-xl font-semibold" :class="accordion ? 'text-orange-900' : 'text-black'">Do you provide a complete design style?</h3>
                <div x-ref="container" :style="accordion ? 'height: ' + $refs.container.scrollHeight + 'px' : ''" class="overflow-hidden h-0 duration-500">
                    <p class="text-lg text-gray-500 mt-3">Pretium ac auctor quis urna orci feugiat. Vulputate tellus velit tellus orci auctor vel nulla facilisi ut. Ante nunc risus viverra vivamus. Eros amet at lectus ac ac nibh dignissim.</p>
                </div>
            </div>
          <div class="pt-1">
            <span :class="{ 'hidden': !accordion }" class="hidden relative top-3">
              <svg width="17" height="3" viewBox="0 0 17 3" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M15.4619 0.045166H1.46194C1.19673 0.045166 0.942374 0.150523 0.754838 0.338059C0.567302 0.525596 0.461945 0.77995 0.461945 1.04517C0.461945 1.31038 0.567302 1.56474 0.754838 1.75227C0.942374 1.93981 1.19673 2.04517 1.46194 2.04517H15.4619C15.7272 2.04517 15.9815 1.93981 16.1691 1.75227C16.3566 1.56474 16.4619 1.31038 16.4619 1.04517C16.4619 0.77995 16.3566 0.525596 16.1691 0.338059C15.9815 0.150523 15.7272 0.045166 15.4619 0.045166Z" fill="#FF460C"></path>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

FAQ Section with Accordion Questions and Serif Italic Heading

A light-background FAQ section with an orange eyebrow badge, a large heading with an italic serif accent word, and a white card listing six expandable questions, each marked with a plus icon and divided by thin rules.

FAQ from DarkPro

Tailwind CSS

DarkPro

<section class="py-20 bg-gradient-to-r from-neutral-950 via-neutral-900 to-neutral-950" x-data="{ tab: 'general' }">
  <div class="container px-4 mx-auto">
    <div class="max-w-lg lg:max-w-2xl mx-auto mb-12 text-center">
      <span class="text-sm text-neutral-300 font-medium">Frequently Asked Questions</span>
      <h2 class="mt-4 text-3xl md:text-4xl lg:text-5xl leading-tight font-medium text-transparent bg-clip-text bg-gradient-to-r from-gray-100 via-gray-200 to-gray-300">Lorem ipsum dolor sit amet consectutar domor</h2>
    </div>
    <div class="text-center mb-2 md:mb-4">
      <button x-on:click="tab='general'" class="text-lg pb-2 mb-4 md:mb-0 mr-4 lg:mr-12 border-b-4 transition-colors duration-200" :class="{ 'border-white text-white': tab=='general', 'border-transparent text-neutral-400 hover:border-neutral-400': tab!='general' }">General</button>
      <button x-on:click="tab='payments'" class="text-lg pb-2 mb-4 md:mb-0 mr-4 lg:mr-12 border-b-4 transition-colors duration-200" :class="{ 'border-white text-white': tab=='payments', 'border-transparent text-neutral-400 hover:border-neutral-400': tab!='payments' }">Payments</button>
      <button x-on:click="tab='returns'" class="text-lg pb-2 mb-4 md:mb-0 mr-4 lg:mr-12 border-b-4 transition-colors duration-200" :class="{ 'border-white text-white': tab=='returns', 'border-transparent text-neutral-400 hover:border-neutral-400': tab!='returns' }">Returns</button>
      <button x-on:click="tab='refunds'" class="text-lg pb-2 border-b-4 transition-colors duration-200" :class="{ 'border-white text-white': tab=='refunds', 'border-transparent text-neutral-400 hover:border-neutral-400': tab!='refunds' }">Refunds</button>
    </div>
    <div class="relative max-w-2xl mx-auto">
      <div class="absolute inset-0 opacity-10 bg-gradient-to-r from-purple-950 via-purple-900 to-purple-950 rounded-full filter blur-3xl"></div>
      <ul class="relative">
        <li class="px-6 py-8 border-b border-neutral-800" x-data="{ accordion: false }">
          <button class="group w-full flex justify-between items-center text-left" x-on:click="accordion = !accordion">
            <span class="group-hover:text-white text-lg font-medium text-transparent bg-clip-text bg-gradient-to-r from-gray-100 via-gray-200 to-gray-300 transition-all duration-200">Fusce eget nunc et libero accumsan rutrum quis nec lectus?</span>
            <span :class="{'rotate-180': accordion, 'rotate-0': !accordion }" class="inline-block transform transition-transform duration-200">
                <svg class="flex-shrink-0 w-4 h-4 ml-2 text-white" 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="M19 9l-7 7-7-7"></path>
                </svg>
            </span>
          </button>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Dark FAQ Section with Category Tabs and Accordion Questions

A centered dark-themed FAQ section with a small eyebrow label, large heading, category tabs (General, Payments, Returns, Refunds), and a vertical list of expandable questions with chevron indicators separated by thin dividers.

FAQ from Flaro

Tailwind CSS

Flaro

<section class="relative pt-24 pb-28 bg-blueGray-50 overflow-hidden">
  <img class="absolute bottom-0 left-1/2 transform -translate-x-1/2" src="flaro-assets/images/faqs/gradient.svg" alt="">
  <div class="relative z-10 container px-4 mx-auto">
    <div class="md:max-w-4xl mx-auto">
      <p class="mb-7 text-sm text-indigo-600 text-center font-semibold uppercase tracking-px">Have any questions?</p>
      <h2 class="mb-16 text-6xl md:text-8xl xl:text-10xl text-center font-bold font-heading tracking-px-n leading-none">Frequently Asked Questions</h2>
      <div class="mb-11 flex flex-wrap -m-1">
        <div class="w-full p-1">
          <a x-data="{ accordion: false }" x-on:click.prevent="accordion = !accordion" href="#">
            <div :class="{ 'border-indigo-600': accordion }" class="py-7 px-8 bg-white bg-opacity-60 border-2 border-gray-200 rounded-2xl shadow-10xl">
              <div class="flex flex-wrap justify-between -m-2">
                <div class="flex-1 p-2">
                  <h3 class="text-lg font-semibold leading-normal">Do you provide any free plan?</h3>
                  <div x-ref="container" :style="accordion ? 'height: ' + $refs.container.scrollHeight + 'px' : ''" class="overflow-hidden h-0 duration-500">
                    <p class="mt-4 text-gray-600 font-medium">Lorem ipsum dolor sit amet, to the consectr adipiscing elit. Volutpat tempor to the condi mentum vitae vel purus.</p>
                  </div>
                </div>
                <div class="w-auto p-2">
                  <div :class="{ 'hidden': accordion }">
                    <svg class="relative top-1" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M14.25 6.75L9 12L3.75 6.75" stroke="#18181B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                    </svg>
                  </div>
                  <div :class="{ 'hidden': !accordion }" class="hidden">

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Centered FAQ Section with Accordion Questions

A centered FAQ section with an eyebrow label, large bold heading, and four stacked expandable question rows with chevron indicators. A small contact prompt with a purple link sits below the list.

FAQ from Gradia

Tailwind CSS

Gradia

<section class="pt-24 pb-36 overflow-hidden">
  <div class="container mx-auto px-4">
    <h2 class="mb-14 font-heading font-semibold text-center text-6xl sm:text-7xl text-gray-900" >Frequently asked question</h2>
    <div class="max-w-2xl mx-auto bg-gradient-cyan p-0.5">
      <div class="flex flex-wrap">
        <div class="w-full">
          <a x-data="{ accordion: false }" x-on:click.prevent="accordion = !accordion" href="#">
            <div class="pb-0.5 bg-gradient-cyan">
              <div class="py-3.5 px-5 bg-white">
                <div class="flex flex-wrap justify-between -m-2">
                  <div class="flex-1 p-2">
                    <p class="font-heading font-semibold text-lg text-gray-900" >Is it really unlimited downloads?</p>
                    <div x-ref="container" :style="accordion ? 'height: ' + $refs.container.scrollHeight + 'px' : ''" class="visibility-item overflow-hidden h-0 duration-500">
                      <p class="mt-5 text-base text-black" >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sagittis euismod ornare aenean ut justo elit amet. Gravida pulvinar ac elementum praesent vel quis accumsan, proin rhoncus.</p>
                    </div>
                  </div>
                  <div class="w-auto p-2">
                    <div :class="{ 'hidden': accordion }" class="pt-1">
                      <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M10.5 3.75L15.75 9M15.75 9L10.5 14.25M15.75 9L2.25 9" stroke="#111827" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                      </svg>
                    </div>
                    <div :class="{ 'hidden': !accordion }" class="hidden p-1">
                      <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

FAQ List with Gradient Borders and Arrow Icons

A centered FAQ section with a bold heading above a vertical stack of five question rows, each separated by thin gradient-outlined dividers and marked with a right arrow icon. The layout is minimal with a white background and uses a teal-to-blue-to-orange gradient border.

FAQ from Solstice

Tailwind CSS

Solstice

<section class="py-24" x-data="{ tab: '' }" x-init="tab = $refs.tab1.textContent">
  <div class="container mx-auto px-4">
    <h1 class="uppercase text-4xl lg:text-6xl font-bold font-heading text-center mb-4">FAQ</h1>
    <p class="text-center text-lg text-gray-500 mb-16">Here you will find the answers to the frequently asked questions.</p>
    <div class="flex justify-center flex-wrap gap-6 mb-10">
      <a x-ref="tab1" x-on:click.prevent="tab = $refs.tab1.textContent" :class="{ 'bg-orange-500 border border-orange-600 text-white hover:bg-orange-600 focus:ring focus:ring-orange-200': tab == $refs.tab1.textContent, 'bg-white border border-gray-200 hover:bg-gray-50 focus:ring focus:ring-orange-200': tab != $refs.tab1.textContent }" class="h-14 inline-flex items-center justify-center w-full sm:w-auto text-center py-4 px-6 rounded-full bg-orange-500 border border-orange-600 shadow font-bold font-heading text-white hover:bg-orange-600 focus:ring focus:ring-orange-200 transition duration-200" href="#">General</a>
      <a x-ref="tab2" x-on:click.prevent="tab = $refs.tab2.textContent" :class="{ 'bg-orange-500 border border-orange-600 text-white hover:bg-orange-600 focus:ring focus:ring-orange-200': tab == $refs.tab2.textContent, 'bg-white border border-gray-200 hover:bg-gray-50 focus:ring focus:ring-orange-200': tab != $refs.tab2.textContent }" class="h-14 inline-flex items-center justify-center w-full sm:w-auto text-center py-4 px-6 rounded-full bg-white border border-gray-200 shadow font-bold font-heading hover:bg-gray-50 focus:ring focus:ring-orange-200 transition duration-200" href="#">Community</a>
      <a x-ref="tab3" x-on:click.prevent="tab = $refs.tab3.textContent" :class="{ 'bg-orange-500 border border-orange-600 text-white hover:bg-orange-600 focus:ring focus:ring-orange-200': tab == $refs.tab3.textContent, 'bg-white border border-gray-200 hover:bg-gray-50 focus:ring focus:ring-orange-200': tab != $refs.tab3.textContent }" class="h-14 inline-flex items-center justify-center w-full sm:w-auto text-center py-4 px-6 rounded-full bg-white border border-gray-200 shadow font-bold font-heading hover:bg-gray-50 focus:ring focus:ring-orange-200 transition duration-200" href="#">Pricing</a>
    </div>
    <div x-data="{ accordion: false }" x-on:click="accordion = !accordion" class="border border-gray-100 rounded-3xl mb-3 p-6 cursor-pointer">
      <div class="flex items-center justify-between gap-6">
        <h2 class="text-lg font-semibold">What is Solstice? What is it for?</h2>
        <a class="text-orange-500 hover:text-orange-600 transition duration-200 w-8 h-8" href="#">
          <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" fill="none">
            <path fill-rule="evenodd" clip-rule="evenodd" d="M16 2.66669C8.63586 2.66669 2.66663 8.63592 2.66663 16C2.66663 23.3641 8.63586 29.3334 16 29.3334C23.3641 29.3334 29.3333 23.3641 29.3333 16C29.3333 8.63592 23.3641 2.66669 16 2.66669ZM17.0256 11.8975C17.0256 11.6254 16.9175 11.3646 16.7252 11.1722C16.5329 10.9799 16.272 10.8718 16 10.8718C15.7279 10.8718 15.4671 10.9799 15.2747 11.1722C15.0824 11.3646 14.9743 11.6254 14.9743 11.8975V14.9744H11.8974C11.6254 14.9744 11.3645 15.0824 11.1722 15.2748C10.9798 15.4671 10.8718 15.728 10.8718 16C10.8718 16.272 10.9798 16.5329 11.1722 16.7253C11.3645 16.9176 11.6254 17.0257 11.8974 17.0257H14.9743V20.1026C14.9743 20.3746 15.0824 20.6355 15.2747 20.8278C15.4671 21.0202 15.7279 21.1282 16 21.1282C16.272 21.1282 16.5329 21.0202 16.7252 20.8278C16.9175 20.6355 17.0256 20.3746 17.0256 20.1026V17.0257H20.1025C20.3745 17.0257 20.6354 16.9176 20.8278 16.7253C21.0201 16.5329 21.1282 16.272 21.1282 16C21.1282 15.728 21.0201 15.4671 20.8278 15.2748C20.6354 15.0824 20.3745 14.9744 20.1025 14.9744H17.0256V11.8975Z" fill="currentColor"></path>
          </svg>
        </a>
      </div>
      <div x-ref="container" :style="accordion ? 'height: ' + $refs.container.scrollHeight + 'px' : ''" class="overflow-hidden h-0 duration-500">
        <p class="mt-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et tincidunt est. Duis odio eros, mattis id elit vitae, molestie tempus massa. Vestibulum varius risus quis erat egestas, et tincidunt metus vestibulum.</p>
      </div>
    </div>
    <div x-data="{ accordion: false }" x-on:click="accordion = !accordion" class="border border-gray-100 rounded-3xl mb-3 p-6 cursor-pointer">
      <div class="flex items-center justify-between gap-6">

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

FAQ Section with Category Tabs and Expandable Questions

A light-themed FAQ section with a centered heading and subtitle, followed by pill-shaped category tabs (General, Community, Pricing) and a vertical list of expandable question rows with orange plus icons. The layout is centered and stacked, with rounded outlined rows.

FAQ from Basko

Tailwind CSS

Basko

<section class="py-24 lg:py-32 bg-white overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap -m-8">
      <div class="w-full md:w-1/2 p-8">
        <span class="inline-block max-w-max mb-6 px-3 py-1.5 text-sm text-white uppercase tracking-tight font-semibold bg-gray-600 rounded-full" style="background: url('basko-assets/images/gradient.png'); background-repeat: no-repeat; background-size: cover;">Try some freebie</span>
        <h2 class="font-heading text-6xl tracking-tighter">Provide some additional information with this FAQ Accordion.</h2>
      </div>
      <div class="w-full md:w-1/2 p-8">
        <div class="flex flex-wrap -m-1.5">
          <div class="w-full p-1.5">
            <div x-data="{ accordion: false }" x-on:click="accordion = !accordion" class="cursor-pointer block p-6 border border-gray-200 hover:border-gray-300 rounded-lg transition duration-200">
              <div class="flex flex-wrap items-center justify-between -m-2">
                <div class="w-auto p-2">
                  <h3 class="font-semibold tracking-tight">How many items are there in this list?</h3>
                </div>
                <div class="w-auto p-2">
                    <span :class="{'rotate-90': accordion, 'rotate-0': !accordion }" class="inline-block transform">
                        <svg width="9" height="14" viewBox="0 0 9 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                          <path d="M1.5 1.16683L7.33333 7.00016L1.5 12.8335" stroke="#171A1F" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                        </svg>
                    </span>
                </div>
              </div>
              <div x-ref="container" :style="accordion ? 'height: ' + $refs.container.scrollHeight + 'px' : ''" class="overflow-hidden h-0 duration-500">

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Split-Screen FAQ Accordion with Serif Heading and Gradient Badge

A light-background FAQ section with a gradient pill badge and large serif heading on the left, and five outlined accordion rows with chevron icons on the right. The split layout pairs introductory copy with expandable question rows.

FAQ from Zanrly

Tailwind CSS

Zanrly

<section class="py-10 bg-gray-900 overflow-hidden">
  <div class="container mx-auto px-4">
    <div class="relative py-16 px-8 bg-gray-800 overflow-hidden border border-gray-800 rounded-3xl">
      <div class="absolute top-1/2 left-1/2 min-w-max transform -translate-x-1/2 -translate-y-1/2">
        <div class="absolute bg-gradient-radial-dark-light w-full h-full"></div>
        <img src="zanrly-assets/images/pattern-dark-light.png" alt="">
      </div>
      <div class="relative mb-10 md:max-w-xl mx-auto text-center">
        <span class="inline-block mb-5 text-sm text-blue-500 font-bold uppercase tracking-widest">Frequently asked questions</span>
        <h2 class="font-heading mb-6 text-4xl md:text-5xl lg:text-6xl text-white font-black tracking-tight">Got questions? We’re here to help!</h2>
        <p class="text-gray-400 font-bold">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Malesuada tellus vestibulum, commodo pulvinar.</p>
      </div>
      <div class="relative max-w-3xl mx-auto">
        <div class="flex flex-wrap -m-3 mb-10">
          <div class="w-full p-3">
            <div x-data="{ accordion: false }" x-on:click="accordion = !accordion" class="block p-10 bg-gray-900 rounded-3xl cursor-pointer">
              <div class="flex flex-wrap -m-2">
                <div class="flex-1 p-2">
                  <h3 class="font-heading text-xl text-white font-black">Do you provide any free plan?</h3>
                  <div x-ref="container" :style="accordion ? 'height: ' + $refs.container.scrollHeight + 'px' : ''" class="overflow-hidden h-0 duration-500">
                      <p class="text-gray-400 mt-4 font-bold">Lorem ipsum dolor sit amet, to the consectr adipiscing elit. Volutpat tempor to the condi mentum vitae vel purus.</p>
                  </div>
                </div>
                <div class="w-auto p-2">

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Dark FAQ Section with Accordion Questions

A dark-themed FAQ section with a blue eyebrow label, centered heading and supporting text, and four stacked expandable question rows with chevron indicators. A footer line links to a contact page for remaining questions.

FAQ from Nightsable

Tailwind CSS

Nightsable

<section class="py-24 overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="mb-16 md:max-w-2xl text-center mx-auto">
      <span class="inline-block mb-4 text-sm text-green-400 font-medium tracking-tighter">Nightsable Card</span>
      <h2 class="font-heading text-7xl lg:text-8xl text-white tracking-7xl lg:tracking-8xl">FAQ</h2>
    </div>
    <div class="flex flex-wrap p-3 md:-m-8">
      <div class="w-full md:w-1/2 p-3 md:p-8">
        <div class="flex flex-wrap -m-3">
          <div class="w-full p-3">
            <a x-data="{ accordion: false }" x-on:click.prevent="accordion = !accordion" class="block py-7 border-b border-gray-900" href="#">
              <div class="flex flex-wrap -m-2">
                <div class="flex-1 p-2">
                  <h3 class="text-2xl text-white tracking-2xl">Investing Basics</h3>
                  <div x-ref="container" :style="accordion ? 'height: ' + $refs.container.scrollHeight + 'px' : ''" class="overflow-hidden h-0 duration-500">
                    <p class="text-lg text-gray-500 mt-3">Pretium ac auctor quis urna orci feugiat. Vulputate tellus velit tellus orci auctor vel nulla facilisi ut. Ante nunc risus viverra vivamus. Eros amet at lectus ac ac nibh dignissim.</p>
                  </div>
                </div>
                <div class="w-auto p-2">
                  <div :class="{ 'hidden': accordion }">
                    <svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M3.56969 7.79634L9.27469 13.5013C9.94844 14.1751 11.0509 14.1751 11.7247 13.5013L17.4297 7.79634" stroke="white" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                    </svg>
                  </div>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Dark FAQ Section with Two-Column Accordion Topics

A dark-themed FAQ section with a centered green eyebrow label and large FAQ heading, followed by eight expandable topic rows arranged in a two-column grid, each marked by a chevron and separated by thin divider lines. It is a marketing-style accordion for organizing investing and finance questions.

FAQ from Zeus

Tailwind CSS

Zeus

<section class="relative py-20" x-data="{ tab: '' }" x-init="tab = $refs.tab1.textContent">
  <img class="hidden lg:block absolute top-0 left-0 mt-16" src="zeus-assets/icons/dots/blue-dot-left-bars.svg" alt="">
  <img class="hidden lg:block absolute bottom-0 right-0 mb-20" src="zeus-assets/icons/dots/yellow-dot-right-shield.svg" alt="">
  <div class="container px-4 mx-auto">
    <div class="max-w-2xl mx-auto text-center mb-12">
      <span class="text-xs text-blue-400 font-semibold">What's new at Shuffle</span>
      <h2 class="mt-8 mb-10 text-4xl font-semibold font-heading">Lorem ipsum dolor sit amet consectutar domor at elis</h2>
      <p class="text-xl text-gray-500">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec, accumsan aliquet orci.</p>
    </div>
    <div class="max-w-max mb-6 md:mb-14 mx-auto text-center md:border-b">
      <button x-ref="tab1" class="text-sm pb-4 mb-2 md:mb-0 mr-4 font-semibold border-b-2 border-red-500" :class="{'border-b-2 border-red-500': $refs.tab1.textContent == tab, 'text-gray-500 border-b-2 border-transparent hover:border-gray-500': $refs.tab1.textContent != tab}" x-on:click="tab = $refs.tab1.textContent">General</button>
      <button x-ref="tab2" class="text-sm pb-4 mb-2 md:mb-0 mr-4 font-semibold text-gray-500 border-b-2 border-transparent hover:border-gray-500" :class="{'border-b-2 border-red-500': $refs.tab2.textContent == tab, 'text-gray-500 border-b-2 border-transparent hover:border-gray-500': $refs.tab2.textContent != tab}" x-on:click="tab = $refs.tab2.textContent">Payments</button>
      <button x-ref="tab3" class="text-sm pb-4 mb-2 md:mb-0 mr-4 font-semibold text-gray-500 border-b-2 border-transparent hover:border-gray-500" :class="{'border-b-2 border-red-500': $refs.tab3.textContent == tab, 'text-gray-500 border-b-2 border-transparent hover:border-gray-500': $refs.tab3.textContent != tab}" x-on:click="tab = $refs.tab3.textContent">Returns</button>
      <button x-ref="tab4" class="text-sm pb-4 font-semibold text-gray-500 border-b-2 border-transparent hover:border-gray-500" :class="{'border-b-2 border-red-500': $refs.tab4.textContent == tab, 'text-gray-500 border-b-2 border-transparent hover:border-gray-500': $refs.tab4.textContent != tab}" x-on:click="tab = $refs.tab4.textContent">Refunds</button>
    </div>
    <div class="max-w-3xl mx-auto">
      <ul>
        <li class="px-6 py-8 border-b" x-data="{ accordion: false }">
          <button class="w-full flex justify-between items-center text-left font-semibold font-heading" x-on:click="accordion = !accordion">
            <span class="text-2xl font-semibold font-heading">Fusce eget nunc et libero accumsan rutrum quis nec lectus?</span>
            <span :class="{'rotate-180 text-blue-500': accordion, 'rotate-0 text-gray-500': !accordion }" class="inline-block text-gray-500 transform">
                <svg class="flex-shrink-0" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path fill-rule="evenodd" clip-rule="evenodd" d="M0.75 10C0.75 15.108 4.891 19.25 10 19.25C15.108 19.25 19.25 15.108 19.25 10C19.25 4.892 15.108 0.75 10 0.75C4.891 0.75 0.75 4.892 0.75 10Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                  <path d="M6.52881 8.55774L9.99981 12.0437L13.4708 8.55774" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

FAQ Section with Category Tabs and Accordion Questions

A centered FAQ section with a small eyebrow label, large heading, supporting paragraph, tabs for General, Payments, Returns, and Refunds, and a vertical list of expandable question rows with chevron icons. Decorative dashed lines and colored circular icons appear at the corners.

FAQ from Zospace

Tailwind CSS

Zospace

<section class="py-20 2xl:py-40 bg-blue-50">
  <div class="container px-4 mx-auto">
    <div class="mb-20 text-center">
      <span class="text-lg font-bold text-blue-500">Hey! Have any questions?</span>
      <h2 class="mt-8 text-7xl font-bold font-heading">FAQ's</h2>
    </div>
    <div class="max-w-4xl mx-auto">
      <ul>
        <li class="mb-4 px-4 lg:px-12 py-8 bg-white rounded-2xl">
          <button class="flex w-full text-left" x-data="{ accordion: false }" x-on:click="accordion = !accordion">
            <div class="w-auto mr-8">
              <span class="flex items-center justify-center w-12 h-12 text-lg font-bold bg-blue-100 rounded-full">1</span>
            </div>
            <div class="w-full mt-3">
              <div class="flex items-center justify-between">
                <h3 class="text-xl font-bold">How should I develop my workflow over time?</h3>
                <span class="ml-4">
                    <span :class="{'rotate-180': accordion, 'rotate-0': !accordion }" class="inline-block transform">
                        <svg class="w-4 h-4" width="18" height="10" viewBox="0 0 18 10" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M16.0185 0.999999C16.2905 0.732 16.7275 0.732 16.9975 0.999999C17.2675 1.268 17.2685 1.701 16.9975 1.969L9.0895 9.799C8.8195 10.067 8.3825 10.067 8.1105 9.799L0.2025 1.969C-0.0675004 1.701 -0.0675004 1.268 0.2025 1C0.4735 0.732 0.9115 0.732 1.1815 1L8.6005 8.141L16.0185 0.999999Z" fill="#1F40FF"></path>
                        </svg>
                    </span>
                </span>
              </div>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

FAQ Section with Numbered Collapsible Questions

A centered FAQ section with a small blue eyebrow line, a large bold "FAQ's" heading, and four stacked white cards each containing a numbered circle, a question, and a downward chevron indicating expandable content. The light lavender background and rounded cards give it a clean, minimal layout.

FAQ from Wrexa

Tailwind CSS

Wrexa

<section class="py-24 bg-gray-100">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap -mx-4">
      <div class="w-full lg:w-1/4 px-4 mb-12 lg:mb-0">
        <div class="flex items-center">
          <span class="font-heading text-xl">04</span>
          <div class="mx-4 rounded-full bg-gray-200 h-1 w-1"></div>
          <span class="font-heading text-xl">Helpdesk/FAQs</span>
        </div>
      </div>
      <div class="w-full lg:w-3/4 px-4">
        <h1 class="font-heading text-4xl mb-6">Can I change my plan?</h1>
        <p class="max-w-2xl font-light mb-12 tracking-tight">Yees, u can try us for free for 60 days. We’ll provide u with a free, personalized 40-minute onboarding call to get you up and running as soon as possible.</p>
        <div class="pb-16 mb-10 border-b border-gray-200">
          <div class="flex max-w-max px-10 py-2 mb-2 border border-gray-200 rounded-lg">
            <svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg"><circle opacity="0.1" cx="14" cy="14" r="14" fill="#95A8FF"></circle><circle cx="14" cy="14" r="2" fill="#95A8FF"></circle></svg>
            <span class="ml-6 sm:text-lg">The first payment</span>
          </div>
          <div class="flex max-w-max px-10 py-2 mb-2 border border-gray-200 rounded-lg">
            <svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg"><circle opacity="0.1" cx="14" cy="14" r="14" fill="#95A8FF"></circle><circle cx="14" cy="14" r="2" fill="#95A8FF"></circle></svg>
            <span class="ml-6 sm:text-lg">The same amount for all</span>
          </div>
          <div class="flex max-w-max px-10 py-2 border border-gray-200 rounded-lg">
            <svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg"><circle opacity="0.1" cx="14" cy="14" r="14" fill="#95A8FF"></circle><circle cx="14" cy="14" r="2" fill="#95A8FF"></circle></svg>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

FAQ Section with Expanded Question and Collapsed Accordion Rows

A helpdesk FAQ section with a numbered label, an expanded question showing a paragraph answer and selectable option rows, followed by collapsed accordion rows with plus icons and footer buttons for all questions and contact. The layout is a vertical stack with a left label column and a right content column.

FAQ from Flex

Tailwind CSS

Flex

<section class="wave-top wave-bottom bg-white">
  <div class="wave wave-top w-full text-coolGray-50">
    <svg viewbox="0 0 1440 116" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M1440 64.5909H1090.08C833.336 64.5909 580.229 -7.62939e-06 360 -7.62939e-06C139.771 -7.62939e-06 0 64.5909 0 64.5909V116H1440V64.5909Z" fill="currentColor"></path>
    </svg>
  </div>
  <div class="py-24 bg-coolGray-50" style="background-image: url('flex-ui-assets/elements/pattern-light1.svg'); background-position: center;">
    <div class="container px-4 mx-auto">
      <div class="max-w-4xl mx-auto text-center">
        <span class="inline-block py-px px-2 mb-4 text-xs leading-5 text-green-500 bg-green-100 font-medium rounded-full shadow-sm">FAQ</span>
        <h2 class="mb-4 text-4xl md:text-5xl leading-tight text-coolGray-900 font-bold tracking-tighter">Frequently Asked Questions</h2>
        <p class="mb-24 text-lg md:text-xl text-coolGray-500 font-medium">Flex is the only saas business platform that lets you run your business on one platform, seamlessly across all digital channels.</p>
      </div>
      <div class="flex flex-wrap -mx-4">
        <div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-16">
          <div class="group h-full">
            <div class="group relative h-full px-8 pt-16 pb-8 bg-white group-hover:bg-coolGray-50 rounded-md shadow-md hover:shadow-xl transition duration-200">
              <div class="absolute top-0 left-1/2 transform -translate-y-1/2 -translate-x-1/2 inline-flex h-16 w-16 items-center justify-center bg-white group-hover:bg-coolGray-50 rounded-full transition duration-200">
                <div class="inline-flex items-center justify-center w-12 h-12 text-white bg-green-500 rounded-full">
                  <svg width="16" height="20" viewbox="0 0 16 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M7.29001 12.66C7.10526 12.8462 7.00111 13.0976 7.00001 13.36C7.00026 13.494 7.02747 13.6266 7.08001 13.75C7.17028 13.9619 7.33093 14.1361 7.53482 14.2433C7.73872 14.3504 7.97334 14.3839 8.19907 14.338C8.42479 14.2922 8.62776 14.1698 8.77369 13.9916C8.91963 13.8134 8.99957 13.5903 9.00001 13.36C8.9989 13.0976 8.89475 12.8462 8.71001 12.66C8.61704 12.5662 8.50644 12.4918 8.38458 12.4411C8.26272 12.3903 8.13202 12.3642 8.00001 12.3642C7.86799 12.3642 7.73729 12.3903 7.61543 12.4411C7.49357 12.4918 7.38297 12.5662 7.29001 12.66ZM15.63 1.65995C15.5138 1.56597 15.3781 1.49923 15.2327 1.46461C15.0873 1.43 14.9361 1.42841 14.79 1.45995C13.7214 1.6839 12.6183 1.68675 11.5486 1.46834C10.4789 1.24992 9.46525 0.814866 8.57001 0.189952C8.40261 0.0738247 8.20374 0.0115967 8.00001 0.0115967C7.79627 0.0115967 7.5974 0.0738247 7.43001 0.189952C6.53401 0.813153 5.51998 1.24643 4.45029 1.46312C3.38061 1.6798 2.2779 1.67532 1.21001 1.44995C1.06394 1.41841 0.912671 1.42 0.767306 1.45461C0.621942 1.48923 0.486181 1.55597 0.370006 1.64995C0.253985 1.74407 0.160527 1.86299 0.0964981 1.99797C0.0324695 2.13295 -0.00050219 2.28056 5.78149e-06 2.42995V9.87995C-0.000883255 11.3137 0.340779 12.7269 0.996541 14.0019C1.6523 15.2769 2.60319 16.3768 3.77001 17.21L7.42001 19.81C7.58937 19.9305 7.7921 19.9953 8.00001 19.9953C8.20791 19.9953 8.41064 19.9305 8.58001 19.81L12.23 17.21C13.3968 16.3768 14.3477 15.2769 15.0035 14.0019C15.6592 12.7269 16.0009 11.3137 16 9.87995V2.42995C16.0005 2.28056 15.9675 2.13295 15.9035 1.99797C15.8395 1.86299 15.746 1.74407 15.63 1.64995V1.65995ZM14 9.87995C14.0008 10.9947 13.7353 12.0935 13.2257 13.085C12.716 14.0764 11.977 14.9318 11.07 15.58L8.00001 17.77L4.93001 15.58C4.02304 14.9318 3.28399 14.0764 2.77435 13.085C2.26472 12.0935 1.99924 10.9947 2.00001 9.87995V3.57995C4.09643 3.75939 6.19605 3.27297 8.00001 2.18995C9.80397 3.27297 11.9036 3.75939 14 3.57995V9.87995ZM8.00001 5.35995C7.47307 5.35961 6.95534 5.49807 6.49891 5.76139C6.04249 6.02472 5.66347 6.40361 5.40001 6.85995C5.28045 7.08849 5.25383 7.35439 5.32569 7.6021C5.39755 7.84981 5.56234 8.06017 5.78565 8.18925C6.00895 8.31832 6.27348 8.35613 6.524 8.29476C6.77452 8.2334 6.99164 8.07762 7.13001 7.85995C7.21769 7.70808 7.34377 7.58194 7.4956 7.49418C7.64743 7.40642 7.81967 7.36013 7.99504 7.35996C8.17041 7.35979 8.34274 7.40573 8.49474 7.49319C8.64674 7.58065 8.77307 7.70654 8.86106 7.85824C8.94904 8.00994 8.99559 8.18211 8.99602 8.35748C8.99646 8.53284 8.95077 8.70524 8.86354 8.85738C8.77631 9.00951 8.6506 9.13603 8.49904 9.22424C8.34747 9.31245 8.17537 9.35925 8.00001 9.35995C7.73479 9.35995 7.48044 9.46531 7.2929 9.65285C7.10536 9.84038 7.00001 10.0947 7.00001 10.36C7.00001 10.6252 7.10536 10.8795 7.2929 11.0671C7.48044 11.2546 7.73479 11.36 8.00001 11.36C8.79566 11.36 9.55872 11.0439 10.1213 10.4813C10.6839 9.91866 11 9.1556 11 8.35995C11 7.5643 10.6839 6.80124 10.1213 6.23863C9.55872 5.67602 8.79566 5.35995 8.00001 5.35995Z" fill="currentColor"></path>
                  </svg>
                </div>
              </div>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

FAQ Section with Three-Column Question Card Grid

A light-themed FAQ section with a centered heading, subtitle, and a 3x3 grid of white cards, each with a green shield-question icon, a bold question, and a short answer about shipping and payment. The layout is a centered header above a repeated card grid.

FAQ from Uinel

Tailwind CSS

Uinel

<section class="font-medium bg-yellow-500 py-24 2xl:pt-64 2xl:pb-48" x-data="{ slideWidth: 0, activeSlide: 0, slideCount: 4 }">
  <div class="container px-4 mx-auto">
    <span class="block mb-9 uppercase tracking-widest text-xs leading-4">The Most popular</span>
    <h2 class="mb-20 xl:mb-24 font-heading text-9xl md:text-10xl xl:text-11xl leading-tight">FAQ’s</h2>
    <div class="relative flex justify-between md:hidden mb-16">
      <div class="relative w-12 h-12 bg-white z-10 rounded-full">
        <span class="absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 font-bold text-2xl">1</span>
      </div>
      <div class="relative w-12 h-12 bg-white z-10 rounded-full">
        <span class="absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 font-bold text-2xl">2</span>
      </div>
      <div class="relative w-12 h-12 bg-white z-10 rounded-full">
        <span class="absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 font-bold text-2xl">3</span>
      </div>
      <div class="absolute top-1/2 bg-black w-full" style="height:2px;"></div>
    </div>
    <div class="flex mx-auto max-w-max">
      <div class="relative md:top-12 md:flex md:flex-col mr-12 hidden">
        <div class="relative mb-44 lg:mb-32 w-12 h-12 bg-white z-10 rounded-full">
          <span class="absolute font-bold text-2xl left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2">1</span>
        </div>
        <div class="relative w-12 h-12 mb-20 lg:mb-11 bg-white z-10 rounded-full">
          <span class="absolute font-bold text-2xl left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2">2</span>
        </div>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

FAQ Section with Numbered Accordion Questions and Show More Button

A yellow-background FAQ section with a small eyebrow label, a large 'FAQ's' heading, and three numbered questions shown as collapsible rows with chevron indicators. The first question is highlighted in a white rounded card, and a blue 'Show more' button sits centered below.

FAQ from Yofte

Tailwind CSS

Yofte

<section class="py-20 bg-gray-100" x-data="{ showContent: false }">
  <div class="container mx-auto px-4">
    <h2 class="mb-16 text-4xl font-bold font-heading">FAQs</h2>
    <ul class="space-y-4">
      <li class="pr-8 md:pr-12 py-6 bg-gray-50" x-data="{ accordion: false }">
        <div class="border-l-2 border-blue-300">
          <button x-on:click="accordion = !accordion" class="pl-8 md:pl-16 lg:pl-28 w-full flex justify-between items-center text-left">
            <span class="mr-4 font-bold font-heading text-xl" :class="{ 'text-xl': !accordion, 'text-2xl text-blue-300': accordion }">Sed eget accumsan ipsum. Praesent dignissim?</span>
            <span :class="{'rotate-180': accordion, 'rotate-0': !accordion }" class="inline-block transform">
                <svg class="flex-shrink-0" width="18" height="10" viewBox="0 0 18 10" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M16.0185 0.201172C16.2905 -0.0668276 16.7275 -0.0668276 16.9975 0.201172C17.2675 0.469172 17.2685 0.902172 16.9975 1.17017L9.0895 9.00017C8.8195 9.26817 8.3825 9.26817 8.1105 9.00017L0.2025 1.17017C-0.0674999 0.902172 -0.0674999 0.469172 0.2025 0.201172C0.4735 -0.0668278 0.9115 -0.0668278 1.1815 0.201172L8.6005 7.34217L16.0185 0.201172Z" fill="#1F40FF"></path>
                </svg>
            </span>
          </button>
          <div x-ref="container" :style="accordion ? 'height: ' + $refs.container.scrollHeight + 'px' : ''" class="overflow-hidden h-0 duration-500">
              <p class="pl-8 md:pl-16 lg:pl-28 pr-20 max-w-4xl mt-4 text-gray-500">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam euismod orci sed tristique placerat. Fusce in ligula urna. Fusce eget nunc et libero accumsan rutrum quis nec lectus. Quisque luctus sem nibh, quis ornare neque consectetur varius. Maecenas rhoncus consectetur rutrum.</p>
          </div>
        </div>
      </li>
      <li class="pr-8 md:pr-12 py-6 bg-gray-50" x-data="{ accordion: false }">
        <div class="border-l-2 border-blue-300">
          <button x-on:click="accordion = !accordion" class="pl-8 md:pl-16 lg:pl-28 w-full flex justify-between items-center text-left">
            <span class="mr-4 font-bold font-heading text-xl" :class="{ 'text-xl': !accordion, 'text-2xl text-blue-300': accordion }">After curabitur eu laoreet libero eget en vel odio?</span>
            <span :class="{'rotate-180': accordion, 'rotate-0': !accordion }" class="inline-block transform">

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

FAQ Accordion Section with Expandable Questions and More Button

A light-background FAQs section with a bold heading above a vertical list of five expandable question rows, each with a left blue accent bar and a downward chevron. A centered blue MORE button sits below the list, suggesting additional questions can be loaded.

FAQ from Atis

Tailwind CSS

Atis

<section>
  <div class="skew skew-top mr-for-radius">
    <svg class="h-8 md:h-12 lg:h-20 w-full text-green-600" viewBox="0 0 10 10" preserveAspectRatio="none">
      <polygon fill="currentColor" points="0 0 10 10 0 10"></polygon>
    </svg>
  </div>
  <div class="skew skew-top ml-for-radius">
    <svg class="h-8 md:h-12 lg:h-20 w-full text-green-600" viewBox="0 0 10 10" preserveAspectRatio="none">
      <polygon fill="currentColor" points="0 10 10 0 10 10"></polygon>
    </svg>
  </div>
  <div class="py-20 bg-green-600 radius-for-skewed">
    <div class="container mx-auto px-4">
      <div class="mb-16 max-w-xl mx-auto text-center">
        <span class="text-green-400 font-bold font-heading">Dolor sit amet consectutar</span>
        <h2 class="mb-6 text-white text-5xl font-bold font-heading">Frequently Asked Questions</h2>
        <form class="flex justify-center">
          <input class="w-2/3 p-4 text-xs font-heading bg-white focus:border-gray-500 focus:outline-none rounded-l" placeholder="Search, find any question you want to ask...">
          <button class="pr-4 rounded-r-lg bg-white text-green-600">
            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
              <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"></path>
            </svg>
          </button>
        </form>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

FAQ Section with Search and Accordion Questions on Green Background

A centered FAQ section with a small eyebrow label, two-line white heading 'Frequently Asked Questions', a search input, pagination-style dots, and a vertical list of white expandable question rows with down-arrow indicators on a solid green background.

FAQ from Pstls.

Tailwind CSS

Pstls.

<section class="py-24 bg-gray-100">
  <div class="container px-4 mx-auto">
    <div class="max-w-xl mx-auto mb-20 text-center">
      <h1 class="text-4xl md:text-5xl lg:text-6xl mb-6 font-heading" >Frequently asked questions</h1>
      <p class="leading-8" >If you have ever wondered how to develop your brand, this is the place for you. Take a big step forward in growing your business with this great tool.</p>
    </div>
    <div class="max-w-5xl mx-auto">
      <div class="flex flex-wrap -mx-4 mb-16">
        
        <div class="w-full lg:w-1/2 px-4 mb-8">
          <div class="py-12 px-6 md:p-20 bg-white"><img class="block mb-6" src="pstls-assets/icons/faq-info.svg" alt="" >
            <h5 class="mb-6 text-xl font-heading" >Fusce eget nunc et libero accumsan rutrum quis nec lectus?</h5>
            <p class="leading-8 text-gray-400" >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam euismod orci sed tristique placerat. Fusce in ligula urna. Fusce eget nunc et libero accumsan rutrum quis nec lectus.</p>
          </div>
        </div>
        
        <div class="w-full lg:w-1/2 px-4 mb-8">
          <div class="py-12 px-6 md:p-20 bg-white"><img class="block mb-6" src="pstls-assets/icons/faq-info.svg" alt="" >
            <h5 class="mb-6 text-xl font-heading" >Fusce eget nunc et libero accumsan rutrum quis nec lectus?</h5>
            <p class="leading-8 text-gray-400" >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam euismod orci sed tristique placerat. Fusce in ligula urna. Fusce eget nunc et libero accumsan rutrum quis nec lectus.</p>
          </div>
        </div>
        
        <div class="w-full lg:w-1/2 px-4 mb-8">

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

FAQ Section with Six Question Cards and Contact CTA

A frequently asked questions section with a serif heading, intro text, and a 2-column grid of six white cards each showing a question icon, bold question, and gray placeholder answer text. A centered closing block with an icon, heading, and a lavender 'Get in Touch' button invites further questions.

FAQ from BoldUI

Tailwind CSS

BoldUI

<section class="py-20 bg-black overflow-x-hidden" x-data="{ tab: '' }" x-init="tab = $refs.tab1.textContent">
  <div class="container mx-auto px-4">
    <div class="flex flex-wrap items-center -mx-4 mb-12">
      <div class="w-full md:w-2/3 px-4 mb-4 md:mb-0">
        <h2 class="mb-6 max-w-md text-2xl text-white uppercase font-heading">Frequently asked questions</h2>
        <p class="text-lg text-gray-500">Take a big step forward in growing your business with this great tool.</p>
      </div>
      <div class="w-full md:w-1/3 px-4">
        <div class="flex flex-wrap items-center">
            <a x-ref="tab1" x-on:click.prevent="tab = $refs.tab1.textContent" class="inline-block w-full md:w-auto mb-4 md:mb-0 md:mr-8 py-3 px-4 text-center font-bold text-xs rounded-full uppercase font-heading bg-blue-500 hover:bg-blue-600 transform duration-200" :class="{ 'bg-blue-500 hover:bg-blue-600': tab == $refs.tab1.textContent, 'text-gray-500 hover:text-gray-400 border hover:border-gray-500': tab != $refs.tab1.textContent }" href="#">Active demo</a>
            <a x-ref="tab2" x-on:click.prevent="tab = $refs.tab2.textContent" class="inline-block w-full md:w-auto py-3 px-4 text-center font-bold text-xs rounded-full uppercase font-heading text-gray-500 hover:text-gray-400 border hover:border-gray-500 transform duration-200" :class="{ 'bg-blue-500 hover:bg-blue-600': tab == $refs.tab2.textContent, 'text-gray-500 hover:text-gray-400 border hover:border-gray-500': tab != $refs.tab2.textContent }" href="#">Normal Tab</a>
        </div>
      </div>
    </div>
    <ul>
      <li>
        <button x-data="{ accordion: false }" x-on:click="accordion = !accordion" class="block p-10 border">
          <div class="flex justify-between">
            <h1 class="text-left text-lg font-heading" :class="{ 'text-gray-500': !accordion, 'text-white': accordion }">1.Quick problem-solving contact</h1>
            <span :class="{'rotate-180 text-gray-500': accordion, 'rotate-0 text-yellow-500': !accordion }" class="inline-block transform text-yellow-500">
                <svg width="9" height="17" viewBox="0 0 9 17" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M3.35986 12.1499L3.35986 0.139893L5.4432 0.139893L5.4432 12.1499L8.5682 12.1499L4.40153 16.1399L0.234863 12.1499L3.35986 12.1499Z" fill="currentColor"></path>
                </svg>
              </span>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Dark FAQ Accordion with Tabs

A dark-themed frequently asked questions section with a heading, supporting text, two pill-shaped tabs (one active in blue), and four stacked expandable question rows marked with yellow down-arrow icons. The rows are full-width with thin outlined dividers, presenting questions in a vertical list.

FAQ from Acros

Tailwind CSS

Acros

<section class="py-16" x-data="{ tab: '' }" x-init="tab = $refs.tab1.textContent">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap -mx-4">
      <div class="w-full lg:w-1/3 px-4 mb-16 lg:mb-0">
        <div class="max-w-sm">
          <span class="text-sm font-semibold uppercase">FAQ</span>
          <h2 class="font-heading text-3xl sm:text-4xl mt-2 mb-6">Questions and Answers</h2>
          <p class="text-lg leading-8">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec.</p>
        </div>
      </div>
      <div class="w-full lg:w-2/3 px-4">
        <div class="lg:max-w-2xl ml-auto">
            <div class="flex flex-col sm:flex-row mb-8 border-b border-gray-100">
                <a x-ref="tab1" x-on:click.prevent="tab = $refs.tab1.textContent" class="inline-block pt-4 pb-5 mr-8 font-heading font-medium border-b-2 border-green-500" :class="{ 'font-medium border-green-500': tab == $refs.tab1.textContent, 'border-transparent hover:border-green-500': tab != $refs.tab1.textContent }" href="#">General</a>
                <a x-ref="tab2" x-on:click.prevent="tab = $refs.tab2.textContent" class="inline-block pt-4 pb-5 mr-8 font-heading border-b-2 border-transparent" :class="{ 'font-medium border-green-500': tab == $refs.tab2.textContent, 'border-transparent hover:border-green-500': tab != $refs.tab2.textContent }" href="#">Payments</a>
                <a x-ref="tab3" x-on:click.prevent="tab = $refs.tab3.textContent" class="inline-block pt-4 pb-5 mr-8 font-heading border-b-2 border-transparent" :class="{ 'font-medium border-green-500': tab == $refs.tab3.textContent, 'border-transparent hover:border-green-500': tab != $refs.tab3.textContent }" href="#">Returns</a>
                <a x-ref="tab4" x-on:click.prevent="tab = $refs.tab4.textContent" class="inline-block pt-4 pb-5 mr-8 font-heading border-b-2 border-transparent" :class="{ 'font-medium border-green-500': tab == $refs.tab4.textContent, 'border-transparent hover:border-green-500': tab != $refs.tab4.textContent }" href="#">Refunds</a>
            </div>
          <button class="flex w-full pt-4 pb-6 px-4 mb-4 text-left rounded" x-data="{ accordion: false }" x-on:click="accordion = !accordion" :class="{ 'bg-green-50': accordion, 'bg-gray-50': !accordion }">
            <div class="flex-shrink-0">
              <div class="flex items-center justify-center w-8 h-8 text-xs font-medium rounded-sm" :class="{ 'text-white bg-green-500': accordion, 'text-gray-900 bg-white': !accordion }">1</div>
            </div>
            <div class="px-6 pt-1 mr-auto">
              <h3 class="font-heading text-lg">Fusce eget nunc et libero accumsan rutrum quis nec lectus?</h3>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

FAQ Section with Category Tabs and Accordion Questions

A split-screen FAQ section with a heading and intro text on the left and category tabs (General, Payments, Returns, Refunds) above a vertical list of numbered, expandable question rows on the right. The tabs use a teal underline to indicate the active category.

FAQ from Bendis

Tailwind CSS

Bendis

<section class="py-24 bg-blue-50" x-data="{ tab: '' }" x-init="tab = $refs.tab1.textContent">
  <div class="container px-4 mx-auto">
    <div class="max-w-2xl mx-auto text-center mb-8">
      <span class="text-blue-400 uppercase font-semibold tracking-widest">New feature</span>
      <h2 class="mt-4 mb-6 text-4xl font-bold font-heading text-blue-800">Lorem ipsum dolor sit amet consectutar domor at elis</h2>
      <p class="text-lg text-gray-500">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec, accumsan aliquet orci.</p>
    </div>
    <div class="max-w-max mb-6 md:mb-14 mx-auto text-center flex flex-wrap justify-around flex-row">
      <button x-ref="tab1" x-on:click="tab = $refs.tab1.textContent" class="inline-block w-full md:w-auto mb-2 md:mb-0 py-2 px-8 leading-8 bg-blue-800 text-white font-semibold" :class="{ 'bg-blue-800 text-white font-semibold': tab == $refs.tab1.textContent, 'bg-blue-100 hover:bg-blue-200 text-blue-800 font-medium': tab != $refs.tab1.textContent }">Normal Tab 1</button>
      <button x-ref="tab2" x-on:click="tab = $refs.tab2.textContent" class="inline-block w-full md:w-auto mb-2 md:mb-0 py-2 px-8 leading-8 bg-blue-100 hover:bg-blue-200 text-blue-800 font-medium" :class="{ 'bg-blue-800 text-white font-semibold': tab == $refs.tab2.textContent, 'bg-blue-100 hover:bg-blue-200 text-blue-800 font-medium': tab != $refs.tab2.textContent }">Normal tab 2</button>
      <button x-ref="tab3" x-on:click="tab = $refs.tab3.textContent" class="inline-block w-full md:w-auto mb-2 md:mb-0 py-2 px-8 leading-8 bg-blue-100 hover:bg-blue-200 text-blue-800 font-medium" :class="{ 'bg-blue-800 text-white font-semibold': tab == $refs.tab3.textContent, 'bg-blue-100 hover:bg-blue-200 text-blue-800 font-medium': tab != $refs.tab3.textContent }">Normal Tab 3</button>
      <button x-ref="tab4" x-on:click="tab = $refs.tab4.textContent" class="inline-block w-full md:w-auto py-2 px-8 leading-8 bg-blue-100 hover:bg-blue-200 text-blue-800 font-medium" :class="{ 'bg-blue-800 text-white font-semibold': tab == $refs.tab4.textContent, 'bg-blue-100 hover:bg-blue-200 text-blue-800 font-medium': tab != $refs.tab4.textContent }">Normal Tab 4</button>
    </div>
    <div class="max-w-3xl mx-auto">
      <ul>
        <li class="px-10 py-8 bg-white" :xclass="{ 'bg-blue-100': accordion, 'bg-white': !accordion }" x-data="{ accordion: false }">
          <button class="w-full flex justify-between items-center text-left font-heading text-blue-800 hover:text-blue-700" :class="{ 'text-blue-800 hover:text-blue-700': !accordion, 'text-blue-500': accordion }" x-on:click="accordion = !accordion">
            <span class="font-heading" :xclass="{ 'text-base': !accordion, 'text-lg font-semibold': accordion }">Fusce eget nunc et libero accumsan rutrum quis nec lectus?</span>
            <span :class="{'rotate-180': accordion, 'rotate-0': !accordion }" class="inline-block transform">
                <svg class="flex-shrink-0 w-4 h-4" :class="{ 'text-blue-500': !accordion, 'text-blue-800': accordion }" viewBox="0 0 16 12" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                  <path d="M16 3.25L13.5 0.75L7.99997 6.25L2.49997 0.749999L-3.01679e-05 3.25L7.99997 11.25L16 3.25Z"></path>
                </svg>
            </span>
          </button>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Feature Section with Tabs and Accordion FAQ

A centered marketing feature section with a small eyebrow label, bold blue heading, supporting paragraph, a four-item segmented tab bar, and a white panel of five collapsible question rows with chevron icons. The layout is a vertically stacked, centered column.

FAQ from Metis

Tailwind CSS

Metis

<section class="pt-12 pb-20 lg:bg-contain bg-top bg-no-repeat" style="background-image: url('metis-assets/backgrounds/intersect.svg');">
  <div class="container px-4 mx-auto">
    <img class="mx-auto sm:max-w-sm mb-10" src="metis-assets/illustrations/hardworking-man.png" alt="">
    <form class="flex justify-center max-w-3xl mx-auto mb-16">
      <input class="w-2/3 p-4 text-xs placeholder-blueGray-800 font-bold font-heading bg-white focus:border-gray-500 focus:outline-none rounded-l" placeholder="Search, find any question you want to ask...">
      <button class="pr-4 rounded-r bg-white text-blue-600">
        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <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"></path>
        </svg>
      </button>
    </form>
    <div class="flex flex-wrap justify-between -mx-3 mb-12">
      <div class="w-full md:w-1/2 lg:w-1/4 px-3 mb-6">
        <div class="p-6 bg-white rounded shadow">
          <h4 class="mb-3 font-bold font-heading">Category 1</h4>
          <ul class="list-disc list-inside text-xs text-blueGray-400">
            <li class="mb-2">Lorem ipsum dolor sit amet</li>
            <li class="mb-2">Maecenas efficitur pharetra urna, eget ullamcorper neque gravida quis</li>
            <li class="mb-2">Sed lorem ante</li>
            <li>Ullamcorper neque gravida quis</li>
          </ul>
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/4 px-3 mb-6">

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

FAQ Help Center with Search and Category Cards

A help center section with an illustrated hero, a central search input, four category cards with bulleted links, and a list of expandable FAQ questions with chevron indicators. The layout is a centered stack with a four-column card row below the search bar and a vertical question list at the bottom.

The frequently asked questions section is used to present answers to frequently asked questions. Tailwind FAQ components will allow you to show them in an aesthetic and clear way.

Choose from many variations of the Tailwind components FAQ. The variants shown here are available in various UI libraries in the Shuffle editor. You will also find many other types of components that will be in the same style. This will allow you to build a comprehensive Tailwind website template. Each library is designed by a professional designer and coded by our team of developers.

Get access to all sections of the Tailwind components FAQ, code and our editor. Try the demo for free.

Try for Free →

Redirecting to PayPal

Shuffle's Editors

Supporting tools

Plans

Shuffle’s design systems

Most popular ui libraries

Flex

Zanrly

Saturn

Flaro

Gradia

Basko

Artemis

Vendia

Tailwind CSS FAQ Components

Framework

UI Library

Components

FAQ from Saturn

Get the code for 13,400+ components

FAQ Section with Accordion Questions and Serif Italic Heading

FAQ Section with Six Collapsible Question Cards

FAQ from DarkPro

Get the code for 13,400+ components

Dark FAQ Section with Category Tabs and Accordion Questions

Dark FAQ Section with Six Icon Items in a Three-Column Grid

FAQ from Flaro

Get the code for 13,400+ components

Centered FAQ Section with Accordion Questions

FAQ Section with Split Heading and Accordion Questions

FAQ from Gradia

Get the code for 13,400+ components

FAQ List with Gradient Borders and Arrow Icons

FAQ Section with Split Heading and Accordion-Style Questions

FAQ from Solstice

Get the code for 13,400+ components

FAQ Section with Category Tabs and Expandable Questions

FAQ Section with Expandable Questions and Contact CTA

FAQ from Basko

Get the code for 13,400+ components

Split-Screen FAQ Accordion with Serif Heading and Gradient Badge

FAQ Section with Two-Column Questions and Answers

FAQ from Zanrly

Get the code for 13,400+ components

Dark FAQ Section with Accordion Questions

FAQ Section with Stacked Expandable Questions

FAQ from Nightsable

Get the code for 13,400+ components

Dark FAQ Section with Two-Column Accordion Topics

Dark FAQ Section with Expandable Questions

FAQ from Zeus

Get the code for 13,400+ components

FAQ Section with Category Tabs and Accordion Questions

Feature Section with Icon Grid and Bulleted Lists

FAQ from Zospace

Get the code for 13,400+ components

FAQ Section with Numbered Collapsible Questions

Centered FAQ Accordion with Numbered Questions

FAQ from Wrexa

Get the code for 13,400+ components

FAQ Section with Expanded Question and Collapsed Accordion Rows

Dark FAQ Section with Carousel Cards and Purple CTA

FAQ from Flex

Get the code for 13,400+ components

FAQ Section with Three-Column Question Card Grid

FAQ Section with Nine-Card Grid

FAQ from Uinel

Get the code for 13,400+ components

FAQ Section with Numbered Accordion Questions and Show More Button

FAQ Horizontal Card Carousel with Yellow Background

FAQ from Yofte

Get the code for 13,400+ components

FAQ Accordion Section with Expandable Questions and More Button

FAQs Carousel with Question Cards and Navigation Arrows

FAQ from Atis

Get the code for 13,400+ components

FAQ Section with Search and Accordion Questions on Green Background

Dark FAQ Section with Search and Accordion Questions

FAQ from Pstls.

Get the code for 13,400+ components