Tailwind FAQ Components (219)

Framework

UI Library

Components

FAQ from Shuffle UX

Tailwind CSS

Shuffle UX

<section class="py-20" 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-12">
      <span class="text-sm text-gray-200 uppercase">Lorem ipsum</span>
      <h2 class="mt-2 mb-4 text-4xl lg:text-5xl font-bold font-heading">Lorem ipsum dolor sit amet consectutar domor at elis</h2>
      <p class="text-lg text-gray-500 leading-loose">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec, accumsan aliquet orci.</p>
    </div>
    <div class="text-center mb-2 md:mb-8">
      <button x-ref="tab1" x-on:click="tab = $refs.tab1.textContent" class="text-lg pb-2 mb-2 md:mb-0 mr-4 lg:mr-12 border-b-4 border-gray-500 hover:border-gray-500" :class="{ 'border-gray-500': tab == $refs.tab1.textContent, 'border-transparent': tab != $refs.tab1.textContent }">General</button>
      <button x-ref="tab2" x-on:click="tab = $refs.tab2.textContent" class="text-lg pb-2 mb-2 md:mb-0 mr-4 lg:mr-12 border-b-4 border-transparent hover:border-gray-500" :class="{ 'border-gray-500': tab == $refs.tab2.textContent, 'border-transparent': tab != $refs.tab2.textContent }">Payments</button>
      <button x-ref="tab3" x-on:click="tab = $refs.tab3.textContent" class="text-lg pb-2 mb-2 md:mb-0 mr-4 lg:mr-12 border-b-4 border-transparent hover:border-gray-500" :class="{ 'border-gray-500': tab == $refs.tab3.textContent, 'border-transparent': tab != $refs.tab3.textContent }">Returns</button>
      <button x-ref="tab4" x-on:click="tab = $refs.tab4.textContent" class="text-lg pb-2 border-b-4 border-transparent hover:border-gray-500" :class="{ 'border-gray-500': tab == $refs.tab4.textContent, 'border-transparent': tab != $refs.tab4.textContent }">Refunds</button>
    </div>
    <div class="max-w-2xl mx-auto">
      <ul>
        <li class="px-6 py-8 border-b border-gray-50" x-data="{ accordion: false }">
          <button class="w-full flex justify-between items-center text-left font-bold font-heading" x-on:click="accordion = !accordion">
            <span class="text-2xl font-bold font-heading">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 ml-2" 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

Centered FAQ Section with Category Tabs and Accordion Questions

A centered FAQ section with an eyebrow label, large heading, supporting paragraph, and category tabs (General, Payments, Returns, Refunds) above a vertical list of expandable questions marked with chevron icons. The layout uses a light background and minimal dividers between accordion rows.

FAQ from Cronos

Tailwind CSS

Cronos

<section class="py-20" x-data="{ tab: '' }" x-init="tab = $refs.tab1.textContent">
    <div class="container mx-auto px-4">
        <div class="flex justify-center mb-6">
            <div class="bg-yellow-100 inline-block px-2 py-1 text-xs font-bold">Lorem ipsum</div>
        </div>
        <h1 class="font-heading text-4xl lg:text-5xl text-center mx-auto mb-8 font-bold max-w-md lg:max-w-xl">Lorem ipsum dolor sit amet consectutar</h1>
        <p class="text-gray-600 max-w-lg mx-auto text-center mb-8">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec, accumsan aliquet orci.</p>
        <div class="flex flex-wrap justify-center mb-16">
            <a x-ref="tab1" x-on:click.prevent="tab = $refs.tab1.textContent" class="w-full sm:w-auto py-4 text-center px-14 font-bold text-sm hover:underline" :class="{'border-b-2 border-green-500': tab == $refs.tab1.textContent, 'text-gray-500': tab != $refs.tab1.textContent}" href="#">General</a>
            <a x-ref="tab2" x-on:click.prevent="tab = $refs.tab2.textContent" class="w-full sm:w-auto py-4 text-center px-14 font-bold text-sm hover:underline" :class="{'border-b-2 border-green-500': tab == $refs.tab2.textContent, 'text-gray-500': tab != $refs.tab2.textContent}" href="#">Payments</a>
            <a x-ref="tab3" x-on:click.prevent="tab = $refs.tab3.textContent" class="w-full sm:w-auto py-4 text-center px-14 font-bold text-sm hover:underline" :class="{'border-b-2 border-green-500': tab == $refs.tab3.textContent, 'text-gray-500': tab != $refs.tab3.textContent}" href="#">Returns</a>
            <a x-ref="tab4" x-on:click.prevent="tab = $refs.tab4.textContent" class="w-full sm:w-auto py-4 text-center px-14 font-bold text-sm hover:underline" :class="{'border-b-2 border-green-500': tab == $refs.tab4.textContent, 'text-gray-500': tab != $refs.tab4.textContent}" href="#">Refunds</a>
        </div>
        <div class="max-w-3xl mx-auto">
            <ul>
                <li class="mb-8 px-6 pb-8 border-b border-gray-100" x-data="{ accordion: false }">
                    <a x-on:click.prevent="accordion = !accordion" class="flex justify-between items-center w-full" href="#">
                      <h6 class="text-gray-600 text-xl font-bold">Fusce eget nunc et libero accumsan rutrum quis nec lectus?</h6>
                      <span class="transform" :class="{'rotate-180': accordion}">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                            <path d="M15.1746 10.1204C15.3843 9.94067 15.6999 9.96495 15.8796 10.1746C16.0593 10.3843 16.0351 10.6999 15.8254 10.8796L12.3254 13.8796C12.1382 14.0401 11.8619 14.0401 11.6746 13.8796L8.17461 10.8796C7.96495 10.6999 7.94067 10.3843 8.12038 10.1746C8.30009 9.96495 8.61574 9.94067 8.8254 10.1204L12 12.8415L15.1746 10.1204Z" fill="#001410"></path>
                        </svg>
                      </span>
                    </a>

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 light-background FAQ section with a small badge, large bold heading, short intro paragraph, tabs labeled General, Payments, Returns, and Refunds, and a vertical list of expandable question rows with chevron icons. The tabs use an underline indicator to show the active category.

FAQ from NEUB

Tailwind CSS

NEUB

<section class="py-20" x-data="{ tab: 'general' }">
  <div class="container px-4 mx-auto">
    <div class="max-w-lg lg:max-w-2xl mx-auto text-center mb-12 lg:mb-16">
      <span class="inline-block px-4 py-2 bg-black text-white font-bold text-sm tracking-wider uppercase">FREQUENTLY ASKED QUESTIONS</span>
      <h2 class="mt-8 mb-6 text-4xl sm:text-6xl lg:text-7xl xl:text-7xl font-black font-heading leading-[0.9] tracking-tight uppercase">GET YOUR<br><span class="text-pink-500">ANSWERS</span> HERE</h2>
      <p class="text-lg sm:text-xl lg:text-2xl leading-tight text-gray-700 font-medium max-w-md lg:max-w-xl mx-auto">Raw, uncompromising answers to your questions. No fluff, just the facts you need
        to move forward.</p>
    </div>

    <div class="max-w-2xl mx-auto">
      <ul class="relative flex flex-wrap mb-12 shadow-[8px_8px_0px_0px_#000000]">
        <div class="absolute inset-0 bg-black translate-y-2 translate-x-2"></div>
        <li class="w-1/2 sm:w-1/4"><a x-on:click="tab='general'" class="block w-full px-3 py-6 text-center text-base sm:text-lg md:text-xl xl:text-2xl font-black font-heading tracking-tighter border-4 border-black transition-all hover:translate-x-1 hover:translate-y-2" :class="{ 'bg-pink-500 text-white': tab==1, 'bg-white text-black hover:bg-pink-500 hover:text-white': tab!=1 }" href="#">GENERAL</a></li>
        <li class="w-1/2 sm:w-1/4"><a x-on:click="tab='payments'" class="block w-full px-3 py-6 text-center text-base sm:text-lg md:text-xl xl:text-2xl font-black font-heading tracking-tighter border-4 border-black transition-all hover:translate-x-1 hover:translate-y-2" :class="{ 'bg-pink-500 text-white': tab==2, 'bg-white text-black hover:bg-pink-500 hover:text-white': tab!=2 }" href="#">PAYMENTS</a></li>
        <li class="w-1/2 sm:w-1/4"><a x-on:click="tab='returns'" class="block w-full px-3 py-6 text-center text-base sm:text-lg md:text-xl xl:text-2xl font-black font-heading tracking-tighter border-4 border-black transition-all hover:translate-x-1 hover:translate-y-2" :class="{ 'bg-pink-500 text-white': tab==3, 'bg-white text-black hover:bg-pink-500 hover:text-white': tab!=3 }" href="#">RETURNS</a></li>
        <li class="w-1/2 sm:w-1/4"><a x-on:click="tab='refunds'" class="block w-full px-3 py-6 text-center text-base sm:text-lg md:text-xl xl:text-2xl font-black font-heading tracking-tighter border-4 border-black transition-all hover:translate-x-1 hover:translate-y-2" :class="{ 'bg-pink-500 text-white': tab==4, 'bg-white text-black hover:bg-pink-500 hover:text-white': tab!=4 }" href="#">REFUNDS</a></li>
      </ul>
      <ul class="border-4 border-black shadow-[8px_8px_0px_0px_#000000]">
        <li class="bg-white border-b-4 border-black last:border-b-0" x-data="{ accordion: false }">
          <button class="group w-full flex justify-between items-center text-left font-black font-heading p-6 hover:bg-yellow-300 transition-all" x-on:click="accordion = !accordion">
            <span class="text-xl font-black font-heading tracking-tight">FUSCE EGET NUNC ET LIBERO
              ACCUMSAN RUTRUM QUIS NEC LECTUS?</span>
            <span :class="{'rotate-180': accordion, 'rotate-0': !accordion }" class="inline-block transition-transform">
              <svg class="flex-shrink-0 w-8 h-8 ml-4 stroke-[3]" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">

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

Neo-brutalist FAQ Section with Pink Accent Heading and Accordion List

A centered FAQ section with a black eyebrow label, a large two-line heading with pink emphasis, a short supporting paragraph, and a stacked accordion of uppercase questions with chevron toggles. Heavy black offset shadows and thick borders give the section a bold, blocky style.

FAQ from Casper

Tailwind CSS

Casper

<section class="relative py-12 md:py-24 bg-body overflow-hidden">
  <div class="relative container mx-auto px-4">
    <div class="relative flex flex-wrap -mx-4">
      <div class="w-full lg:w-1/2 xl:w-2/5 px-4 pb-16 lg:pb-32">
        <div class="relative max-w-md mx-auto lg:mx-0">
          <div class="absolute top-0 left-0 -mt-80 -ml-40 w-170 h-170 bg-gradient-to-t from-purple-600 via-darkBlue-900 to-transparent rounded-full filter blur-4xl"></div>
          <div class="relative">
            <h2 class="font-heading text-4xl xs:text-5xl sm:text-6xl font-medium text-white tracking-tight mb-6">Getting Started</h2>
            <div class="pl-8 py-3 border-l-2 border-white border-opacity-10">
              <ul>
                <li class="mb-5">
                  <a class="flex items-center text-white hover:text-violet-600" href="#">
                    <span>
                      <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="6" cy="6" r="5" stroke="#C3C6CE" stroke-width="2"></circle></svg>
                    </span>
                    <span class="ml-3 text-xl tracking-tight">Getting Started</span>
                  </a>
                </li>
                <li class="mb-5">
                  <a class="flex items-center text-white hover:text-violet-600" href="#">
                    <span>
                      <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="6" cy="6" r="5" stroke="#C3C6CE" stroke-width="2"></circle></svg>
                    </span>
                    <span class="ml-3 text-xl tracking-tight">How we can collaborate</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 Help Center FAQ with Sidebar Topics and Search

A dark-themed help center section with a left sidebar listing topics, a pill-shaped search input, and an accordion of FAQ questions under a Getting Started heading. A decorative 3D robot illustration sits in the lower left.

FAQ from Mirga

Tailwind CSS

Mirga

<section class="bg-neutral-900 py-12 md:py-24 overflow-hidden">
  <div class="container mx-auto px-4">
    <h1 class="text-6xl sm:text-9xl xl:text-11xl text-white font-semibold md:mb-20 font-heading">FAQ</h1>
    <div class="flex justify-center relative">
      <div class="hidden xl:block flex-shrink-0 py-24">
        <div class="flex flex-wrap gap-12">
          <div class="relative h-64 opacity-30">
            <img class="rounded-3xl w-52 h-full object-cover opacity-30" src="mirga-assets/images/faq/picture1.png" alt="">
            <div class="absolute left-4 bottom-4">
              <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48" fill="none"><circle cx="24" cy="24" r="24" fill="#19191B"></circle></svg>
              <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
                <h3 class="text-white font-semibold font-heading">3</h3>
              </div>
            </div>
          </div>
          <div>
            <h2 class="text-white text-3xl sm:text-5xl lg:text-7xl font-semibold tracking-tight mb-10 max-w-xs sm:max-w-sm lg:max-w-xl text-opacity-20 font-heading">How do I measure the success of my digital marketing campaigns?</h2>
            <p class="text-neutral-300 text-lg sm:text-xl font-medium max-w-md sm:max-w-xl tracking-tight text-opacity-20">Success can be measured through various metrics like website traffic, conversion rates, click-through rates, and ROI. We provide comprehensive analytics and reporting to help you evaluate campaign performance.</p>
          </div>
        </div>
      </div>
      <div class="xl:flex-shrink-0 w-full max-w-6xl py-24 px-4 md:px-12 xl:mx-24 border-r border-l border-transparent lg:border-neutral-600 relative">
        <div class="flex flex-wrap gap-12">
          <div class="relative h-64">

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 Carousel with Photo and Navigation Arrows

A dark-themed FAQ section with a heading and a horizontal carousel of questions, each paired with a photo and an answer paragraph. Previous and next arrow buttons sit below the active item, with partially visible neighboring items at the edges.

FAQ from Vista

Tailwind CSS

Vista

<section class="bg-darkPink-900 pt-24 pb-40">
    <div class="container mx-auto px-4">
        <h1 class="font-heading text-white text-5xl font-bold mb-6">FAQ</h1>
        <div class="flex flex-wrap gap-3 mb-16">
            <p class="text-white">Still have more questions?</p>
            <a href="#" class="inline-flex items-center gap-2 text-pink-500 hover:text-pink-600 transition duration-200">
                <span class="font-bold">Talk to us</span>
                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
                    <path d="M6.875 3.75L13.125 10L6.875 16.25" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>
            </a>
        </div>
        <div class="flex flex-wrap -mx-4">
            <div class="w-full lg:w-1/2 px-4">
                <button x-data="{ accordion: false }" x-on:click="accordion = !accordion" class="w-full py-6 border-t border-b border-white border-opacity-10">
                    <div class="flex items-center justify-between gap-4">
                        <p class="text-white text-lg font-semibold text-left">What is Vista?</p>
                        <span :class="{ 'rotate-180': accordion, 'rotate-0': !accordion }" class="inline-block transform">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                                <path d="M19.5 8.25L12 15.75L4.5 8.25" stroke="white" style="stroke:white;stroke-opacity:1;" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                            </svg>
                        </span>
                    </div>
                    <div x-ref="container" :style="accordion ? 'max-height: ' + $refs.container.scrollHeight + 'px' : ''" class="overflow-hidden max-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

Dark FAQ Section with Two-Column Accordion Questions

A dark-background FAQ section with a bold FAQ heading, a 'Talk to us' pink link, and two columns of expandable question rows marked by chevron icons. The collapsible rows are separated by thin dividers, presenting common questions for visitors.

FAQ from Flow

Tailwind CSS

Flow

<section class="py-12 lg:py-24">
        <div class="container mx-auto px-4">
            <div class="text-center mb-20">
                <h1 class="font-heading text-6xl mb-6">FAQ</h1>
                <p class="text-gray-700">Here you will find the answers to the frequently asked questions.</p>
            </div>
            <div class="max-w-4xl mx-auto">
                <button x-data="{ accordion: false }" x-on:click.prevent="accordion = !accordion" class="flex w-full py-6 px-8 mb-4 items-start justify-between text-left shadow-md rounded-2xl">
                    <div>
                        <div class="pr-5">
                            <h5 class="text-lg font-medium">What is green energy?</h5>
                        </div>
                        <div x-ref="container" :style="accordion ? 'height: ' + $refs.container.scrollHeight + 'px' : ''" class="overflow-hidden h-0 pr-5 duration-500">
                            <p class="text-gray-700 mt-4">We provide a range of green energy solutions, including solar power systems, wind turbines, energy-efficient appliances, and smart home technologies to enhance energy sustainability.</p>
                        </div>
                    </div>
                    <span class="flex-shrink-0">
                        <div :class="{'hidden': accordion}">
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M12 5.69995V18.3" stroke="#1D1F1E" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                                <path d="M5.69995 12H18.3" stroke="#1D1F1E" stroke-width="1.5" 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

FAQ Accordion with Support Callout

A centered FAQ section with a heading, short intro line, five collapsible question rows marked with plus icons, and a pale yellow callout offering contact details for further help. The layout is a vertical stack of white rounded cards on a white background.

FAQ from Cyber

Tailwind CSS

Cyber

<section class="relative py-20 scan-lines">
    <div class="absolute inset-0 bg-gradient-to-br from-black via-gray-950 to-black"></div>
    <div class="absolute inset-0 opacity-20">
        <div class="absolute top-20 left-1/4 w-2 h-2 bg-blue-400 rounded-full animate-pulse"></div>
        <div class="absolute top-40 right-1/3 w-1 h-1 bg-green-400 rounded-full animate-pulse delay-75"></div>
        <div class="absolute bottom-40 left-1/3 w-3 h-3 bg-purple-500 rounded-full animate-pulse delay-150"></div>
        <div class="absolute bottom-20 right-1/4 w-1 h-1 bg-blue-400 rounded-full animate-pulse delay-300"></div>
    </div>
    
    <div class="container px-4 mx-auto relative z-10">
        <div class="mb-16 text-center">
            <span class="text-xs font-semibold text-blue-400 uppercase tracking-wider animate-pulse">DATA QUERY MODULE</span>
            <h2 class="mt-2 text-3xl leading-tight md:text-4xl md:leading-tight lg:text-5xl lg:leading-tight font-bold font-heading tracking-wider bg-gradient-to-r from-blue-400 via-purple-500 to-green-400 bg-clip-text text-transparent">FREQUENTLY ACCESSED PROTOCOLS</h2>
        </div>
        
        <div class="flex flex-wrap -mx-4 -mb-8">
            <div class="w-full md:w-1/2 lg:w-1/3 mb-8 px-4">
                <div class="relative hologram-effect p-6 rounded-lg border border-blue-400 border-opacity-30 animate-float hover:border-opacity-60 transition-all duration-300 group">
                    <span class="mr-6 mb-6 flex items-center justify-center w-16 h-16 p-3 bg-gradient-to-br from-blue-400 to-purple-500 hover:from-purple-500 hover:to-green-400 transition-all duration-300 transform group-hover:scale-110" style="clip-path: polygon(15px 0, 100% 0, calc(100% - 15px) 100%, 0 100%);">
                        <svg class="text-gray-950" width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M18.1332 14.5333C18.2665 14.6667 18.3998 14.6667 18.6665 14.6667H27.9998C28.7998 14.6667 29.3332 14.1333 29.3332 13.3333C29.3332 13.0667 29.3332 12.9333 29.1998 12.8L24.5332 3.46667C24.1332 2.8 23.3332 2.53334 22.6665 2.93334C22.5332 3.06667 22.2665 3.2 22.1332 3.46667L17.4665 12.8C17.1998 13.3333 17.4665 14.1333 18.1332 14.5333ZM23.3332 6.93334L25.8665 12H20.7998L23.3332 6.93334ZM8.6665 2.66667C5.33317 2.66667 2.6665 5.33334 2.6665 8.66667C2.6665 12 5.33317 14.6667 8.6665 14.6667C11.9998 14.6667 14.6665 12 14.6665 8.66667C14.6665 5.33334 11.9998 2.66667 8.6665 2.66667ZM8.6665 12C6.79984 12 5.33317 10.5333 5.33317 8.66667C5.33317 6.80001 6.79984 5.33334 8.6665 5.33334C10.5332 5.33334 11.9998 6.80001 11.9998 8.66667C11.9998 10.5333 10.5332 12 8.6665 12ZM14.2665 17.7333C13.7332 17.2 12.9332 17.2 12.3998 17.7333L8.6665 21.4667L4.93317 17.7333C4.39984 17.2 3.59984 17.2 3.0665 17.7333C2.53317 18.2667 2.53317 19.0667 3.0665 19.6L6.79984 23.3333L3.0665 27.0667C2.53317 27.6 2.53317 28.4 3.0665 28.9333C3.59984 29.4667 4.39984 29.4667 4.93317 28.9333L8.6665 25.2L12.3998 28.9333C12.9332 29.4667 13.7332 29.4667 14.2665 28.9333C14.7998 28.4 14.7998 27.6 14.2665 27.0667L10.5332 23.3333L14.2665 19.6C14.7998 19.0667 14.7998 18.2667 14.2665 17.7333ZM27.9998 17.3333H18.6665C17.8665 17.3333 17.3332 17.8667 17.3332 18.6667V28C17.3332 28.8 17.8665 29.3333 18.6665 29.3333H27.9998C28.7998 29.3333 29.3332 28.8 29.3332 28V18.6667C29.3332 17.8667 28.7998 17.3333 27.9998 17.3333ZM26.6665 26.6667H19.9998V20H26.6665V26.6667Z" fill="currentColor"></path>
                        </svg>
                    </span>
                    <h3 class="mb-2 text-lg lg:text-2xl font-bold font-heading text-gray-50 tracking-wider hover:text-blue-400 transition-colors duration-300">QUANTUM ENCRYPTION</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

Dark Gradient Card Grid with Frequently Accessed Protocols Heading

A dark-themed grid of six cards under a gradient heading titled 'Frequently Accessed Protocols', each card showing a gradient icon tile, a bold uppercase title, and a bulleted list of monospaced items. The layout is a three-column grid with cards of varying heights and accent dots in the top-right corners.

FAQ from FilyTreck

Tailwind CSS

FilyTreck

<section class="py-24 md:py-36">
    <div class="container mx-auto px-4">
        <div class="flex flex-wrap xl:items-center -m-8">
            <div class="w-full md:w-1/2 p-8">
                <img class="w-full h-full object-cover rounded-3xl" style="height: 924px;" src="fily-assets/faq/pic2.jpg" alt="">
            </div>
            <div class="w-full md:w-1/2 p-8">
                <div class="max-w-xl mx-auto">
                    <h2 class="mb-10 font-heading text-4xl md:text-5xl font-bold">Frequently asked questions</h2>
                    <p class="pb-10 mb-10 text-xl text-gray-500 font-medium leading-relaxed border-b border-gray-100">Aliquam ornare ante eget mi ullamcorper, euismod luctus nulla tincidunt. Ut sem justo, porta eget massa vitae, vehicula convallis velit.</p>
                    <div x-data="{ accordion: true }" x-on:click="accordion = !accordion" class="mb-11 block cursor-pointer">
                        <div class="flex flex-wrap items-center justify-between -m-2">
                            <div class="flex-1 p-2">
                                <h3 :class="{'text-gray-500': accordion}" class="font-heading text-xl text-gray-500 font-bold transition duration-200">How can I get started with FilyTreck?</h3>                  
                            </div>
                            <div class="w-auto p-2">
                                <span class="inline-block transform" :class="{'text-gray-500 rotate-180': accordion, 'rotate-0': !accordion }">
                                    <svg width="14" height="8" viewBox="0 0 14 8" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M7.00003 0.499967C7.26264 0.49951 7.52275 0.550956 7.76541 0.65135C8.00808 0.751745 8.22851 0.899107 8.41403 1.08497L13.707 6.37897L12.293 7.79297L7.00003 2.49997L1.70703 7.79297L0.293031 6.37897L5.58603 1.08597C5.77148 0.899927 5.99187 0.75238 6.23453 0.651813C6.4772 0.551246 6.73735 0.499641 7.00003 0.499967Z" fill="currentColor"></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 section with photo and accordion questions

A light-background FAQ section with a large heading, short intro paragraph, and a vertical list of collapsible questions with chevron indicators, paired with a rounded photo of two people in a meeting on the left. The layout is a two-column split screen.

FAQ from Shopky

Tailwind CSS

Shopky

<section class="py-24">
    <div class="container mx-auto px-4">
        <span class="inline-block text-xs mb-3 py-1 px-5 bg-orange-800 rounded-4xl">What you wanna know about the fashion?</span>
        <h4 class="font-heading text-6xl">Frequently asked questions</h4>
        <p class="mb-16 text-gray-500 max-w-md">Everything you need to know about our product and how it work. Don’t find an answer? Please chat to our team </p>
        <div class="flex flex-wrap -m-9">
            <div class="w-full md:w-1/2 p-9">
                <div x-data="{ accordion: false }" x-on:click="accordion = !accordion" class="mb-10 pb-6 border-b border-gray-200">
                    <div class="flex flex-wrap items-center justify-between -m-2 cursor-pointer">
                        <div class="w-auto p-2">
                            <h6 class="font-heading text-3xl">What is fashion?</h6>
                        </div>
                        <div class="w-auto p-2">
                            <span class="inline-block transform" :class="{'rotate-180': accordion, 'rotate-0': !accordion }">
                                <svg width="15" height="10" viewBox="0 0 15 10" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M13.6664 1.22671C13.4166 0.978378 13.0787 0.838989 12.7264 0.838989C12.3742 0.838989 12.0363 0.978378 11.7864 1.22671L6.99977 5.94671L2.27977 1.22671C2.02995 0.978378 1.69202 0.838989 1.33977 0.838989C0.987521 0.838989 0.649585 0.978378 0.399769 1.22671C0.274798 1.35066 0.175605 1.49813 0.107913 1.66061C0.0402218 1.82309 0.00537109 1.99736 0.00537109 2.17338C0.00537109 2.3494 0.0402218 2.52367 0.107913 2.68615C0.175605 2.84863 0.274798 2.9961 0.399769 3.12005L6.0531 8.77338C6.17705 8.89835 6.32452 8.99754 6.487 9.06523C6.64948 9.13293 6.82375 9.16778 6.99977 9.16778C7.17578 9.16778 7.35006 9.13293 7.51254 9.06523C7.67502 8.99754 7.82248 8.89835 7.94643 8.77338L13.6664 3.12005C13.7914 2.9961 13.8906 2.84863 13.9583 2.68615C14.026 2.52367 14.0608 2.3494 14.0608 2.17338C14.0608 1.99736 14.026 1.82309 13.9583 1.66061C13.8906 1.49813 13.7914 1.35066 13.6664 1.22671Z" fill="#1E2238"></path>
                                </svg>
                            </span>
                        </div>
                    </div>
                    <div x-ref="container" :style="accordion ? 'max-height: ' + $refs.container.scrollHeight + 'px' : ''" class="overflow-hidden max-h-0 duration-500">
                        <p class="mt-2 text-lg text-gray-500">Fashion refers to the popular styles and trends of clothing, accessories, and beauty products at a given time.</p>
                    </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

Two-Column FAQ Accordion with Yellow Eyebrow Badge

A frequently asked questions section with a yellow pill eyebrow label, bold condensed heading, and short supporting text above a two-column grid of collapsible question rows, each marked with a chevron and divider line. The layout is clean and white-background with minimal decoration.

FAQ from Aurora

Tailwind CSS

Aurora

<section class="relative pt-12 pb-12 lg:pb-0 md:pt-24 bg-teal-900">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap -mx-4">
      <div class="w-full lg:w-1/2 px-4 mb-20 lg:mb-0 lg:pb-64">
        <div class="max-w-sm">
          <span class="inline-flex items-center h-6 mb-6 px-2 text-sm font-medium text-gray-50 bg-teal-800 rounded-full">FAQ</span>
          <h1 class="font-heading tracking-tight text-4xl sm:text-5xl font-semibold text-white mb-10">Frequently asked questions</h1>
          <a class="xs:flex-shrink-0 group relative w-full xs:w-auto flex xs:inline-flex items-center justify-center h-10 px-4 py-px font-bold text-gray-900 bg-yellowGreen-600 rounded-lg transition-all duration-300 focus:outline-none" href="#">
            <div class="absolute top-0 left-0 w-full h-full rounded-lg ring ring-yellowGreen-900 animate-pulse group-hover:ring-0 transition duration-300"></div>
            <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M13.3332 7.33333C13.3332 4.38781 10.9454 2 7.99984 2C5.05432 2 2.6665 4.38781 2.6665 7.33333" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              <path d="M1.3335 9.77178V9.56155C1.3335 8.64381 1.95809 7.84385 2.84843 7.62126L3.25464 7.51971C3.63333 7.42504 4.00016 7.71145 4.00016 8.10179V11.2315C4.00016 11.6219 3.63333 11.9083 3.25464 11.8136L2.84842 11.7121C1.95809 11.4895 1.3335 10.6895 1.3335 9.77178Z" stroke="currentColor" stroke-width="1.5"></path>
              <path d="M14.6667 9.77178V9.56155C14.6667 8.64381 14.0421 7.84385 13.1517 7.62126L12.7455 7.51971C12.3668 7.42504 12 7.71145 12 8.10179V11.2315C12 11.6219 12.3668 11.9083 12.7455 11.8136L13.1517 11.7121C14.0421 11.4895 14.6667 10.6895 14.6667 9.77178Z" stroke="currentColor" stroke-width="1.5"></path>
              <path d="M13.3332 12V12C13.3332 12.9205 12.587 13.6667 11.6665 13.6667H9.6665" stroke="currentColor" stroke-width="1.5"></path>
              <path d="M9 14.6667H7C6.44772 14.6667 6 14.219 6 13.6667C6 13.1144 6.44772 12.6667 7 12.6667H9C9.55228 12.6667 10 13.1144 10 13.6667C10 14.219 9.55228 14.6667 9 14.6667Z" stroke="currentColor" stroke-width="1.5"></path>
            </svg>
            <span class="ml-2">Talk to us</span>
          </a>
        </div>
      </div>
      <div class="w-full lg:w-1/2 px-4">
        <div>
          <div x-data="{ accordion: false }" x-on:click="accordion = !accordion" class="cursor-pointer group flex mb-3 items-center justify-between text-left w-full px-6 py-5 bg-teal-800 rounded-xl border border-transparent hover:border-yellowGreen-800 ring ring-transparent hover:ring-yellowGreen-800 focus:outline-none">
            <div class="pr-4">

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 green FAQ section with accordion questions and Talk to us button

A split-screen FAQ section on a dark green background, with a heading and lime call-to-action button on the left and five expandable question rows with chevron icons on the right. The rounded accordion rows are stacked vertically to present common product questions.

FAQ from asitrastudio

Tailwind CSS

asitrastudio

<section class="py-12 md:py-24 bg-coolGray-50">
  <div class="container mx-auto px-4">
    <h1 class="font-heading text-6xl sm:text-8xl md:text-10xl tracking-tighter mb-12">FAQ</h1>
    <div class="flex flex-wrap -mx-4">
      <div class="w-full lg:w-4/12 px-4 mb-16 lg:mb-0">
        <div class="max-w-xs">
          <p class="text-xl text-coolGray-500">
            <span>Couldnt`t fint what you were looking for? write to us at</span>
            <a class="inline-block text-black hover:underline" href="mailto:">help@example.com</a>
          </p>
        </div>
      </div>
      <div class="w-full lg:w-8/12 px-4">
        <div class="lg:ml-auto mw-3xl">
          <div class="py-6 px-0 border-t border-black" x-data="{ accordion: false }">
            <div class="flex w-full justify-between items-center">
              <h5 class="text-xl xs:text-2xl tracking-tight">What is Cult Wine Investment?</h5>
              <button class="flex-shrink-0 inline-flex ml-4 items-center justify-center w-12 h-12 text-black hover:text-white border border-black hover:bg-black rounded-full transition duration-150" x-on:click="accordion = !accordion">
                <span :class="{'rotate-180': accordion, 'rotate-0': !accordion }" class="inline-block transform">
                    <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M13.459 10.4893L9.21179 14.7365L4.9646 10.4893" stroke="currentColor" stroke-width="1.04955" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                      <path d="M9.21094 2.84152L9.21094 14.6175" stroke="currentColor" stroke-width="1.04955" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></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

FAQ Accordion with Contact Prompt

A light-themed FAQ section with a large 'FAQ' heading and a left-column contact prompt linking to an email address. The right column lists eight questions separated by horizontal rules, each with a circular down-arrow expander icon, indicating collapsible accordion rows.

FAQ from Consulty

Tailwind CSS

Consulty

<section class="px-8 md:px-24 py-12">
    <div class="bg-gray-50 rounded-2xl px-8 py-24">
        <h1 class="font-heading tracking-tight text-4xl md:text-6xl font-medium text-center mb-4">FAQ</h1>
        <p class="tracking-tight text-center mb-12">Get to know our most common questions &amp; answers.</p>
        <div class="max-w-2xl mx-auto mb-10">
            <div class="bg-white rounded-2xl border border-gray-100 mb-2 p-6 cursor-pointer" x-data="{ accordion: false }" x-on:click="accordion = !accordion">
                <div class="flex items-center justify-between gap-2">
                    <p class="tracking-tight text-lg font-semibold">How Consulty can help us grow?</p>
                    <div class="w-6 h-6" :class="{'hidden': accordion }">
                        <svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" viewBox="0 0 26 26" fill="none">
                            <path d="M13.1699 6.875V13.125M13.1699 13.125V19.375M13.1699 13.125H19.4199M13.1699 13.125L6.91992 13.125" stroke="#0F172A" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                        </svg>
                    </div>
                    <div class="hidden w-6 h-6" :class="{'hidden': !accordion }">
                        <svg xmlns="http://www.w3.org/2000/svg" width="25" height="24" viewBox="0 0 25 24" fill="none">
                            <path d="M20.3301 12H4.33008" stroke="#171A1F" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                        </svg>
                    </div>
                </div>
                <div class="overflow-hidden transition-all h-0 duration-500" x-ref="container" :style="accordion ? 'height: ' + $refs.container.scrollHeight + 'px' : ''">
                    <p class="tracking-tight text-gray-700 mt-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Volutpat, tempor condimentum commodo tincidunt sit dictumst. Eu placerat to a arcu at sem vitae eros, purus nonprofit.</p>
                </div>
            </div>
            <div class="bg-white rounded-2xl border border-gray-100 mb-2 p-6 cursor-pointer" x-data="{ accordion: false }" x-on:click="accordion = !accordion">

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 Talk to Us CTA

A centered FAQ section on a light gray panel with a large heading, subtitle, four collapsible question rows marked with plus icons, and a closing prompt with a black "Talk to us" button. The layout is a vertically stacked, centered column of white accordion rows.

FAQ from Suncealand

Tailwind CSS

Suncealand

<section class="py-20 md:py-40">
  <div class="container px-4 mx-auto mb-20">
    <div class="max-w-sm mx-auto md:max-w-none mb-24 md:mb-40">
      <div class="inline-flex px-5 py-2 items-center mb-10 bg-purple-50 rounded-full">
        <span class="block w-2 h-2 mr-2 rounded-full bg-blue-500"></span>
        <span class="uppercase text-sm font-medium tracking-tight">FREQUENTLY ASKED QUESTIONS</span>
      </div>
      <div class="flex flex-wrap items-center justify-between -mx-4">
        <div class="w-full md:w-1/2 px-4 mb-12 md:mb-0">
          <h1 class="text-5xl sm:text-7xl md:text-8xl font-heading font-semibold">Helpdesk</h1>
        </div>
        <div class="w-full md:w-1/2 px-4 md:text-right">
          <a class="group relative inline-block h-16 w-full sm:w-40 bg-blueGray-900 rounded" href="#">
            <div class="absolute top-0 left-0 transform -translate-y-1 -translate-x-1 w-full h-full group-hover:translate-y-0 group-hover:translate-x-0 transition duration-300">
              <div class="flex h-full w-full items-center justify-center bg-white border-2 border-blueGray-900 rounded">
                <span class="text-base font-semibold uppercase">See all</span>
              </div>
            </div>
          </a>
        </div>
      </div>
    </div>
    <div class="flex flex-wrap -mx-4 mb-20 lg:mb-36">
      <div class="w-full lg:w-1/3 px-4 mb-12 lg:mb-0">

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 Helpdesk Section with Three Question Columns and Chat Prompt

A light-themed FAQ section with a serif "Helpdesk" heading, a See All button, three repeated question-and-answer columns, and a bordered "Still have questions?" card with an avatar and a yellow Chat button.

FAQ from Sirius Dashboard

Tailwind CSS

Sirius Dashboard

<section class="py-6" x-data="{ tab: '' }" x-init="tab = $refs.tab1.textContent">
    <div class="container mx-auto px-4">
        <div class="mb-8 px-16 bg-purple-500 rounded-2xl">
            <div class="flex flex-wrap lg:flex-nowrap items-center justify-between">
              <div class="pt-8 lg:py-16 max-w-md">
                <h2 class="text-4xl font-bold mb-6 text-white">Let's answer some questions</h2>
                <p class="text-white text-sm">Choose a category to quickly find the help you need</p>
              </div>
              <img class="lg:max-w-md object-cover lg:mx-0" src="sirius-assets/images/saly-computer.png" alt="">
            </div>
        </div>
        <div class="flex flex-wrap -m-4">
            <div class="w-full lg:w-1/4 p-4 mb-8 lg:mb-0">
                <div class="p-2 border border-gray-200 rounded-2xl">
                    <a x-on:click.prevent="tab = $refs.tab1.textContent" class="text-sm font-semibold rounded-2xl flex items-center px-4 py-3 mb-2" :class="{'bg-blue-100 text-blue-500': tab == $refs.tab1.textContent, 'bg-white text-gray-500': tab != $refs.tab1.textContent}" href="#">
                        <span class="mr-3">
                          <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M16.25 4.375H3.75C3.05964 4.375 2.5 4.93464 2.5 5.625V14.375C2.5 15.0654 3.05964 15.625 3.75 15.625H16.25C16.9404 15.625 17.5 15.0654 17.5 14.375V5.625C17.5 4.93464 16.9404 4.375 16.25 4.375Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                            <path d="M2.5 9.375H6.93826C7.08225 9.37497 7.22182 9.42473 7.33331 9.51585C7.4448 9.60696 7.52136 9.73383 7.55 9.87494C7.66536 10.4396 7.97221 10.947 8.41865 11.3115C8.86508 11.6759 9.4237 11.875 10 11.875C10.5763 11.875 11.1349 11.6759 11.5814 11.3115C12.0278 10.947 12.3346 10.4396 12.45 9.87494C12.4787 9.73383 12.5552 9.60696 12.6667 9.51585C12.7782 9.42474 12.9178 9.37497 13.0617 9.375H17.5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                            <path d="M2.5 6.875H17.5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                          </svg>
                        </span>
                        <span x-ref="tab1">Payment</span>
                    </a>

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

Help center with hero banner, category sidebar, and accordion FAQ list

A help center layout with a purple hero banner and illustration at top, a left sidebar of help categories with Payment selected, and a right content area showing a Payment header followed by stacked expandable accordion rows. The sidebar and accordion rows share a clean white card style with rounded borders.

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 Shuffle UX

Get the code for 13,400+ components

Centered FAQ Section with Category Tabs and Accordion Questions

Lorem Ipsum Feature Grid with Icons and Bullet Lists

FAQ from Cronos

Get the code for 13,400+ components

FAQ Section with Category Tabs and Accordion Questions

Feature Grid with Icons and Lorem Ipsum Heading

FAQ from NEUB

Get the code for 13,400+ components

Neo-brutalist FAQ Section with Pink Accent Heading and Accordion List

Neo-Brutalist FAQ Section with Six Bordered Cards

FAQ from Casper

Get the code for 13,400+ components

Dark Help Center FAQ with Sidebar Topics and Search

Dark FAQ Section with Search and Robot Illustration

FAQ from Mirga

Get the code for 13,400+ components

Dark FAQ Carousel with Photo and Navigation Arrows

Dark FAQ Accordion with Heading and See More Button

FAQ from Vista

Get the code for 13,400+ components

Dark FAQ Section with Two-Column Accordion Questions

Dark FAQ Section with Two-Column Accordion Questions

FAQ from Flow

Get the code for 13,400+ components

FAQ Accordion with Support Callout

FAQ accordion section with green energy questions and support prompt

FAQ from Cyber

Get the code for 13,400+ components

Dark Gradient Card Grid with Frequently Accessed Protocols Heading

Protocol Queries Access Terminal FAQ Accordion

FAQ from FilyTreck

Get the code for 13,400+ components

Split-screen FAQ section with photo and accordion questions

Frequently asked questions grid with Show more button

FAQ from Shopky

Get the code for 13,400+ components

Two-Column FAQ Accordion with Yellow Eyebrow Badge

FAQ section with split heading and expandable question list

FAQ from Aurora

Get the code for 13,400+ components

Dark green FAQ section with accordion questions and Talk to us button

FAQ Section with Heading and Accordion Questions on Green Gradient

FAQ from asitrastudio

Get the code for 13,400+ components

FAQ Accordion with Contact Prompt

FAQ Accordion with Two-Column Questions

FAQ from Consulty

Get the code for 13,400+ components

FAQ Accordion Section with Talk to Us CTA

Frequently Asked Questions with Categorized Accordions

FAQ from Suncealand

Get the code for 13,400+ components

FAQ Helpdesk Section with Three Question Columns and Chat Prompt

FAQ section with numbered question cards and See All button

FAQ from Sirius Dashboard

Get the code for 13,400+ components

Help center with hero banner, category sidebar, and accordion FAQ list

The easiest way to create beautiful websites

How many people?

monthly