FAQ with Sidebar Menu Section Using Tailwind UI
A FAQ section with a sidebar menu designed using Tailwind provides a user-friendly and organized way to access and navigate through frequently asked questions, enhancing the overall user experience. Inspired design by Ildiko Gaspar from dribbble.
faqs
Loading component...
135 lines
<!-- Component Inspired design by Ildiko Gaspar from dribbble https://dribbble.com/shots/16785573-FAQ-Section-UI-Design -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=swap"
rel="stylesheet">
<style>
body {
font-family: 'Plus Jakarta Sans', sans-serif;
}
</style>
<div class="bg-[#F5F6FE] w-full flex flex-col gap-5 px-3 md:px-16 lg:px-28 md:flex-row text-[#161931]">
<aside class="hidden py-4 md:w-1/3 lg:w-1/4 md:block">
<div class="sticky top-12 flex flex-col gap-2 p-4 border rounded-xl bg-[#EBEDFC] text-sm">
<a href="#" class="flex items-center px-3 py-2.5 font-semibold bg-white rounded-md">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-5 h-5 mr-2 fill-current">
<path
d="M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20ZM11 7H13V9H11V7ZM11 11H13V17H11V11Z">
</path>
</svg>
Frequenty asked questions
</a>
<a href="#" class="flex items-center px-3 py-2.5 font-semibold hover:bg-white rounded-md">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-5 h-5 mr-2 fill-current">
<path
d="M3.00488 3.00293H21.0049C21.5572 3.00293 22.0049 3.45064 22.0049 4.00293V20.0029C22.0049 20.5552 21.5572 21.0029 21.0049 21.0029H3.00488C2.4526 21.0029 2.00488 20.5552 2.00488 20.0029V4.00293C2.00488 3.45064 2.4526 3.00293 3.00488 3.00293ZM4.00488 5.00293V19.0029H20.0049V5.00293H4.00488ZM10.0549 11.0029H15.0049V13.0029H10.0549C10.2865 14.144 11.2954 15.0029 12.5049 15.0029C13.1201 15.0029 13.6833 14.7807 14.1188 14.4122L15.8198 15.5462C14.9973 16.4417 13.8166 17.0029 12.5049 17.0029C10.1886 17.0029 8.28107 15.2529 8.03235 13.0029H7.00488V11.0029H8.03235C8.28107 8.75295 10.1886 7.00293 12.5049 7.00293C13.8166 7.00293 14.9973 7.5642 15.8198 8.45969L14.1189 9.59369C13.6834 9.22515 13.1201 9.00293 12.5049 9.00293C11.2954 9.00293 10.2865 9.86181 10.0549 11.0029Z">
</path>
</svg>
Payment & Invoice
</a>
<a href="#" class="flex items-center px-3 py-2.5 font-semibold hover:bg-white rounded-md">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-5 h-5 mr-2 fill-current">
<path
d="M3 10H2V4.00293C2 3.44903 2.45531 3 2.9918 3H21.0082C21.556 3 22 3.43788 22 4.00293V10H21V20.0015C21 20.553 20.5551 21 20.0066 21H3.9934C3.44476 21 3 20.5525 3 20.0015V10ZM19 10H5V19H19V10ZM4 5V8H20V5H4ZM9 12H15V14H9V12Z">
</path>
</svg>
Deliveries
</a>
<a href="#" class="flex items-center px-3 py-2.5 font-semibold hover:bg-white rounded-md">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-5 h-5 mr-2 fill-current">
<path
d="M5.82843 6.99955L8.36396 9.53509L6.94975 10.9493L2 5.99955L6.94975 1.0498L8.36396 2.46402L5.82843 4.99955H13C17.4183 4.99955 21 8.58127 21 12.9996C21 17.4178 17.4183 20.9996 13 20.9996H4V18.9996H13C16.3137 18.9996 19 16.3133 19 12.9996C19 9.68584 16.3137 6.99955 13 6.99955H5.82843Z">
</path>
</svg>
Return & Crediting
</a>
<a href="#" class="flex items-center px-3 py-2.5 font-semibold hover:bg-white rounded-md">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-5 h-5 mr-2 fill-current">
<path
d="M19.9381 8H21C22.1046 8 23 8.89543 23 10V14C23 15.1046 22.1046 16 21 16H19.9381C19.446 19.9463 16.0796 23 12 23V21C15.3137 21 18 18.3137 18 15V9C18 5.68629 15.3137 3 12 3C8.68629 3 6 5.68629 6 9V16H3C1.89543 16 1 15.1046 1 14V10C1 8.89543 1.89543 8 3 8H4.06189C4.55399 4.05369 7.92038 1 12 1C16.0796 1 19.446 4.05369 19.9381 8ZM3 10V14H4V10H3ZM20 10V14H21V10H20ZM7.75944 15.7849L8.81958 14.0887C9.74161 14.6662 10.8318 15 12 15C13.1682 15 14.2584 14.6662 15.1804 14.0887L16.2406 15.7849C15.0112 16.5549 13.5576 17 12 17C10.4424 17 8.98882 16.5549 7.75944 15.7849Z">
</path>
</svg>
Complaint
</a>
</div>
</aside>
<main class="w-full min-h-screen py-1 md:w-2/3 lg:w-3/4">
<div class="p-2 md:p-4">
<div class="relative w-full px-6 pb-8 mt-8 sm:max-w-2xl sm:rounded-lg">
<div class="">
<div class="flex flex-col items-center">
<h2 class="mt-3 text-2xl font-medium sm:text-lg">Frequenty asked questions</h2>
</div>
<div class="grid max-w-xl mx-auto mt-8 divide-y divide-neutral-200">
<div class="py-5">
<details class="group">
<summary class="flex items-center justify-between font-medium list-none cursor-pointer">
<span> How can I reset my password?</span>
<span class="transition group-open:rotate-180">
<svg fill="none" height="24" shape-rendering="geometricPrecision" stroke="currentColor"
stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" viewBox="0 0 24 24" width="24">
<path d="M6 9l6 6 6-6"></path>
</svg>
</span>
</summary>
<p class="mt-3 group-open:animate-fadeIn text-neutral-600">To reset your password,
simply click on the "Forgot Password" link on the login page. You will receive
an email with instructions on how to reset your password.
</p>
</details>
</div>
<div class="py-5">
<details class="group">
<summary class="flex items-center justify-between font-medium list-none cursor-pointer">
<span> What payment methods do you accept?</span>
<span class="transition group-open:rotate-180">
<svg fill="none" height="24" shape-rendering="geometricPrecision" stroke="currentColor"
stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" viewBox="0 0 24 24" width="24">
<path d="M6 9l6 6 6-6"></path>
</svg>
</span>
</summary>
<p class="mt-3 group-open:animate-fadeIn text-neutral-600">We accept various payment
methods, including credit cards (Visa, MasterCard, American Express), PayPal,
and bank transfers. You can choose the payment method that suits you best during
the checkout process.
</p>
</details>
</div>
<div class="py-5">
<details class="group">
<summary class="flex items-center justify-between font-medium list-none cursor-pointer">
<span> How long does shipping typically take?</span>
<span class="transition group-open:rotate-180">
<svg fill="none" height="24" shape-rendering="geometricPrecision" stroke="currentColor"
stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" viewBox="0 0 24 24" width="24">
<path d="M6 9l6 6 6-6"></path>
</svg>
</span>
</summary>
<p class="mt-3 group-open:animate-fadeIn text-neutral-600">Shipping times may vary
depending on your location and the product you've ordered. In general, standard
shipping takes approximately 3-5 business days, while expedited shipping options
are available for faster delivery. You can track your order's progress using the
provided tracking number.
</p>
</details>
</div>
</div>
</div>
</div>
</div>
</main>
</div>