Tailwind CSS Frequently asked questions
Create an intuitive FAQ section with Tailwind CSS that delivers quick answers and enhances user experience. Use responsive designs to guide visitors through common questions and ensure smooth website navigation.
Last 1 week agoPreview
Code
HTML
React
<div class="bg-white">
<div class="mx-auto max-w-7xl px-6 py-24 sm:py-32 lg:px-8 lg:py-40">
<div class="mx-auto max-w-4xl divide-y divide-gray-900/10">
<h2 class="text-2xl font-bold leading-10 tracking-tight text-gray-900">Frequently asked questions</h2>
<dl class="mt-10 space-y-6 divide-y divide-gray-900/10">
<div class="pt-6">
<dt>
<!-- Expand/collapse question button -->
<button type="button" class="flex w-full items-start justify-between text-left text-gray-900" aria-controls="faq-0" aria-expanded="false">
<span class="text-base font-semibold leading-7">What's the best thing about Switzerland?</span>
<span class="ml-6 flex h-7 items-center">
<!--
Icon when question is collapsed.
Item expanded: "hidden", Item collapsed: ""
-->
<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 6v12m6-6H6" />
</svg>
<!--
Icon when question is expanded.
Item expanded: "", Item collapsed: "hidden"
-->
<svg class="hidden h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M18 12H6" />
</svg>
</span>
</button>
</dt>
<dd class="mt-2 pr-12" id="faq-0">
<p class="text-base leading-7 text-gray-600">I don't know, but the flag is a big plus. Lorem ipsum
dolor sit amet consectetur adipisicing elit. Quas cupiditate laboriosam fugiat.</p>
</dd>
</div>
<div class="pt-6">
<dt>
<!-- Expand/collapse question button -->
<button type="button" class="flex w-full items-start justify-between text-left text-gray-900" aria-controls="faq-0" aria-expanded="false">
<span class="text-base font-semibold leading-7">How do you make holy water?</span>
<span class="ml-6 flex h-7 items-center">
<!--
Icon when question is collapsed.
Item expanded: "hidden", Item collapsed: ""
-->
<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 6v12m6-6H6" />
</svg>
<!--
Icon when question is expanded.
Item expanded: "", Item collapsed: "hidden"
-->
<svg class="hidden h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M18 12H6" />
</svg>
</span>
</button>
</dt>
<!-- answer here... -->
</div>
<div class="pt-6">
<dt>
<!-- Expand/collapse question button -->
<button type="button" class="flex w-full items-start justify-between text-left text-gray-900" aria-controls="faq-0" aria-expanded="false">
<span class="text-base font-semibold leading-7">What do you call someone with no body and no nose?</span>
<span class="ml-6 flex h-7 items-center">
<!--
Icon when question is collapsed.
Item expanded: "hidden", Item collapsed: ""
-->
<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 6v12m6-6H6" />
</svg>
<!--
Icon when question is expanded.
Item expanded: "", Item collapsed: "hidden"
-->
<svg class="hidden h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M18 12H6" />
</svg>
</span>
</button>
</dt>
<!-- answer here... -->
</div>
<div class="pt-6">
<dt>
<!-- Expand/collapse question button -->
<button type="button" class="flex w-full items-start justify-between text-left text-gray-900" aria-controls="faq-0" aria-expanded="false">
<span class="text-base font-semibold leading-7">Why do you never see elephants hiding in trees?</span>
<span class="ml-6 flex h-7 items-center">
<!--
Icon when question is collapsed.
Item expanded: "hidden", Item collapsed: ""
-->
<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 6v12m6-6H6" />
</svg>
<!--
Icon when question is expanded.
Item expanded: "", Item collapsed: "hidden"
-->
<svg class="hidden h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M18 12H6" />
</svg>
</span>
</button>
</dt>
<!-- answer here... -->
</div>
<div class="pt-6">
<dt>
<!-- Expand/collapse question button -->
<button type="button" class="flex w-full items-start justify-between text-left text-gray-900" aria-controls="faq-0" aria-expanded="false">
<span class="text-base font-semibold leading-7">Why did the invisible man turn down the job offer?</span>
<span class="ml-6 flex h-7 items-center">
<!--
Icon when question is collapsed.
Item expanded: "hidden", Item collapsed: ""
-->
<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 6v12m6-6H6" />
</svg>
<!--
Icon when question is expanded.
Item expanded: "", Item collapsed: "hidden"
-->
<svg class="hidden h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M18 12H6" />
</svg>
</span>
</button>
</dt>
<!-- answer here... -->
</div>
<!-- More questions... -->
</dl>
</div>
</div>
</div>
saqlain Aly
11 components