FAQ sections
Simple with divider and icon
Open this with divider and icon faq sections example in new window
Copy with divider and icon faq sections code
Close with divider and icon faq sections code
<!-- FAQ -->
<div class="max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14 mx-auto">
<!-- Title -->
<div class="max-w-2xl mx-auto mb-10 lg:mb-14">
<h2 class="text-2xl text-hs2-primary-500 font-bold md:text-4xl md:leading-tight ">You might be wondering...</h2>
</div>
<!-- End Title -->
<div class="max-w-2xl mx-auto divide-y divide-gray-200 ">
<div class="py-8 first:pt-0 last:pb-0">
<div class="flex gap-x-5">
<svg class="flex-shrink-0 mt-1 w-6 h-6 text-hs2-primary-500" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z" />
<path d="M5.255 5.786a.237.237 0 0 0 .241.247h.825c.138 0 .248-.113.266-.25.09-.656.54-1.134 1.342-1.134.686 0 1.314.343 1.314 1.168 0 .635-.374.927-.965 1.371-.673.489-1.206 1.06-1.168 1.987l.003.217a.25.25 0 0 0 .25.246h.811a.25.25 0 0 0 .25-.25v-.105c0-.718.273-.927 1.01-1.486.609-.463 1.244-.977 1.244-2.056 0-1.511-1.276-2.241-2.673-2.241-1.267 0-2.655.59-2.75 2.286zm1.557 5.763c0 .533.425.927 1.01.927.609 0 1.028-.394 1.028-.927 0-.552-.42-.94-1.029-.94-.584 0-1.009.388-1.009.94z" />
</svg>
<div>
<h3 class="md:text-lg font-semibold text-hs2-primary-500 ">
Can I cancel at anytime?
</h3>
<p class="mt-1 text-gray-500">
Yes, you can cancel anytime no questions are asked while you cancel but we would highly appreciate if you will give us some feedback.
</p>
</div>
</div>
</div>
<div class="py-8 first:pt-0 last:pb-0">
<div class="flex gap-x-5">
<svg class="flex-shrink-0 mt-1 w-6 h-6 text-hs2-primary-500" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z" />
<path d="M5.255 5.786a.237.237 0 0 0 .241.247h.825c.138 0 .248-.113.266-.25.09-.656.54-1.134 1.342-1.134.686 0 1.314.343 1.314 1.168 0 .635-.374.927-.965 1.371-.673.489-1.206 1.06-1.168 1.987l.003.217a.25.25 0 0 0 .25.246h.811a.25.25 0 0 0 .25-.25v-.105c0-.718.273-.927 1.01-1.486.609-.463 1.244-.977 1.244-2.056 0-1.511-1.276-2.241-2.673-2.241-1.267 0-2.655.59-2.75 2.286zm1.557 5.763c0 .533.425.927 1.01.927.609 0 1.028-.394 1.028-.927 0-.552-.42-.94-1.029-.94-.584 0-1.009.388-1.009.94z" />
</svg>
<div>
<h3 class="md:text-lg font-semibold text-hs2-primary-500 ">
My team has credits. How do we use them?
</h3>
<p class="mt-1 text-gray-500">
Once your team signs up for a subscription plan. This is where we sit down, grab a cup of coffee and dial in the details.
</p>
</div>
</div>
</div>
<div class="py-8 first:pt-0 last:pb-0">
<div class="flex gap-x-5">
<svg class="flex-shrink-0 mt-1 w-6 h-6 text-hs2-primary-500" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z" />
<path d="M5.255 5.786a.237.237 0 0 0 .241.247h.825c.138 0 .248-.113.266-.25.09-.656.54-1.134 1.342-1.134.686 0 1.314.343 1.314 1.168 0 .635-.374.927-.965 1.371-.673.489-1.206 1.06-1.168 1.987l.003.217a.25.25 0 0 0 .25.246h.811a.25.25 0 0 0 .25-.25v-.105c0-.718.273-.927 1.01-1.486.609-.463 1.244-.977 1.244-2.056 0-1.511-1.276-2.241-2.673-2.241-1.267 0-2.655.59-2.75 2.286zm1.557 5.763c0 .533.425.927 1.01.927.609 0 1.028-.394 1.028-.927 0-.552-.42-.94-1.029-.94-.584 0-1.009.388-1.009.94z" />
</svg>
<div>
<h3 class="md:text-lg font-semibold text-hs2-primary-500 ">
How does Preline's pricing work?
</h3>
<p class="mt-1 text-gray-500">
Our subscriptions are tiered. Understanding the task at hand and ironing out the wrinkles is key.
</p>
</div>
</div>
</div>
<div class="py-8 first:pt-0 last:pb-0">
<div class="flex gap-x-5">
<svg class="flex-shrink-0 mt-1 w-6 h-6 text-hs2-primary-500" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z" />
<path d="M5.255 5.786a.237.237 0 0 0 .241.247h.825c.138 0 .248-.113.266-.25.09-.656.54-1.134 1.342-1.134.686 0 1.314.343 1.314 1.168 0 .635-.374.927-.965 1.371-.673.489-1.206 1.06-1.168 1.987l.003.217a.25.25 0 0 0 .25.246h.811a.25.25 0 0 0 .25-.25v-.105c0-.718.273-.927 1.01-1.486.609-.463 1.244-.977 1.244-2.056 0-1.511-1.276-2.241-2.673-2.241-1.267 0-2.655.59-2.75 2.286zm1.557 5.763c0 .533.425.927 1.01.927.609 0 1.028-.394 1.028-.927 0-.552-.42-.94-1.029-.94-.584 0-1.009.388-1.009.94z" />
</svg>
<div>
<h3 class="md:text-lg font-semibold text-hs2-primary-500 ">
How secure is Preline?
</h3>
<p class="mt-1 text-gray-500">
Protecting the data you trust to Preline is our first priority. This part is really crucial in keeping the project in line to completion.
</p>
</div>
</div>
</div>
<div class="py-8 first:pt-0 last:pb-0">
<div class="flex gap-x-5">
<svg class="flex-shrink-0 mt-1 w-6 h-6 text-hs2-primary-500" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z" />
<path d="M5.255 5.786a.237.237 0 0 0 .241.247h.825c.138 0 .248-.113.266-.25.09-.656.54-1.134 1.342-1.134.686 0 1.314.343 1.314 1.168 0 .635-.374.927-.965 1.371-.673.489-1.206 1.06-1.168 1.987l.003.217a.25.25 0 0 0 .25.246h.811a.25.25 0 0 0 .25-.25v-.105c0-.718.273-.927 1.01-1.486.609-.463 1.244-.977 1.244-2.056 0-1.511-1.276-2.241-2.673-2.241-1.267 0-2.655.59-2.75 2.286zm1.557 5.763c0 .533.425.927 1.01.927.609 0 1.028-.394 1.028-.927 0-.552-.42-.94-1.029-.94-.584 0-1.009.388-1.009.94z" />
</svg>
<div>
<h3 class="md:text-lg font-semibold text-hs2-primary-500 ">
How do I get access to a theme I purchased?
</h3>
<p class="mt-1 text-gray-500">
If you lose the link for a theme you purchased, don't panic! We've got you covered. You can login to your account, tap your avatar in the upper right corner, and tap Purchases. If you didn't create a login or can't remember the information, you can use our handy Redownload page, just remember to use the same email you originally made your purchases with.
</p>
</div>
</div>
</div>
<div class="py-8 first:pt-0 last:pb-0">
<div class="flex gap-x-5">
<svg class="flex-shrink-0 mt-1 w-6 h-6 text-hs2-primary-500" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z" />
<path d="M5.255 5.786a.237.237 0 0 0 .241.247h.825c.138 0 .248-.113.266-.25.09-.656.54-1.134 1.342-1.134.686 0 1.314.343 1.314 1.168 0 .635-.374.927-.965 1.371-.673.489-1.206 1.06-1.168 1.987l.003.217a.25.25 0 0 0 .25.246h.811a.25.25 0 0 0 .25-.25v-.105c0-.718.273-.927 1.01-1.486.609-.463 1.244-.977 1.244-2.056 0-1.511-1.276-2.241-2.673-2.241-1.267 0-2.655.59-2.75 2.286zm1.557 5.763c0 .533.425.927 1.01.927.609 0 1.028-.394 1.028-.927 0-.552-.42-.94-1.029-.94-.584 0-1.009.388-1.009.94z" />
</svg>
<div>
<h3 class="md:text-lg font-semibold text-hs2-primary-500 ">
Upgrade License Type
</h3>
<p class="mt-1 text-gray-500">
There may be times when you need to upgrade your license from the original type you purchased and we have a solution that ensures you can apply your original purchase cost to the new license purchase.
</p>
</div>
</div>
</div>
</div>
</div>
<!-- End FAQ -->Simple 2-cols-grid
Open this two cols grid faq sections example in new window
Copy two cols grid faq sections code
Close two cols grid faq sections code
<!-- FAQ -->
<div class="max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14 mx-auto">
<!-- Title -->
<div class="max-w-2xl mx-auto text-center mb-10 lg:mb-14">
<h2 class="text-2xl font-bold md:text-3xl md:leading-tight text-hs2-primary-500 ">
Frequently Asked Questions
</h2>
</div>
<!-- End Title -->
<div class="max-w-5xl mx-auto">
<!-- Grid -->
<div class="grid sm:grid-cols-2 gap-6 md:gap-12">
<div>
<h3 class="text-lg font-semibold text-hs2-primary-500 ">
Can I cancel at anytime?
</h3>
<p class="mt-2 text-gray-600 ">
Yes, you can cancel anytime no questions are asked while you cancel but we would highly appreciate if you will give us some feedback.
</p>
</div>
<!-- End Col -->
<div>
<h3 class="text-lg font-semibold text-hs2-primary-500 ">
My team has credits. How do we use them?
</h3>
<p class="mt-2 text-gray-600 ">
Once your team signs up for a subscription plan. This is where we sit down, grab a cup of coffee and dial in the details.
</p>
</div>
<!-- End Col -->
<div>
<h3 class="text-lg font-semibold text-hs2-primary-500 ">
How does Preline's pricing work?
</h3>
<p class="mt-2 text-gray-600 ">
Our subscriptions are tiered. Understanding the task at hand and ironing out the wrinkles is key.
</p>
</div>
<!-- End Col -->
<div>
<h3 class="text-lg font-semibold text-hs2-primary-500 ">
How secure is Preline?
</h3>
<p class="mt-2 text-gray-600 ">
Protecting the data you trust to Preline is our first priority. This part is really crucial in keeping the project in line to completion.
</p>
</div>
<!-- End Col -->
<div>
<h3 class="text-lg font-semibold text-hs2-primary-500 ">
Do you offer discounts?
</h3>
<p class="mt-2 text-gray-600 ">
We've built in discounts at each tier for teams. The time has come to bring those ideas and plans to life.
</p>
</div>
<!-- End Col -->
<div>
<h3 class="text-lg font-semibold text-hs2-primary-500 ">
What is your refund policy?
</h3>
<p class="mt-2 text-gray-600 ">
We offer refunds. We aim high at being focused on building relationships with our clients and community.
</p>
</div>
<!-- End Col -->
</div>
<!-- End Grid -->
</div>
</div>
<!-- End FAQ -->Center aligned with active background gray
Open this centered gray bg faq sections example in new window
Copy centered gray bg faq sections code
Close centered gray bg faq sections code
<!-- FAQ -->
<div class="max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14 mx-auto">
<!-- Title -->
<div class="max-w-2xl mx-auto text-center mb-10 lg:mb-14">
<h2 class="text-2xl font-bold md:text-4xl md:leading-tight ">Your questions, answered</h2>
<p class="mt-1 text-gray-600 ">Answers to the most frequently asked questions.</p>
</div>
<!-- End Title -->
<div class="max-w-2xl mx-auto">
<!-- Accordion -->
<div class="hs-accordion-group">
<div class="hs-accordion hs-accordion-active:bg-gray-100 rounded-xl p-6 active" id="hs-basic-with-title-and-arrow-stretched-heading-one">
<button class="hs-accordion-toggle group pb-3 inline-flex items-center justify-between gap-x-3 w-full md:text-lg font-semibold text-left text-hs2-primary-500 transition hover:text-hs2-primary-600 " aria-controls="hs-basic-with-title-and-arrow-stretched-collapse-one">
Can I cancel at anytime?
<svg class="hs-accordion-active:hidden block w-3 h-3 text-gray-600 group-hover:text-gray-500 " width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2 5L8.16086 10.6869C8.35239 10.8637 8.64761 10.8637 8.83914 10.6869L15 5" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
</svg>
<svg class="hs-accordion-active:block hidden w-3 h-3 text-gray-600 group-hover:text-gray-500 " width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2 11L8.16086 5.31305C8.35239 5.13625 8.64761 5.13625 8.83914 5.31305L15 11" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
</svg>
</button>
<div id="hs-basic-with-title-and-arrow-stretched-collapse-one" class="hs-accordion-content w-full overflow-hidden transition-[height] duration-300" aria-labelledby="hs-basic-with-title-and-arrow-stretched-heading-one">
<p class="text-gray-800 ">
Yes, you can cancel anytime no questions are asked while you cancel but we would highly appreciate if you will give us some feedback.
</p>
</div>
</div>
<div class="hs-accordion hs-accordion-active:bg-gray-100 rounded-xl p-6 " id="hs-basic-with-title-and-arrow-stretched-heading-two">
<button class="hs-accordion-toggle group pb-3 inline-flex items-center justify-between gap-x-3 w-full md:text-lg font-semibold text-left text-hs2-primary-500 transition hover:text-hs2-primary-600 " aria-controls="hs-basic-with-title-and-arrow-stretched-collapse-two">
My team has credits. How do we use them?
<svg class="hs-accordion-active:hidden block w-3 h-3 text-gray-600 group-hover:text-gray-500 " width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2 5L8.16086 10.6869C8.35239 10.8637 8.64761 10.8637 8.83914 10.6869L15 5" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
</svg>
<svg class="hs-accordion-active:block hidden w-3 h-3 text-gray-600 group-hover:text-gray-500 " width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2 11L8.16086 5.31305C8.35239 5.13625 8.64761 5.13625 8.83914 5.31305L15 11" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
</svg>
</button>
<div id="hs-basic-with-title-and-arrow-stretched-collapse-two" class="hs-accordion-content hidden w-full overflow-hidden transition-[height] duration-300" aria-labelledby="hs-basic-with-title-and-arrow-stretched-heading-two">
<p class="text-gray-800 ">
Once your team signs up for a subscription plan. This is where we sit down, grab a cup of coffee and dial in the details.
</p>
</div>
</div>
<div class="hs-accordion hs-accordion-active:bg-gray-100 rounded-xl p-6 " id="hs-basic-with-title-and-arrow-stretched-heading-three">
<button class="hs-accordion-toggle group pb-3 inline-flex items-center justify-between gap-x-3 w-full md:text-lg font-semibold text-left text-hs2-primary-500 transition hover:text-hs2-primary-600 " aria-controls="hs-basic-with-title-and-arrow-stretched-collapse-three">
How does Preline's pricing work?
<svg class="hs-accordion-active:hidden block w-3 h-3 text-gray-600 group-hover:text-gray-500 " width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2 5L8.16086 10.6869C8.35239 10.8637 8.64761 10.8637 8.83914 10.6869L15 5" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
</svg>
<svg class="hs-accordion-active:block hidden w-3 h-3 text-gray-600 group-hover:text-gray-500 " width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2 11L8.16086 5.31305C8.35239 5.13625 8.64761 5.13625 8.83914 5.31305L15 11" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
</svg>
</button>
<div id="hs-basic-with-title-and-arrow-stretched-collapse-three" class="hs-accordion-content hidden w-full overflow-hidden transition-[height] duration-300" aria-labelledby="hs-basic-with-title-and-arrow-stretched-heading-three">
<p class="text-gray-800 ">
Our subscriptions are tiered. Understanding the task at hand and ironing out the wrinkles is key.
</p>
</div>
</div>
<div class="hs-accordion hs-accordion-active:bg-gray-100 rounded-xl p-6 " id="hs-basic-with-title-and-arrow-stretched-heading-four">
<button class="hs-accordion-toggle group pb-3 inline-flex items-center justify-between gap-x-3 w-full md:text-lg font-semibold text-left text-hs2-primary-500 transition hover:text-hs2-primary-600 " aria-controls="hs-basic-with-title-and-arrow-stretched-collapse-four">
How secure is Preline?
<svg class="hs-accordion-active:hidden block w-3 h-3 text-gray-600 group-hover:text-gray-500 " width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2 5L8.16086 10.6869C8.35239 10.8637 8.64761 10.8637 8.83914 10.6869L15 5" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
</svg>
<svg class="hs-accordion-active:block hidden w-3 h-3 text-gray-600 group-hover:text-gray-500 " width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2 11L8.16086 5.31305C8.35239 5.13625 8.64761 5.13625 8.83914 5.31305L15 11" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
</svg>
</button>
<div id="hs-basic-with-title-and-arrow-stretched-collapse-four" class="hs-accordion-content hidden w-full overflow-hidden transition-[height] duration-300" aria-labelledby="hs-basic-with-title-and-arrow-stretched-heading-four">
<p class="text-gray-800 ">
Protecting the data you trust to Preline is our first priority. This part is really crucial in keeping the project in line to completion.
</p>
</div>
</div>
<div class="hs-accordion hs-accordion-active:bg-gray-100 rounded-xl p-6 " id="hs-basic-with-title-and-arrow-stretched-heading-five">
<button class="hs-accordion-toggle group pb-3 inline-flex items-center justify-between gap-x-3 w-full md:text-lg font-semibold text-left text-hs2-primary-500 transition hover:text-hs2-primary-600 " aria-controls="hs-basic-with-title-and-arrow-stretched-collapse-five">
How do I get access to a theme I purchased?
<svg class="hs-accordion-active:hidden block w-3 h-3 text-gray-600 group-hover:text-gray-500 " width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2 5L8.16086 10.6869C8.35239 10.8637 8.64761 10.8637 8.83914 10.6869L15 5" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
</svg>
<svg class="hs-accordion-active:block hidden w-3 h-3 text-gray-600 group-hover:text-gray-500 " width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2 11L8.16086 5.31305C8.35239 5.13625 8.64761 5.13625 8.83914 5.31305L15 11" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
</svg>
</button>
<div id="hs-basic-with-title-and-arrow-stretched-collapse-five" class="hs-accordion-content hidden w-full overflow-hidden transition-[height] duration-300" aria-labelledby="hs-basic-with-title-and-arrow-stretched-heading-five">
<p class="text-gray-800 ">
If you lose the link for a theme you purchased, don't panic! We've got you covered. You can login to your account, tap your avatar in the upper right corner, and tap Purchases. If you didn't create a login or can't remember the information, you can use our handy Redownload page, just remember to use the same email you originally made your purchases with.
</p>
</div>
</div>
<div class="hs-accordion hs-accordion-active:bg-gray-100 rounded-xl p-6 " id="hs-basic-with-title-and-arrow-stretched-heading-six">
<button class="hs-accordion-toggle group pb-3 inline-flex items-center justify-between gap-x-3 w-full md:text-lg font-semibold text-left text-hs2-primary-500 transition hover:text-hs2-primary-600 " aria-controls="hs-basic-with-title-and-arrow-stretched-collapse-six">
Upgrade License Type
<svg class="hs-accordion-active:hidden block w-3 h-3 text-gray-600 group-hover:text-gray-500 " width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2 5L8.16086 10.6869C8.35239 10.8637 8.64761 10.8637 8.83914 10.6869L15 5" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
</svg>
<svg class="hs-accordion-active:block hidden w-3 h-3 text-gray-600 group-hover:text-gray-500 " width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2 11L8.16086 5.31305C8.35239 5.13625 8.64761 5.13625 8.83914 5.31305L15 11" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
</svg>
</button>
<div id="hs-basic-with-title-and-arrow-stretched-collapse-six" class="hs-accordion-content hidden w-full overflow-hidden transition-[height] duration-300" aria-labelledby="hs-basic-with-title-and-arrow-stretched-heading-six">
<p class="text-gray-800 ">
There may be times when you need to upgrade your license from the original type you purchased and we have a solution that ensures you can apply your original purchase cost to the new license purchase.
</p>
</div>
</div>
</div>
<!-- End Accordion -->
</div>
</div>
<!-- End FAQ -->Right aligned with border bottom
Open this right aligned border bottom faq sections example in new window
Copy right aligned border bottom faq sections code
Close right aligned border bottom faq sections code
<!-- FAQ -->
<div class="max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14 mx-auto">
<!-- Grid -->
<div class="grid md:grid-cols-5 gap-10">
<div class="md:col-span-2">
<div class="max-w-xs">
<h2 class="text-2xl text-hs2-primary-500 font-bold md:text-4xl md:leading-tight ">Frequently<br>asked questions</h2>
<p class="mt-1 hidden md:block text-gray-600 ">Answers to the most frequently asked questions.</p>
</div>
</div>
<!-- End Col -->
<div class="md:col-span-3">
<!-- Accordion -->
<div class="hs-accordion-group divide-y divide-gray-200 ">
<div class="hs-accordion pb-3 active" id="hs-basic-with-title-and-arrow-stretched-heading-one">
<button class="hs-accordion-toggle group pb-3 inline-flex items-center justify-between gap-x-3 w-full md:text-lg font-semibold text-left text-hs2-primary-500 transition hover:text-hs2-primary-500 " aria-controls="hs-basic-with-title-and-arrow-stretched-collapse-one">
Can I cancel at anytime?
<svg class="hs-accordion-active:hidden block w-3 h-3 text-gray-600 group-hover:text-gray-500 " width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2 5L8.16086 10.6869C8.35239 10.8637 8.64761 10.8637 8.83914 10.6869L15 5" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
</svg>
<svg class="hs-accordion-active:block hidden w-3 h-3 text-gray-600 group-hover:text-gray-500 " width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2 11L8.16086 5.31305C8.35239 5.13625 8.64761 5.13625 8.83914 5.31305L15 11" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
</svg>
</button>
<div id="hs-basic-with-title-and-arrow-stretched-collapse-one" class="hs-accordion-content w-full overflow-hidden transition-[height] duration-300" aria-labelledby="hs-basic-with-title-and-arrow-stretched-heading-one">
<p class="text-gray-600 ">
Yes, you can cancel anytime no questions are asked while you cancel but we would highly appreciate if you will give us some feedback.
</p>
</div>
</div>
<div class="hs-accordion pt-6 pb-3" id="hs-basic-with-title-and-arrow-stretched-heading-two">
<button class="hs-accordion-toggle group pb-3 inline-flex items-center justify-between gap-x-3 w-full md:text-lg font-semibold text-left text-hs2-primary-500 transition hover:text-hs2-primary-500 " aria-controls="hs-basic-with-title-and-arrow-stretched-collapse-two">
My team has credits. How do we use them?
<svg class="hs-accordion-active:hidden block w-3 h-3 text-gray-600 group-hover:text-gray-500 " width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2 5L8.16086 10.6869C8.35239 10.8637 8.64761 10.8637 8.83914 10.6869L15 5" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
</svg>
<svg class="hs-accordion-active:block hidden w-3 h-3 text-gray-600 group-hover:text-gray-500 " width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2 11L8.16086 5.31305C8.35239 5.13625 8.64761 5.13625 8.83914 5.31305L15 11" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
</svg>
</button>
<div id="hs-basic-with-title-and-arrow-stretched-collapse-two" class="hs-accordion-content hidden w-full overflow-hidden transition-[height] duration-300" aria-labelledby="hs-basic-with-title-and-arrow-stretched-heading-two">
<p class="text-gray-600 ">
Once your team signs up for a subscription plan. This is where we sit down, grab a cup of coffee and dial in the details.
</p>
</div>
</div>
<div class="hs-accordion pt-6 pb-3" id="hs-basic-with-title-and-arrow-stretched-heading-three">
<button class="hs-accordion-toggle group pb-3 inline-flex items-center justify-between gap-x-3 w-full md:text-lg font-semibold text-left text-hs2-primary-500 transition hover:text-hs2-primary-500 " aria-controls="hs-basic-with-title-and-arrow-stretched-collapse-three">
How does Preline's pricing work?
<svg class="hs-accordion-active:hidden block w-3 h-3 text-gray-600 group-hover:text-gray-500 " width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2 5L8.16086 10.6869C8.35239 10.8637 8.64761 10.8637 8.83914 10.6869L15 5" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
</svg>
<svg class="hs-accordion-active:block hidden w-3 h-3 text-gray-600 group-hover:text-gray-500 " width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2 11L8.16086 5.31305C8.35239 5.13625 8.64761 5.13625 8.83914 5.31305L15 11" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
</svg>
</button>
<div id="hs-basic-with-title-and-arrow-stretched-collapse-three" class="hs-accordion-content hidden w-full overflow-hidden transition-[height] duration-300" aria-labelledby="hs-basic-with-title-and-arrow-stretched-heading-three">
<p class="text-gray-600 ">
Our subscriptions are tiered. Understanding the task at hand and ironing out the wrinkles is key.
</p>
</div>
</div>
<div class="hs-accordion pt-6 pb-3" id="hs-basic-with-title-and-arrow-stretched-heading-four">
<button class="hs-accordion-toggle group pb-3 inline-flex items-center justify-between gap-x-3 w-full md:text-lg font-semibold text-left text-hs2-primary-500 transition hover:text-hs2-primary-500 " aria-controls="hs-basic-with-title-and-arrow-stretched-collapse-four">
How secure is Preline?
<svg class="hs-accordion-active:hidden block w-3 h-3 text-gray-600 group-hover:text-gray-500 " width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2 5L8.16086 10.6869C8.35239 10.8637 8.64761 10.8637 8.83914 10.6869L15 5" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
</svg>
<svg class="hs-accordion-active:block hidden w-3 h-3 text-gray-600 group-hover:text-gray-500 " width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2 11L8.16086 5.31305C8.35239 5.13625 8.64761 5.13625 8.83914 5.31305L15 11" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
</svg>
</button>
<div id="hs-basic-with-title-and-arrow-stretched-collapse-four" class="hs-accordion-content hidden w-full overflow-hidden transition-[height] duration-300" aria-labelledby="hs-basic-with-title-and-arrow-stretched-heading-four">
<p class="text-gray-600 ">
Protecting the data you trust to Preline is our first priority. This part is really crucial in keeping the project in line to completion.
</p>
</div>
</div>
<div class="hs-accordion pt-6 pb-3" id="hs-basic-with-title-and-arrow-stretched-heading-five">
<button class="hs-accordion-toggle group pb-3 inline-flex items-center justify-between gap-x-3 w-full md:text-lg font-semibold text-left text-hs2-primary-500 transition hover:text-hs2-primary-500 " aria-controls="hs-basic-with-title-and-arrow-stretched-collapse-five">
How do I get access to a theme I purchased?
<svg class="hs-accordion-active:hidden block w-3 h-3 text-gray-600 group-hover:text-gray-500 " width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2 5L8.16086 10.6869C8.35239 10.8637 8.64761 10.8637 8.83914 10.6869L15 5" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
</svg>
<svg class="hs-accordion-active:block hidden w-3 h-3 text-gray-600 group-hover:text-gray-500 " width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2 11L8.16086 5.31305C8.35239 5.13625 8.64761 5.13625 8.83914 5.31305L15 11" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
</svg>
</button>
<div id="hs-basic-with-title-and-arrow-stretched-collapse-five" class="hs-accordion-content hidden w-full overflow-hidden transition-[height] duration-300" aria-labelledby="hs-basic-with-title-and-arrow-stretched-heading-five">
<p class="text-gray-600 ">
If you lose the link for a theme you purchased, don't panic! We've got you covered. You can login to your account, tap your avatar in the upper right corner, and tap Purchases. If you didn't create a login or can't remember the information, you can use our handy Redownload page, just remember to use the same email you originally made your purchases with.
</p>
</div>
</div>
<div class="hs-accordion pt-6 pb-3" id="hs-basic-with-title-and-arrow-stretched-heading-six">
<button class="hs-accordion-toggle group pb-3 inline-flex items-center justify-between gap-x-3 w-full md:text-lg font-semibold text-left text-hs2-primary-500 transition hover:text-hs2-primary-500 " aria-controls="hs-basic-with-title-and-arrow-stretched-collapse-six">
Upgrade License Type
<svg class="hs-accordion-active:hidden block w-3 h-3 text-gray-600 group-hover:text-gray-500 " width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2 5L8.16086 10.6869C8.35239 10.8637 8.64761 10.8637 8.83914 10.6869L15 5" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
</svg>
<svg class="hs-accordion-active:block hidden w-3 h-3 text-gray-600 group-hover:text-gray-500 " width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2 11L8.16086 5.31305C8.35239 5.13625 8.64761 5.13625 8.83914 5.31305L15 11" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
</svg>
</button>
<div id="hs-basic-with-title-and-arrow-stretched-collapse-six" class="hs-accordion-content hidden w-full overflow-hidden transition-[height] duration-300" aria-labelledby="hs-basic-with-title-and-arrow-stretched-heading-six">
<p class="text-gray-600 ">
There may be times when you need to upgrade your license from the original type you purchased and we have a solution that ensures you can apply your original purchase cost to the new license purchase.
</p>
</div>
</div>
</div>
<!-- End Accordion -->
</div>
<!-- End Col -->
</div>
<!-- End Grid -->
</div>
<!-- End FAQ -->