FAQs
Ready to use Tailwind CSS faq components with production-ready, copy-paste HTML code. Use them as they are, or as a starting point to build beautiful websites.
FAQ sections are one of those things that seem boring to build but actually do a lot of work, they reduce support questions, help with SEO, and give people answers without having to email you. We have a few different layouts: a two-column grid, a simple stacked list, accordion-style expandable rows, and one that puts an image next to the questions. All pretty clean and easy to extend. Just drop in your own questions and answers, they're straightforward to edit.
Tailwind
<div class="bg-white py-24 sm:py-32 lg:py-40">
<div class="mx-auto max-w-7xl px-6 lg:px-8">
<div class="lg:grid lg:grid-cols-12 lg:gap-8">
<div class="lg:col-span-5">
<h2 class="text-3xl font-semibold tracking-tight text-gray-900 sm:text-4xl">Frequently asked questions</h2>
<p class="mt-6 text-base leading-7 text-gray-600">
Still need help?
<a href="#" class="font-semibold text-pink-500 hover:text-pink-400">Chat</a>
to us.
</p>
</div>
<div class="mt-10 lg:col-span-7 lg:mt-0">
<dl class="*:border-b *:border-gray-100 *:py-6">
<div class="first:pt-0 last:border-0 last:pb-0">
<dt class="text-xl font-semibold text-gray-900">Can I use your software to become a billionaire?</dt>
<dd class="mt-3 text-base leading-7 text-gray-600">Absolutely! But only if you already have a billion dollars. Otherwise, we recommend starting with something more attainable, like getting through your email inbox.</dd>
</div>
<div class="first:pt-0 last:border-0 last:pb-0">
<dt class="text-xl font-semibold text-gray-900">Is your software bug-free?</dt>
<dd class="mt-3 text-base leading-7 text-gray-600">Our software is as bug-free as a pristine forest... which is to say, there are probably a few bugs hiding somewhere. But don't worry, our team of digital exterminators is on standby!</dd>
</div>
<div class="first:pt-0 last:border-0 last:pb-0">
<dt class="text-xl font-semibold text-gray-900">What do I do if I forget my password?</dt>
<dd class="mt-3 text-base leading-7 text-gray-600">First, try panicking for a few seconds – this seems to help most people. If that doesn't work, click the “Forgot Password” link, and we’ll send you on a thrilling adventure to reset it!</dd>
</div>
<div class="first:pt-0 last:border-0 last:pb-0">
<dt class="text-xl font-semibold text-gray-900">Can your software make me coffee?</dt>
<dd class="mt-3 text-base leading-7 text-gray-600">We're working on it! But until then, our software is excellent at giving you more time to make your own coffee. We call that a win-win!</dd>
</div>
</dl>
</div>
</div>
</div>
</div><div class="bg-white py-24 sm:py-32">
<div class="mx-auto max-w-7xl px-6 lg:px-8">
<h2 class="text-center text-4xl font-semibold tracking-tight text-gray-900 sm:text-5xl">Frequently asked questions</h2>
<p class="mx-auto mt-6 max-w-2xl text-center text-base leading-7 text-gray-600">Stuck on something? We're here to help with all your questions and answers.</p>
<div class="mt-20">
<dl class="grid grid-cols-1 gap-12 sm:grid-cols-2">
<div>
<dt class="text-lg font-semibold text-gray-900">Can I break the internet using your software?</dt>
<dd class="mt-2 text-base leading-7 text-gray-600">Please don’t! The last time someone tried that, the entire office went into panic mode. Let’s keep the internet intact and just use our software as intended.</dd>
</div>
<div>
<dt class="text-lg font-semibold text-gray-900">Will your software do my laundry?</dt>
<dd class="mt-2 text-base leading-7 text-gray-600">If only! Until we figure out how to code a washing machine, we recommend using our software to free up time so you can tackle that laundry pile yourself.</dd>
</div>
<div>
<dt class="text-lg font-semibold text-gray-900">Is there an option to make everything in dark mode?</dt>
<dd class="mt-2 text-base leading-7 text-gray-600">We’re working on a mode so dark that it turns off your screen entirely! Until then, our regular dark mode should do the trick.</dd>
</div>
<div>
<dt class="text-lg font-semibold text-gray-900">What if I push the big red button?</dt>
<dd class="mt-2 text-base leading-7 text-gray-600">We highly recommend not doing that... unless you’re in the mood for a surprise. (Spoiler: It’s an error message.)</dd>
</div>
<div>
<dt class="text-lg font-semibold text-gray-900">Can I set up your software without reading the instructions?</dt>
<dd class="mt-2 text-base leading-7 text-gray-600">Sure, if you enjoy living life on the edge! For everyone else, our instructions are here to make things a bit smoother.</dd>
</div>
<div>
<dt class="text-lg font-semibold text-gray-900">Can I blame your software if my project fails?</dt>
<dd class="mt-2 text-base leading-7 text-gray-600">You can try, but our software is designed to help, not perform miracles. It’s all about how you use it!</dd>
</div>
</dl>
</div>
</div>
</div><div class="bg-gray-900 py-24 sm:py-32">
<div class="mx-auto max-w-7xl px-6 lg:px-8">
<h2 class="text-center text-4xl font-semibold tracking-tight text-white sm:text-5xl">Frequently asked questions</h2>
<p class="mx-auto mt-6 max-w-2xl text-center text-base leading-7 text-gray-300">Stuck on something? We're here to help with all your questions and answers.</p>
<div class="mt-20">
<dl class="grid grid-cols-1 gap-12 sm:grid-cols-2">
<div>
<dt class="text-lg font-semibold text-white">Can I break the internet using your software?</dt>
<dd class="mt-2 text-base leading-7 text-gray-300">Please don’t! The last time someone tried that, the entire office went into panic mode. Let’s keep the internet intact and just use our software as intended.</dd>
</div>
<div>
<dt class="text-lg font-semibold text-white">Will your software do my laundry?</dt>
<dd class="mt-2 text-base leading-7 text-gray-300">If only! Until we figure out how to code a washing machine, we recommend using our software to free up time so you can tackle that laundry pile yourself.</dd>
</div>
<div>
<dt class="text-lg font-semibold text-white">Is there an option to make everything in dark mode?</dt>
<dd class="mt-2 text-base leading-7 text-gray-300">We’re working on a mode so dark that it turns off your screen entirely! Until then, our regular dark mode should do the trick.</dd>
</div>
<div>
<dt class="text-lg font-semibold text-white">What if I push the big red button?</dt>
<dd class="mt-2 text-base leading-7 text-gray-300">We highly recommend not doing that... unless you’re in the mood for a surprise. (Spoiler: It’s an error message.)</dd>
</div>
<div>
<dt class="text-lg font-semibold text-white">Can I set up your software without reading the instructions?</dt>
<dd class="mt-2 text-base leading-7 text-gray-300">Sure, if you enjoy living life on the edge! For everyone else, our instructions are here to make things a bit smoother.</dd>
</div>
<div>
<dt class="text-lg font-semibold text-white">Can I blame your software if my project fails?</dt>
<dd class="mt-2 text-base leading-7 text-gray-300">You can try, but our software is designed to help, not perform miracles. It’s all about how you use it!</dd>
</div>
</dl>
</div>
</div>
</div><div class="bg-white py-24 sm:py-32">
<div class="mx-auto max-w-7xl px-6 lg:px-8">
<h2 class="text-4xl font-semibold tracking-tight text-gray-900 sm:text-5xl">Frequently asked questions</h2>
<p class="mt-6 max-w-2xl text-base leading-7 text-gray-600">Stuck on something? We're here to help with all your questions and answers.</p>
<div class="mt-20">
<dl class="grid grid-cols-1 gap-12 sm:grid-cols-2">
<div class="lg:flex lg:items-start lg:gap-x-4">
<div class="flex h-11 w-11 flex-none items-center justify-center rounded-lg bg-pink-100 shadow-sm">
<svg class="h-6 w-6 text-pink-500" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M7.68377 0.0513439C8.20771 -0.123304 8.77403 0.159856 8.94868 0.683799L9.94868 3.6838C10.1233 4.20774 9.84017 4.77406 9.31622 4.94871C8.79228 5.12336 8.22596 4.8402 8.05131 4.31625L7.05131 1.31625C6.87667 0.792312 7.15983 0.225992 7.68377 0.0513439Z" fill="currentColor" />
<path d="M20.8596 9.54591L16.9706 13.435C16.58 13.8255 15.9469 13.8255 15.5563 13.435C15.1658 13.0445 15.1658 12.4113 15.5563 12.0208L19.4454 8.1317C20.4217 7.15539 20.4217 5.57247 19.4454 4.59616C18.4691 3.61985 16.8862 3.61985 15.9099 4.59616L12.0208 8.48525C11.6303 8.87578 10.9971 8.87578 10.6066 8.48525C10.2161 8.09473 10.2161 7.46156 10.6066 7.07104L14.4957 3.18195C16.253 1.42459 19.1023 1.42459 20.8596 3.18195C22.617 4.93931 22.617 7.78855 20.8596 9.54591Z" fill="currentColor" />
<path d="M3.18198 14.4957L7.07106 10.6066C7.46159 10.216 8.09475 10.216 8.48528 10.6066C8.8758 10.9971 8.8758 11.6303 8.48528 12.0208L4.59619 15.9099C3.61988 16.8862 3.61988 18.4691 4.59619 19.4454C5.5725 20.4217 7.15541 20.4217 8.13172 19.4454L12.0208 15.5563C12.4113 15.1658 13.0445 15.1658 13.435 15.5563C13.8256 15.9468 13.8256 16.58 13.435 16.9705L9.54594 20.8596C7.78858 22.617 4.93934 22.617 3.18198 20.8596C1.42462 19.1023 1.42462 16.253 3.18198 14.4957Z" fill="currentColor" />
<path d="M2.29289 2.29292C2.68341 1.9024 3.31658 1.9024 3.7071 2.29292L6.7071 5.29292C7.09763 5.68344 7.09763 6.31661 6.7071 6.70713C6.31658 7.09766 5.68341 7.09766 5.29289 6.70713L2.29289 3.70713C1.90237 3.31661 1.90237 2.68344 2.29289 2.29292Z" fill="currentColor" />
<path d="M20.2929 21.7071C20.6834 22.0977 21.3166 22.0977 21.7071 21.7071C22.0976 21.3166 22.0976 20.6834 21.7071 20.2929L18.7071 17.2929C18.3166 16.9024 17.6834 16.9024 17.2929 17.2929C16.9024 17.6834 16.9024 18.3166 17.2929 18.7071L20.2929 21.7071Z" fill="currentColor" />
<path d="M15.0513 23.3163C15.226 23.8402 15.7923 24.1234 16.3162 23.9487C16.8402 23.7741 17.1233 23.2077 16.9487 22.6838L15.9487 19.6838C15.774 19.1599 15.2077 18.8767 14.6838 19.0513C14.1598 19.226 13.8767 19.7923 14.0513 20.3163L15.0513 23.3163Z" fill="currentColor" />
<path d="M0.0513134 7.6838C-0.123334 8.20774 0.159826 8.77406 0.683769 8.94871L3.68377 9.94871C4.20771 10.1234 4.77403 9.8402 4.94868 9.31625C5.12333 8.79231 4.84017 8.22599 4.31622 8.05134L1.31622 7.05134C0.792281 6.8767 0.225961 7.15986 0.0513134 7.6838Z" fill="currentColor" />
<path d="M23.3162 15.0513C23.8402 15.226 24.1233 15.7923 23.9487 16.3163C23.774 16.8402 23.2077 17.1234 22.6838 16.9487L19.6838 15.9487C19.1598 15.7741 18.8767 15.2077 19.0513 14.6838C19.226 14.1599 19.7923 13.8767 20.3162 14.0513L23.3162 15.0513Z" fill="currentColor" />
</svg>
</div>
<div class="mt-4 lg:mt-0 lg:flex-auto">
<dt class="text-lg font-semibold text-gray-900">Can I break the internet using your software?</dt>
<dd class="mt-2 text-base leading-7 text-gray-600">Please don’t! The last time someone tried that, the entire office went into panic mode. Let’s keep the internet intact and just use our software as intended.</dd>
</div>
</div>
<div class="lg:flex lg:items-start lg:gap-x-4">
<div class="flex h-11 w-11 flex-none items-center justify-center rounded-lg bg-pink-100 shadow-sm">
<svg class="h-6 w-6 text-pink-500" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M14 13C14 14.1046 13.1046 15 12 15M17 6H17.01M17 13C17 15.7614 14.7614 18 12 18C9.23858 18 7 15.7614 7 13C7 10.2386 9.23858 8 12 8C14.7614 8 17 10.2386 17 13ZM6 21H18C19.1046 21 20 20.1046 20 19V5C20 3.89543 19.1046 3 18 3H6C4.89543 3 4 3.89543 4 5V19C4 20.1046 4.89543 21 6 21Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</div>
<div class="mt-4 lg:mt-0 lg:flex-auto">
<dt class="text-lg font-semibold text-gray-900">Will your software do my laundry?</dt>
<dd class="mt-2 text-base leading-7 text-gray-600">If only! Until we figure out how to code a washing machine, we recommend using our software to free up time so you can tackle that laundry pile yourself.</dd>
</div>
</div>
<div class="lg:flex lg:items-start lg:gap-x-4">
<div class="flex h-11 w-11 flex-none items-center justify-center rounded-lg bg-pink-100 shadow-sm">
<svg class="h-6 w-6 text-pink-500" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g fill="currentColor" fill-rule="nonzero">
<path d="M12,22 C17.5228475,22 22,17.5228475 22,12 C22,6.4771525 17.5228475,2 12,2 C6.4771525,2 2,6.4771525 2,12 C2,17.5228475 6.4771525,22 12,22 Z M12,20 L12,4 C16.418278,4 20,7.581722 20,12 C20,16.418278 16.418278,20 12,20 Z"></path>
</g>
</g>
</svg>
</div>
<div class="mt-4 lg:mt-0 lg:flex-auto">
<dt class="text-lg font-semibold text-gray-900">Is there an option to make everything in dark mode?</dt>
<dd class="mt-2 text-base leading-7 text-gray-600">We’re working on a mode so dark that it turns off your screen entirely! Until then, our regular dark mode should do the trick.</dd>
</div>
</div>
<div class="lg:flex lg:items-start lg:gap-x-4">
<div class="flex h-11 w-11 flex-none items-center justify-center rounded-lg bg-pink-100 shadow-sm">
<svg class="h-6 w-6 text-pink-500" viewBox="0 -0.5 17 17" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true">
<defs></defs>
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g transform="translate(1.000000, 0.000000)" fill="currentColor">
<path d="M13.646,2.371 C10.535,-0.739 5.469,-0.74 2.358,2.371 C-0.753,5.483 -0.752,10.548 2.358,13.66 C5.469,16.77 10.534,16.771 13.646,13.66 C16.758,10.547 16.757,5.483 13.646,2.371 L13.646,2.371 Z M3.587,12.431 C1.148,9.993 1.146,6.028 3.58,3.594 C6.014,1.159 9.979,1.162 12.418,3.6 C14.856,6.038 14.857,10.004 12.424,12.438 C9.988,14.872 6.024,14.869 3.587,12.431 L3.587,12.431 Z"></path>
<path d="M10.164,11.063 C9.982,11.063 9.845,10.991 9.776,10.922 L8.009,9.157 L6.314,10.852 C6.248,10.918 6.095,10.998 5.891,10.998 C5.738,10.998 5.507,10.952 5.288,10.733 C5.067,10.513 5.018,10.295 5.017,10.153 C5.013,9.965 5.086,9.823 5.157,9.753 L6.881,8.028 L5.201,6.35 C5.049,6.197 4.922,5.723 5.321,5.325 C5.546,5.1 5.767,5.053 5.914,5.053 C6.097,5.053 6.234,5.125 6.301,5.194 L8.009,6.9 L9.705,5.204 C9.773,5.137 9.925,5.058 10.129,5.058 C10.283,5.058 10.514,5.104 10.733,5.324 C11.111,5.703 11.035,6.134 10.864,6.304 L9.138,8.03 L10.875,9.766 C10.942,9.834 11.021,9.986 11.021,10.19 C11.021,10.344 10.976,10.573 10.756,10.792 C10.531,11.016 10.311,11.063 10.164,11.063 L10.164,11.063 L10.164,11.063 Z"></path>
</g>
</g>
</svg>
</div>
<div class="mt-4 lg:mt-0 lg:flex-auto">
<dt class="text-lg font-semibold text-gray-900">What if I push the big red button?</dt>
<dd class="mt-2 text-base leading-7 text-gray-600">We highly recommend not doing that... unless you’re in the mood for a surprise. (Spoiler: It’s an error message.)</dd>
</div>
</div>
<div class="lg:flex lg:items-start lg:gap-x-4">
<div class="flex h-11 w-11 flex-none items-center justify-center rounded-lg bg-pink-100 shadow-sm">
<svg class="h-6 w-6 text-pink-500" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" fill="none" aria-hidden="true">
<path stroke="currentColor" stroke-linejoin="round" stroke-width="2.5" d="M9 25v2a2 2 0 002 2h14a2 2 0 002-2V10a2 2 0 00-2-2h-2" />
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 9h4M9 15h10M9 19h8" />
<circle cx="19" cy="9" r="1" fill="currentColor" />
<path stroke="currentColor" stroke-linejoin="round" stroke-width="2.5" d="M5 6a2 2 0 012-2h14a2 2 0 012 2v17a2 2 0 01-2 2H7a2 2 0 01-2-2V6z" />
</svg>
</div>
<div class="mt-4 lg:mt-0 lg:flex-auto">
<dt class="text-lg font-semibold text-gray-900">Can I set up your software without reading the instructions?</dt>
<dd class="mt-2 text-base leading-7 text-gray-600">Sure, if you enjoy living life on the edge! For everyone else, our instructions are here to make things a bit smoother.</dd>
</div>
</div>
<div class="lg:flex lg:items-start lg:gap-x-4">
<div class="flex h-11 w-11 flex-none items-center justify-center rounded-lg bg-pink-100 shadow-sm">
<svg class="h-6 w-6 text-pink-500" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M17 3.33782C15.5291 2.48697 13.8214 2 12 2C6.47715 2 2 6.47715 2 12C2 13.5997 2.37562 15.1116 3.04346 16.4525C3.22094 16.8088 3.28001 17.2161 3.17712 17.6006L2.58151 19.8267C2.32295 20.793 3.20701 21.677 4.17335 21.4185L6.39939 20.8229C6.78393 20.72 7.19121 20.7791 7.54753 20.9565C8.88837 21.6244 10.4003 22 12 22C17.5228 22 22 17.5228 22 12C22 10.1786 21.513 8.47087 20.6622 7" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
<path d="M8 12H8.009M11.991 12H12M15.991 12H16" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</div>
<div class="mt-4 lg:mt-0 lg:flex-auto">
<dt class="text-lg font-semibold text-gray-900">Can I blame your software if my project fails?</dt>
<dd class="mt-2 text-base leading-7 text-gray-600">You can try, but our software is designed to help, not perform miracles. It’s all about how you use it!</dd>
</div>
</div>
</dl>
</div>
</div>
</div><div class="bg-white py-24 sm:py-32">
<div class="mx-auto max-w-7xl px-6 lg:px-8">
<h2 class="text-center text-4xl font-semibold tracking-tight text-gray-900 sm:text-5xl">Frequently asked questions</h2>
<p class="mx-auto mt-6 max-w-2xl text-center text-base leading-7 text-gray-600">Have questions? We're here to help.</p>
<div class="accordion-container mx-auto mt-20 max-w-4xl">
<dl class="*:border-b *:border-gray-900/10 *:py-6">
<div class="first:pt-0 last:border-b-0 last:pb-0">
<dt>
<button type="button" id="accordion-button:1" class="flex w-full items-start justify-between text-start" aria-expanded="false" aria-controls="accordion-panel:1">
<span class="text-base font-semibold leading-7 text-gray-900">Is your software bug-free?</span>
<span class="ml-6 mt-1 flex h-5 w-5 flex-none items-center justify-center rounded-full ring-2 ring-inset ring-gray-900">
<svg class="plus-icon block h-4 w-4 text-gray-900" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M6 12H18M12 6V18" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" />
</svg>
<svg class="minus-icon hidden h-4 w-4 text-gray-900" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M6 12L18 12" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</span>
</button>
</dt>
<dd class="mt-2 hidden pr-12" id="accordion-panel:1">
<p class="text-base leading-7 text-gray-600">Our software is as bug-free as a pristine forest... which is to say, there are probably a few bugs hiding somewhere. But don't worry, our team of digital exterminators is on standby!</p>
</dd>
</div>
<div class="first:pt-0 last:border-b-0 last:pb-0">
<dt>
<button type="button" id="accordion-button:2" class="flex w-full items-start justify-between text-start" aria-expanded="false" aria-controls="accordion-panel:2">
<span class="text-base font-semibold leading-7 text-gray-900">What do I do if I forget my password?</span>
<span class="ml-6 mt-1 flex h-5 w-5 flex-none items-center justify-center rounded-full ring-2 ring-inset ring-gray-900">
<svg class="plus-icon block h-4 w-4 text-gray-900" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M6 12H18M12 6V18" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" />
</svg>
<svg class="minus-icon hidden h-4 w-4 text-gray-900" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M6 12L18 12" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</span>
</button>
</dt>
<dd class="mt-2 hidden pr-12" id="accordion-panel:2">
<p class="text-base leading-7 text-gray-600">First, try panicking for a few seconds – this seems to help most people. If that doesn't work, click the “Forgot Password” link, and we’ll send you on a thrilling adventure to reset it!</p>
</dd>
</div>
<div class="first:pt-0 last:border-b-0 last:pb-0">
<dt>
<button type="button" id="accordion-button:3" class="flex w-full items-start justify-between text-start" aria-expanded="false" aria-controls="accordion-panel:3">
<span class="text-base font-semibold leading-7 text-gray-900">Can I use your software to become a billionaire?</span>
<span class="ml-6 mt-1 flex h-5 w-5 flex-none items-center justify-center rounded-full ring-2 ring-inset ring-gray-900">
<svg class="plus-icon block h-4 w-4 text-gray-900" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M6 12H18M12 6V18" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" />
</svg>
<svg class="minus-icon hidden h-4 w-4 text-gray-900" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M6 12L18 12" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</span>
</button>
</dt>
<dd class="mt-2 hidden pr-12" id="accordion-panel:3">
<p class="text-base leading-7 text-gray-600">Absolutely! But only if you already have a billion dollars. Otherwise, we recommend starting with something more attainable, like getting through your email inbox.</p>
</dd>
</div>
<div class="first:pt-0 last:border-b-0 last:pb-0">
<dt>
<button type="button" id="accordion-button:4" class="flex w-full items-start justify-between text-start" aria-expanded="false" aria-controls="accordion-panel:4">
<span class="text-base font-semibold leading-7 text-gray-900">Is there an option to make everything in dark mode?</span>
<span class="ml-6 mt-1 flex h-5 w-5 flex-none items-center justify-center rounded-full ring-2 ring-inset ring-gray-900">
<svg class="plus-icon block h-4 w-4 text-gray-900" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M6 12H18M12 6V18" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" />
</svg>
<svg class="minus-icon hidden h-4 w-4 text-gray-900" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M6 12L18 12" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</span>
</button>
</dt>
<dd class="mt-2 hidden pr-12" id="accordion-panel:4">
<p class="text-base leading-7 text-gray-600">We’re working on a mode so dark that it turns off your screen entirely! Until then, our regular dark mode should do the trick.</p>
</dd>
</div>
<div class="first:pt-0 last:border-b-0 last:pb-0">
<dt>
<button type="button" id="accordion-button:5" class="flex w-full items-start justify-between text-start" aria-expanded="false" aria-controls="accordion-panel:5">
<span class="text-base font-semibold leading-7 text-gray-900">Can I break the internet using your software?</span>
<span class="ml-6 mt-1 flex h-5 w-5 flex-none items-center justify-center rounded-full ring-2 ring-inset ring-gray-900">
<svg class="plus-icon block h-4 w-4 text-gray-900" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M6 12H18M12 6V18" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" />
</svg>
<svg class="minus-icon hidden h-4 w-4 text-gray-900" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M6 12L18 12" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</span>
</button>
</dt>
<dd class="mt-2 hidden pr-12" id="accordion-panel:5">
<p class="text-base leading-7 text-gray-600">Please don’t! The last time someone tried that, the entire office went into panic mode. Let’s keep the internet intact and just use our software as intended.</p>
</dd>
</div>
<div class="first:pt-0 last:border-b-0 last:pb-0">
<dt>
<button type="button" id="accordion-button:6" class="flex w-full items-start justify-between text-start" aria-expanded="false" aria-controls="accordion-panel:6">
<span class="text-base font-semibold leading-7 text-gray-900">Can I blame your software if my project fails?</span>
<span class="ml-6 mt-1 flex h-5 w-5 flex-none items-center justify-center rounded-full ring-2 ring-inset ring-gray-900">
<svg class="plus-icon block h-4 w-4 text-gray-900" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M6 12H18M12 6V18" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" />
</svg>
<svg class="minus-icon hidden h-4 w-4 text-gray-900" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M6 12L18 12" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</span>
</button>
</dt>
<dd class="mt-2 hidden pr-12" id="accordion-panel:6">
<p class="text-base leading-7 text-gray-600">You can try, but our software is designed to help, not perform miracles. It’s all about how you use it!</p>
</dd>
</div>
</dl>
</div>
</div>
</div>const ACCORDION_BUTTON = 'button[id^="accordion-button:"]';
const PANEL_PREFIX = "accordion-panel:";
const PLUS_ICON_CLASS = "plus-icon";
const MINUS_ICON_CLASS = "minus-icon";
const HIDDEN_CLASS = "hidden";
// Event delegation on the accordion container
const accordionContainer = document.querySelector(".accordion-container");
if (accordionContainer) {
accordionContainer.addEventListener("click", (event) => {
const button = event.target.closest(ACCORDION_BUTTON);
if (!button) return;
// Toggle the panel and icons
toggleAccordion(button);
});
}
function toggleAccordion(button) {
const panelId = button.getAttribute("aria-controls");
const panel = document.getElementById(panelId);
if (!panel) return;
// Toggle expanded state
const isExpanded = button.getAttribute("aria-expanded") === "true";
button.setAttribute("aria-expanded", !isExpanded);
panel.classList.toggle(HIDDEN_CLASS, isExpanded);
// Toggle icons visibility
const plusIcon = button.querySelector(`.${PLUS_ICON_CLASS}`);
const minusIcon = button.querySelector(`.${MINUS_ICON_CLASS}`);
if (plusIcon && minusIcon) {
plusIcon.classList.toggle(HIDDEN_CLASS, !isExpanded);
minusIcon.classList.toggle(HIDDEN_CLASS, isExpanded);
}
}<div class="bg-gray-900 py-24 sm:py-32">
<div class="mx-auto max-w-7xl px-6 lg:px-8">
<h2 class="text-center text-4xl font-semibold tracking-tight text-white sm:text-5xl">Frequently asked questions</h2>
<p class="mx-auto mt-6 max-w-2xl text-center text-base leading-7 text-gray-300">Have questions? We're here to help.</p>
<div class="accordion-container mx-auto mt-20 max-w-4xl">
<dl class="*:border-b *:border-white/10 *:py-6">
<div class="first:pt-0 last:border-b-0 last:pb-0">
<dt>
<button type="button" id="accordion-button:1" class="flex w-full items-start justify-between text-start" aria-expanded="false" aria-controls="accordion-panel:1">
<span class="text-base font-semibold leading-7 text-white">Is your software bug-free?</span>
<span class="ml-6 mt-1 flex h-5 w-5 flex-none items-center justify-center rounded-full ring-2 ring-inset ring-white">
<svg class="plus-icon block h-4 w-4 text-white" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M6 12H18M12 6V18" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" />
</svg>
<svg class="minus-icon hidden h-4 w-4 text-white" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M6 12L18 12" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</span>
</button>
</dt>
<dd class="mt-2 hidden pr-12" id="accordion-panel:1">
<p class="text-base leading-7 text-gray-300">Our software is as bug-free as a pristine forest... which is to say, there are probably a few bugs hiding somewhere. But don't worry, our team of digital exterminators is on standby!</p>
</dd>
</div>
<div class="first:pt-0 last:border-b-0 last:pb-0">
<dt>
<button type="button" id="accordion-button:2" class="flex w-full items-start justify-between text-start" aria-expanded="false" aria-controls="accordion-panel:2">
<span class="text-base font-semibold leading-7 text-white">What do I do if I forget my password?</span>
<span class="ml-6 mt-1 flex h-5 w-5 flex-none items-center justify-center rounded-full ring-2 ring-inset ring-white">
<svg class="plus-icon block h-4 w-4 text-white" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M6 12H18M12 6V18" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" />
</svg>
<svg class="minus-icon hidden h-4 w-4 text-white" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M6 12L18 12" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</span>
</button>
</dt>
<dd class="mt-2 hidden pr-12" id="accordion-panel:2">
<p class="text-base leading-7 text-gray-300">First, try panicking for a few seconds – this seems to help most people. If that doesn't work, click the “Forgot Password” link, and we’ll send you on a thrilling adventure to reset it!</p>
</dd>
</div>
<div class="first:pt-0 last:border-b-0 last:pb-0">
<dt>
<button type="button" id="accordion-button:3" class="flex w-full items-start justify-between text-start" aria-expanded="false" aria-controls="accordion-panel:3">
<span class="text-base font-semibold leading-7 text-white">Can I use your software to become a billionaire?</span>
<span class="ml-6 mt-1 flex h-5 w-5 flex-none items-center justify-center rounded-full ring-2 ring-inset ring-white">
<svg class="plus-icon block h-4 w-4 text-white" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M6 12H18M12 6V18" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" />
</svg>
<svg class="minus-icon hidden h-4 w-4 text-white" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M6 12L18 12" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</span>
</button>
</dt>
<dd class="mt-2 hidden pr-12" id="accordion-panel:3">
<p class="text-base leading-7 text-gray-300">Absolutely! But only if you already have a billion dollars. Otherwise, we recommend starting with something more attainable, like getting through your email inbox.</p>
</dd>
</div>
<div class="first:pt-0 last:border-b-0 last:pb-0">
<dt>
<button type="button" id="accordion-button:4" class="flex w-full items-start justify-between text-start" aria-expanded="false" aria-controls="accordion-panel:4">
<span class="text-base font-semibold leading-7 text-white">Is there an option to make everything in dark mode?</span>
<span class="ml-6 mt-1 flex h-5 w-5 flex-none items-center justify-center rounded-full ring-2 ring-inset ring-white">
<svg class="plus-icon block h-4 w-4 text-white" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M6 12H18M12 6V18" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" />
</svg>
<svg class="minus-icon hidden h-4 w-4 text-white" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M6 12L18 12" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</span>
</button>
</dt>
<dd class="mt-2 hidden pr-12" id="accordion-panel:4">
<p class="text-base leading-7 text-gray-300">We’re working on a mode so dark that it turns off your screen entirely! Until then, our regular dark mode should do the trick.</p>
</dd>
</div>
<div class="first:pt-0 last:border-b-0 last:pb-0">
<dt>
<button type="button" id="accordion-button:5" class="flex w-full items-start justify-between text-start" aria-expanded="false" aria-controls="accordion-panel:5">
<span class="text-base font-semibold leading-7 text-white">Can I break the internet using your software?</span>
<span class="ml-6 mt-1 flex h-5 w-5 flex-none items-center justify-center rounded-full ring-2 ring-inset ring-white">
<svg class="plus-icon block h-4 w-4 text-white" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M6 12H18M12 6V18" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" />
</svg>
<svg class="minus-icon hidden h-4 w-4 text-white" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M6 12L18 12" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</span>
</button>
</dt>
<dd class="mt-2 hidden pr-12" id="accordion-panel:5">
<p class="text-base leading-7 text-gray-300">Please don’t! The last time someone tried that, the entire office went into panic mode. Let’s keep the internet intact and just use our software as intended.</p>
</dd>
</div>
<div class="first:pt-0 last:border-b-0 last:pb-0">
<dt>
<button type="button" id="accordion-button:6" class="flex w-full items-start justify-between text-start" aria-expanded="false" aria-controls="accordion-panel:6">
<span class="text-base font-semibold leading-7 text-white">Can I blame your software if my project fails?</span>
<span class="ml-6 mt-1 flex h-5 w-5 flex-none items-center justify-center rounded-full ring-2 ring-inset ring-white">
<svg class="plus-icon block h-4 w-4 text-white" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M6 12H18M12 6V18" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" />
</svg>
<svg class="minus-icon hidden h-4 w-4 text-white" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M6 12L18 12" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</span>
</button>
</dt>
<dd class="mt-2 hidden pr-12" id="accordion-panel:6">
<p class="text-base leading-7 text-gray-300">You can try, but our software is designed to help, not perform miracles. It’s all about how you use it!</p>
</dd>
</div>
</dl>
</div>
</div>
</div>const ACCORDION_BUTTON = 'button[id^="accordion-button:"]';
const PANEL_PREFIX = "accordion-panel:";
const PLUS_ICON_CLASS = "plus-icon";
const MINUS_ICON_CLASS = "minus-icon";
const HIDDEN_CLASS = "hidden";
// Event delegation on the accordion container
const accordionContainer = document.querySelector(".accordion-container");
if (accordionContainer) {
accordionContainer.addEventListener("click", (event) => {
const button = event.target.closest(ACCORDION_BUTTON);
if (!button) return;
// Toggle the panel and icons
toggleAccordion(button);
});
}
function toggleAccordion(button) {
const panelId = button.getAttribute("aria-controls");
const panel = document.getElementById(panelId);
if (!panel) return;
// Toggle expanded state
const isExpanded = button.getAttribute("aria-expanded") === "true";
button.setAttribute("aria-expanded", !isExpanded);
panel.classList.toggle(HIDDEN_CLASS, isExpanded);
// Toggle icons visibility
const plusIcon = button.querySelector(`.${PLUS_ICON_CLASS}`);
const minusIcon = button.querySelector(`.${MINUS_ICON_CLASS}`);
if (plusIcon && minusIcon) {
plusIcon.classList.toggle(HIDDEN_CLASS, !isExpanded);
minusIcon.classList.toggle(HIDDEN_CLASS, isExpanded);
}
}<div class="bg-white py-24 sm:py-32">
<div class="mx-auto max-w-7xl px-6 lg:px-8">
<h2 class="text-center text-4xl font-semibold tracking-tight text-gray-900 sm:text-5xl">Frequently asked question</h2>
<p class="mx-auto mt-6 max-w-2xl text-center text-base leading-7 text-gray-600">Have any question? We're here to assist you.</p>
<div class="mt-20">
<dl class="grid grid-cols-1 gap-12 sm:grid-cols-2 lg:grid-cols-3">
<div>
<dt class="text-lg font-semibold text-gray-900">Can I break the internet using your software?</dt>
<dd class="mt-2 text-base leading-7 text-gray-600">Please don’t! The last time someone tried that, the entire office went into panic mode. Let’s keep the internet intact and just use our software as intended.</dd>
</div>
<div>
<dt class="text-lg font-semibold text-gray-900">Will your software do my laundry?</dt>
<dd class="mt-2 text-base leading-7 text-gray-600">If only! Until we figure out how to code a washing machine, we recommend using our software to free up time so you can tackle that laundry pile yourself.</dd>
</div>
<div>
<dt class="text-lg font-semibold text-gray-900">Is there an option to make everything in dark mode?</dt>
<dd class="mt-2 text-base leading-7 text-gray-600">We’re working on a mode so dark that it turns off your screen entirely! Until then, our regular dark mode should do the trick.</dd>
</div>
<div>
<dt class="text-lg font-semibold text-gray-900">What if I push the big red button?</dt>
<dd class="mt-2 text-base leading-7 text-gray-600">We highly recommend not doing that... unless you’re in the mood for a surprise. (Spoiler: It’s an error message.)</dd>
</div>
<div>
<dt class="text-lg font-semibold text-gray-900">Can I set up your software without reading the instructions?</dt>
<dd class="mt-2 text-base leading-7 text-gray-600">Sure, if you enjoy living life on the edge! For everyone else, our instructions are here to make things a bit smoother.</dd>
</div>
<div>
<dt class="text-lg font-semibold text-gray-900">Can I blame your software if my project fails?</dt>
<dd class="mt-2 text-base leading-7 text-gray-600">You can try, but our software is designed to help, not perform miracles. It’s all about how you use it!</dd>
</div>
</dl>
</div>
</div>
</div><div class="bg-gray-900 py-24 sm:py-32">
<div class="mx-auto max-w-7xl px-6 lg:px-8">
<h2 class="text-center text-4xl font-semibold tracking-tight text-white sm:text-5xl">Frequently asked question</h2>
<p class="mx-auto mt-6 max-w-2xl text-center text-base leading-7 text-gray-300">Have any question? We're here to assist you.</p>
<div class="mt-20">
<dl class="grid grid-cols-1 gap-12 sm:grid-cols-2 lg:grid-cols-3">
<div>
<dt class="text-lg font-semibold text-white">Can I break the internet using your software?</dt>
<dd class="mt-2 text-base leading-7 text-gray-300">Please don’t! The last time someone tried that, the entire office went into panic mode. Let’s keep the internet intact and just use our software as intended.</dd>
</div>
<div>
<dt class="text-lg font-semibold text-white">Will your software do my laundry?</dt>
<dd class="mt-2 text-base leading-7 text-gray-300">If only! Until we figure out how to code a washing machine, we recommend using our software to free up time so you can tackle that laundry pile yourself.</dd>
</div>
<div>
<dt class="text-lg font-semibold text-white">Is there an option to make everything in dark mode?</dt>
<dd class="mt-2 text-base leading-7 text-gray-300">We’re working on a mode so dark that it turns off your screen entirely! Until then, our regular dark mode should do the trick.</dd>
</div>
<div>
<dt class="text-lg font-semibold text-white">What if I push the big red button?</dt>
<dd class="mt-2 text-base leading-7 text-gray-300">We highly recommend not doing that... unless you’re in the mood for a surprise. (Spoiler: It’s an error message.)</dd>
</div>
<div>
<dt class="text-lg font-semibold text-white">Can I set up your software without reading the instructions?</dt>
<dd class="mt-2 text-base leading-7 text-gray-300">Sure, if you enjoy living life on the edge! For everyone else, our instructions are here to make things a bit smoother.</dd>
</div>
<div>
<dt class="text-lg font-semibold text-white">Can I blame your software if my project fails?</dt>
<dd class="mt-2 text-base leading-7 text-gray-300">You can try, but our software is designed to help, not perform miracles. It’s all about how you use it!</dd>
</div>
</dl>
</div>
</div>
</div><div class="bg-white py-24 sm:py-32">
<div class="mx-auto max-w-7xl px-6 lg:px-8">
<h2 class="text-4xl font-semibold tracking-tight text-gray-900 sm:text-5xl">Frequently asked question</h2>
<p class="mt-6 max-w-2xl text-base leading-7 text-gray-600">Have any question? We're here to assist you.</p>
<div class="mt-20">
<dl class="grid grid-cols-1 gap-12 sm:grid-cols-2 lg:grid-cols-3">
<div>
<div class="flex h-11 w-11 items-center justify-center rounded-lg bg-pink-100 shadow-sm">
<svg class="h-6 w-6 text-pink-500" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M7.68377 0.0513439C8.20771 -0.123304 8.77403 0.159856 8.94868 0.683799L9.94868 3.6838C10.1233 4.20774 9.84017 4.77406 9.31622 4.94871C8.79228 5.12336 8.22596 4.8402 8.05131 4.31625L7.05131 1.31625C6.87667 0.792312 7.15983 0.225992 7.68377 0.0513439Z" fill="currentColor"></path>
<path d="M20.8596 9.54591L16.9706 13.435C16.58 13.8255 15.9469 13.8255 15.5563 13.435C15.1658 13.0445 15.1658 12.4113 15.5563 12.0208L19.4454 8.1317C20.4217 7.15539 20.4217 5.57247 19.4454 4.59616C18.4691 3.61985 16.8862 3.61985 15.9099 4.59616L12.0208 8.48525C11.6303 8.87578 10.9971 8.87578 10.6066 8.48525C10.2161 8.09473 10.2161 7.46156 10.6066 7.07104L14.4957 3.18195C16.253 1.42459 19.1023 1.42459 20.8596 3.18195C22.617 4.93931 22.617 7.78855 20.8596 9.54591Z" fill="currentColor"></path>
<path d="M3.18198 14.4957L7.07106 10.6066C7.46159 10.216 8.09475 10.216 8.48528 10.6066C8.8758 10.9971 8.8758 11.6303 8.48528 12.0208L4.59619 15.9099C3.61988 16.8862 3.61988 18.4691 4.59619 19.4454C5.5725 20.4217 7.15541 20.4217 8.13172 19.4454L12.0208 15.5563C12.4113 15.1658 13.0445 15.1658 13.435 15.5563C13.8256 15.9468 13.8256 16.58 13.435 16.9705L9.54594 20.8596C7.78858 22.617 4.93934 22.617 3.18198 20.8596C1.42462 19.1023 1.42462 16.253 3.18198 14.4957Z" fill="currentColor"></path>
<path d="M2.29289 2.29292C2.68341 1.9024 3.31658 1.9024 3.7071 2.29292L6.7071 5.29292C7.09763 5.68344 7.09763 6.31661 6.7071 6.70713C6.31658 7.09766 5.68341 7.09766 5.29289 6.70713L2.29289 3.70713C1.90237 3.31661 1.90237 2.68344 2.29289 2.29292Z" fill="currentColor"></path>
<path d="M20.2929 21.7071C20.6834 22.0977 21.3166 22.0977 21.7071 21.7071C22.0976 21.3166 22.0976 20.6834 21.7071 20.2929L18.7071 17.2929C18.3166 16.9024 17.6834 16.9024 17.2929 17.2929C16.9024 17.6834 16.9024 18.3166 17.2929 18.7071L20.2929 21.7071Z" fill="currentColor"></path>
<path d="M15.0513 23.3163C15.226 23.8402 15.7923 24.1234 16.3162 23.9487C16.8402 23.7741 17.1233 23.2077 16.9487 22.6838L15.9487 19.6838C15.774 19.1599 15.2077 18.8767 14.6838 19.0513C14.1598 19.226 13.8767 19.7923 14.0513 20.3163L15.0513 23.3163Z" fill="currentColor"></path>
<path d="M0.0513134 7.6838C-0.123334 8.20774 0.159826 8.77406 0.683769 8.94871L3.68377 9.94871C4.20771 10.1234 4.77403 9.8402 4.94868 9.31625C5.12333 8.79231 4.84017 8.22599 4.31622 8.05134L1.31622 7.05134C0.792281 6.8767 0.225961 7.15986 0.0513134 7.6838Z" fill="currentColor"></path>
<path d="M23.3162 15.0513C23.8402 15.226 24.1233 15.7923 23.9487 16.3163C23.774 16.8402 23.2077 17.1234 22.6838 16.9487L19.6838 15.9487C19.1598 15.7741 18.8767 15.2077 19.0513 14.6838C19.226 14.1599 19.7923 13.8767 20.3162 14.0513L23.3162 15.0513Z" fill="currentColor"></path>
</svg>
</div>
<div class="mt-4">
<dt class="text-lg font-semibold text-gray-900">Can I break the internet using your software?</dt>
<dd class="mt-2 text-base leading-7 text-gray-600">Please don’t! The last time someone tried that, the entire office went into panic mode. Let’s keep the internet intact and just use our software as intended.</dd>
</div>
</div>
<div>
<div class="flex h-11 w-11 items-center justify-center rounded-lg bg-pink-100 shadow-sm">
<svg class="h-6 w-6 text-pink-500" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M14 13C14 14.1046 13.1046 15 12 15M17 6H17.01M17 13C17 15.7614 14.7614 18 12 18C9.23858 18 7 15.7614 7 13C7 10.2386 9.23858 8 12 8C14.7614 8 17 10.2386 17 13ZM6 21H18C19.1046 21 20 20.1046 20 19V5C20 3.89543 19.1046 3 18 3H6C4.89543 3 4 3.89543 4 5V19C4 20.1046 4.89543 21 6 21Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</div>
<div class="mt-4">
<dt class="text-lg font-semibold text-gray-900">Will your software do my laundry?</dt>
<dd class="mt-2 text-base leading-7 text-gray-600">If only! Until we figure out how to code a washing machine, we recommend using our software to free up time so you can tackle that laundry pile yourself.</dd>
</div>
</div>
<div>
<div class="flex h-11 w-11 items-center justify-center rounded-lg bg-pink-100 shadow-sm">
<svg class="h-6 w-6 text-pink-500" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g fill="currentColor" fill-rule="nonzero">
<path d="M12,22 C17.5228475,22 22,17.5228475 22,12 C22,6.4771525 17.5228475,2 12,2 C6.4771525,2 2,6.4771525 2,12 C2,17.5228475 6.4771525,22 12,22 Z M12,20 L12,4 C16.418278,4 20,7.581722 20,12 C20,16.418278 16.418278,20 12,20 Z"></path>
</g>
</g>
</svg>
</div>
<div class="mt-4">
<dt class="text-lg font-semibold text-gray-900">Is there an option to make everything in dark mode?</dt>
<dd class="mt-2 text-base leading-7 text-gray-600">We’re working on a mode so dark that it turns off your screen entirely! Until then, our regular dark mode should do the trick.</dd>
</div>
</div>
<div>
<div class="flex h-11 w-11 items-center justify-center rounded-lg bg-pink-100 shadow-sm">
<svg class="h-6 w-6 text-pink-500" viewBox="0 -0.5 17 17" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true">
<defs></defs>
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g transform="translate(1.000000, 0.000000)" fill="currentColor">
<path d="M13.646,2.371 C10.535,-0.739 5.469,-0.74 2.358,2.371 C-0.753,5.483 -0.752,10.548 2.358,13.66 C5.469,16.77 10.534,16.771 13.646,13.66 C16.758,10.547 16.757,5.483 13.646,2.371 L13.646,2.371 Z M3.587,12.431 C1.148,9.993 1.146,6.028 3.58,3.594 C6.014,1.159 9.979,1.162 12.418,3.6 C14.856,6.038 14.857,10.004 12.424,12.438 C9.988,14.872 6.024,14.869 3.587,12.431 L3.587,12.431 Z"></path>
<path d="M10.164,11.063 C9.982,11.063 9.845,10.991 9.776,10.922 L8.009,9.157 L6.314,10.852 C6.248,10.918 6.095,10.998 5.891,10.998 C5.738,10.998 5.507,10.952 5.288,10.733 C5.067,10.513 5.018,10.295 5.017,10.153 C5.013,9.965 5.086,9.823 5.157,9.753 L6.881,8.028 L5.201,6.35 C5.049,6.197 4.922,5.723 5.321,5.325 C5.546,5.1 5.767,5.053 5.914,5.053 C6.097,5.053 6.234,5.125 6.301,5.194 L8.009,6.9 L9.705,5.204 C9.773,5.137 9.925,5.058 10.129,5.058 C10.283,5.058 10.514,5.104 10.733,5.324 C11.111,5.703 11.035,6.134 10.864,6.304 L9.138,8.03 L10.875,9.766 C10.942,9.834 11.021,9.986 11.021,10.19 C11.021,10.344 10.976,10.573 10.756,10.792 C10.531,11.016 10.311,11.063 10.164,11.063 L10.164,11.063 L10.164,11.063 Z"></path>
</g>
</g>
</svg>
</div>
<div class="mt-4">
<dt class="text-lg font-semibold text-gray-900">What if I push the big red button?</dt>
<dd class="mt-2 text-base leading-7 text-gray-600">We highly recommend not doing that... unless you’re in the mood for a surprise. (Spoiler: It’s an error message.)</dd>
</div>
</div>
<div>
<div class="flex h-11 w-11 items-center justify-center rounded-lg bg-pink-100 shadow-sm">
<svg class="h-6 w-6 text-pink-500" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" fill="none" aria-hidden="true">
<path stroke="currentColor" stroke-linejoin="round" stroke-width="2.5" d="M9 25v2a2 2 0 002 2h14a2 2 0 002-2V10a2 2 0 00-2-2h-2"></path>
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 9h4M9 15h10M9 19h8"></path>
<circle cx="19" cy="9" r="1" fill="currentColor"></circle>
<path stroke="currentColor" stroke-linejoin="round" stroke-width="2.5" d="M5 6a2 2 0 012-2h14a2 2 0 012 2v17a2 2 0 01-2 2H7a2 2 0 01-2-2V6z"></path>
</svg>
</div>
<div class="mt-4">
<dt class="text-lg font-semibold text-gray-900">Can I set up your software without reading the instructions?</dt>
<dd class="mt-2 text-base leading-7 text-gray-600">Sure, if you enjoy living life on the edge! For everyone else, our instructions are here to make things a bit smoother.</dd>
</div>
</div>
<div>
<div class="flex h-11 w-11 items-center justify-center rounded-lg bg-pink-100 shadow-sm">
<svg class="h-6 w-6 text-pink-500" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M17 3.33782C15.5291 2.48697 13.8214 2 12 2C6.47715 2 2 6.47715 2 12C2 13.5997 2.37562 15.1116 3.04346 16.4525C3.22094 16.8088 3.28001 17.2161 3.17712 17.6006L2.58151 19.8267C2.32295 20.793 3.20701 21.677 4.17335 21.4185L6.39939 20.8229C6.78393 20.72 7.19121 20.7791 7.54753 20.9565C8.88837 21.6244 10.4003 22 12 22C17.5228 22 22 17.5228 22 12C22 10.1786 21.513 8.47087 20.6622 7" stroke="currentColor" stroke-width="2" stroke-linecap="round"></path>
<path d="M8 12H8.009M11.991 12H12M15.991 12H16" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</div>
<div class="mt-4">
<dt class="text-lg font-semibold text-gray-900">Can I blame your software if my project fails?</dt>
<dd class="mt-2 text-base leading-7 text-gray-600">You can try, but our software is designed to help, not perform miracles. It’s all about how you use it!</dd>
</div>
</div>
</dl>
</div>
</div>
</div><div class="bg-white py-24 sm:py-32">
<div class="mx-auto max-w-7xl px-6 lg:px-8">
<h2 class="text-4xl font-semibold tracking-tight text-gray-900 sm:text-5xl">Frequently asked questions</h2>
<p class="mt-6 max-w-2xl text-base leading-7 text-gray-600">Have questions? We're here to help.</p>
<div class="accordion-container mt-10">
<dl class="grid grid-cols-1 gap-x-12 md:grid-cols-2">
<div class="*:border-b *:border-gray-900/10 *:py-6">
<div class="border-gray-900/10 first:border-t">
<dt>
<button type="button" id="accordion-button:1" class="flex w-full items-start justify-between text-start" aria-expanded="false" aria-controls="accordion-panel:1">
<span class="text-base font-semibold leading-7 text-gray-900">Is your software bug-free?</span>
<span class="ml-6 mt-1 flex-none">
<svg class="plus-icon block h-5 w-5 text-gray-900" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M6 12H18M12 6V18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
</svg>
<svg class="minus-icon hidden h-5 w-5 text-gray-900" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M6 12L18 12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</span>
</button>
</dt>
<dd class="mt-2 hidden pr-12" id="accordion-panel:1">
<p class="text-base leading-7 text-gray-600">Our software is as bug-free as a pristine forest... which is to say, there are probably a few bugs hiding somewhere. But don't worry, our team of digital exterminators is on standby!</p>
</dd>
</div>
<div class="border-gray-900/10 first:border-t">
<dt>
<button type="button" id="accordion-button:2" class="flex w-full items-start justify-between text-start" aria-expanded="false" aria-controls="accordion-panel:2">
<span class="text-base font-semibold leading-7 text-gray-900">What do I do if I forget my password?</span>
<span class="ml-6 mt-1 flex-none">
<svg class="plus-icon block h-5 w-5 text-gray-900" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M6 12H18M12 6V18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
</svg>
<svg class="minus-icon hidden h-5 w-5 text-gray-900" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M6 12L18 12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</span>
</button>
</dt>
<dd class="mt-2 hidden pr-12" id="accordion-panel:2">
<p class="text-base leading-7 text-gray-600">First, try panicking for a few seconds – this seems to help most people. If that doesn't work, click the “Forgot Password” link, and we’ll send you on a thrilling adventure to reset it!</p>
</dd>
</div>
<div class="border-gray-900/10 first:border-t">
<dt>
<button type="button" id="accordion-button:3" class="flex w-full items-start justify-between text-start" aria-expanded="false" aria-controls="accordion-panel:3">
<span class="text-base font-semibold leading-7 text-gray-900">Can I use your software to become a billionaire?</span>
<span class="ml-6 mt-1 flex-none">
<svg class="plus-icon block h-5 w-5 text-gray-900" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M6 12H18M12 6V18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
</svg>
<svg class="minus-icon hidden h-5 w-5 text-gray-900" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M6 12L18 12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</span>
</button>
</dt>
<dd class="mt-2 hidden pr-12" id="accordion-panel:3">
<p class="text-base leading-7 text-gray-600">Absolutely! But only if you already have a billion dollars. Otherwise, we recommend starting with something more attainable, like getting through your email inbox.</p>
</dd>
</div>
</div>
<div class="*:border-b *:border-gray-900/10 *:py-6">
<div class="border-gray-900/10 md:first:border-t">
<dt>
<button type="button" id="accordion-button:4" class="flex w-full items-start justify-between text-start" aria-expanded="false" aria-controls="accordion-panel:4">
<span class="text-base font-semibold leading-7 text-gray-900">Is there an option to make everything in dark mode?</span>
<span class="ml-6 mt-1 flex-none">
<svg class="plus-icon block h-5 w-5 text-gray-900" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M6 12H18M12 6V18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
</svg>
<svg class="minus-icon hidden h-5 w-5 text-gray-900" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M6 12L18 12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</span>
</button>
</dt>
<dd class="mt-2 hidden pr-12" id="accordion-panel:4">
<p class="text-base leading-7 text-gray-600">We’re working on a mode so dark that it turns off your screen entirely! Until then, our regular dark mode should do the trick.</p>
</dd>
</div>
<div class="border-gray-900/10 first:border-t">
<dt>
<button type="button" id="accordion-button:5" class="flex w-full items-start justify-between text-start" aria-expanded="false" aria-controls="accordion-panel:5">
<span class="text-base font-semibold leading-7 text-gray-900">Can I break the internet using your software?</span>
<span class="ml-6 mt-1 flex-none">
<svg class="plus-icon block h-5 w-5 text-gray-900" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M6 12H18M12 6V18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
</svg>
<svg class="minus-icon hidden h-5 w-5 text-gray-900" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M6 12L18 12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</span>
</button>
</dt>
<dd class="mt-2 hidden pr-12" id="accordion-panel:5">
<p class="text-base leading-7 text-gray-600">Please don’t! The last time someone tried that, the entire office went into panic mode. Let’s keep the internet intact and just use our software as intended.</p>
</dd>
</div>
<div class="border-gray-900/10 first:border-t">
<dt>
<button type="button" id="accordion-button:6" class="flex w-full items-start justify-between text-start" aria-expanded="false" aria-controls="accordion-panel:6">
<span class="text-base font-semibold leading-7 text-gray-900">Can I blame your software if my project fails?</span>
<span class="ml-6 mt-1 flex-none">
<svg class="plus-icon block h-5 w-5 text-gray-900" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M6 12H18M12 6V18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
</svg>
<svg class="minus-icon hidden h-5 w-5 text-gray-900" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M6 12L18 12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</span>
</button>
</dt>
<dd class="mt-2 hidden pr-12" id="accordion-panel:6">
<p class="text-base leading-7 text-gray-600">You can try, but our software is designed to help, not perform miracles. It’s all about how you use it!</p>
</dd>
</div>
</div>
</dl>
</div>
</div>
</div>const ACCORDION_BUTTON = 'button[id^="accordion-button:"]';
const PANEL_PREFIX = "accordion-panel:";
const PLUS_ICON_CLASS = "plus-icon";
const MINUS_ICON_CLASS = "minus-icon";
const HIDDEN_CLASS = "hidden";
// Event delegation on the accordion container
const accordionContainer = document.querySelector(".accordion-container");
if (accordionContainer) {
accordionContainer.addEventListener("click", (event) => {
const button = event.target.closest(ACCORDION_BUTTON);
if (!button) return;
// Toggle the panel and icons
toggleAccordion(button);
});
}
function toggleAccordion(button) {
const panelId = button.getAttribute("aria-controls");
const panel = document.getElementById(panelId);
if (!panel) return;
// Toggle expanded state
const isExpanded = button.getAttribute("aria-expanded") === "true";
button.setAttribute("aria-expanded", !isExpanded);
panel.classList.toggle(HIDDEN_CLASS, isExpanded);
// Toggle icons visibility
const plusIcon = button.querySelector(`.${PLUS_ICON_CLASS}`);
const minusIcon = button.querySelector(`.${MINUS_ICON_CLASS}`);
if (plusIcon && minusIcon) {
plusIcon.classList.toggle(HIDDEN_CLASS, !isExpanded);
minusIcon.classList.toggle(HIDDEN_CLASS, isExpanded);
}
}Frequently asked questions
-
Two-column grid, centered single column, accordion with expand/collapse, and a version with an image or illustration alongside the questions.
-
The accordion variants include vanilla JavaScript right in the component, no extra libraries or setup needed. Just copy the full snippet and it works.
-
Yes, worth doing. If you add a FAQPage JSON-LD block to your page head, Google can show your questions directly in search results as a rich snippet. It's not hard to set up.
-
Yes. Multi-column layouts collapse down, and the accordion rows work fine on touch screens.
Related Tailwind CSS components
More free, copy-paste Tailwind CSS components to use in your projects.