69 lines
4.7 KiB
HTML
69 lines
4.7 KiB
HTML
<div class="w-full divide-y divide-outline text-on-surface dark:divide-outline-dark dark:text-on-surface-dark">
|
|
<div x-data="{ isExpanded: false }">
|
|
<button id="controlsAccordionItemOne" type="button"
|
|
class="flex w-full items-center justify-between gap-4 py-4 text-left underline-offset-2 focus-visible:underline focus-visible:outline-hidden"
|
|
aria-controls="accordionItemOne" x-on:click="isExpanded = ! isExpanded"
|
|
x-bind:class="isExpanded ? 'text-on-surface-strong dark:text-on-surface-dark-strong font-bold' : 'text-on-surface dark:text-on-surface-dark font-medium'"
|
|
x-bind:aria-expanded="isExpanded ? 'true' : 'false'">
|
|
What browsers are supported?
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke-width="2"
|
|
stroke="currentColor" class="size-5 shrink-0 transition" aria-hidden="true"
|
|
x-bind:class="isExpanded ? 'rotate-180' : ''">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
|
|
</svg>
|
|
</button>
|
|
<div x-cloak x-show="isExpanded" id="accordionItemOne" role="region" aria-labelledby="controlsAccordionItemOne"
|
|
x-collapse>
|
|
<div class="pb-4 text-sm sm:text-base text-pretty">
|
|
Our website is optimized for the latest versions of Chrome, Firefox, Safari, and Edge. Check our <a
|
|
href="#" class="underline underline-offset-2 text-primary dark:text-primary-dark">documentation</a>
|
|
for additional information.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div x-data="{ isExpanded: false }">
|
|
<button id="controlsAccordionItemTwo" type="button"
|
|
class="flex w-full items-center justify-between gap-4 py-4 text-left underline-offset-2 focus-visible:underline focus-visible:outline-hidden"
|
|
aria-controls="accordionItemTwo" x-on:click="isExpanded = ! isExpanded"
|
|
x-bind:class="isExpanded ? 'text-on-surface-strong dark:text-on-surface-dark-strong font-bold' : 'text-on-surface dark:text-on-surface-dark font-medium'"
|
|
x-bind:aria-expanded="isExpanded ? 'true' : 'false'">
|
|
How can I contact customer support?
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke-width="2"
|
|
stroke="currentColor" class="size-5 shrink-0 transition" aria-hidden="true"
|
|
x-bind:class="isExpanded ? 'rotate-180' : ''">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
|
|
</svg>
|
|
</button>
|
|
<div x-cloak x-show="isExpanded" id="accordionItemTwo" role="region" aria-labelledby="controlsAccordionItemTwo"
|
|
x-collapse>
|
|
<div class="pb-4 text-sm sm:text-base text-pretty">
|
|
Reach out to our dedicated support team via email at <a href="#"
|
|
class="underline underline-offset-2 text-primary dark:text-primary-dark">support@example.com</a> or
|
|
call our toll-free number at 1-800-123-4567 during business hours.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div x-data="{ isExpanded: false }">
|
|
<button id="controlsAccordionItemThree" type="button"
|
|
class="flex w-full items-center justify-between gap-4 py-4 text-left underline-offset-2 focus-visible:underline focus-visible:outline-hidden"
|
|
aria-controls="accordionItemThree" x-on:click="isExpanded = ! isExpanded"
|
|
x-bind:class="isExpanded ? 'text-on-surface-strong dark:text-on-surface-dark-strong font-bold' : 'text-on-surface dark:text-on-surface-dark font-medium'"
|
|
x-bind:aria-expanded="isExpanded ? 'true' : 'false'">
|
|
What is the refund policy?
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke-width="2"
|
|
stroke="currentColor" class="size-5 shrink-0 transition" aria-hidden="true"
|
|
x-bind:class="isExpanded ? 'rotate-180' : ''">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
|
|
</svg>
|
|
</button>
|
|
<div x-cloak x-show="isExpanded" id="accordionItemThree" role="region"
|
|
aria-labelledby="controlsAccordionItemThree" x-collapse>
|
|
<div class="pb-4 text-sm sm:text-base text-pretty">
|
|
Please refer to our <a href="#"
|
|
class="underline underline-offset-2 text-primary dark:text-primary-dark">refund policy page</a> on
|
|
the website for detailed information regarding eligibility, timeframes, and the process for requesting a
|
|
refund.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div> |