70 lines
5.5 KiB
HTML
70 lines
5.5 KiB
HTML
<div x-data="{ selectedAccordionItem: 'one' }"
|
|
class="w-full divide-y divide-outline overflow-hidden rounded-sm border border-outline bg-surface-alt/40 text-on-surface dark:divide-outline-dark dark:border-outline-dark dark:bg-surface-dark-alt/50 dark:text-on-surface-dark">
|
|
<div>
|
|
<button id="controlsAccordionItemOne" type="button"
|
|
class="flex w-full items-center justify-between gap-4 bg-surface-alt p-4 text-left underline-offset-2 hover:bg-surface-alt/75 focus-visible:bg-surface-alt/75 focus-visible:underline focus-visible:outline-hidden dark:bg-surface-dark-alt dark:hover:bg-surface-dark-alt/75 dark:focus-visible:bg-surface-dark-alt/75"
|
|
aria-controls="accordionItemOne" x-on:click="selectedAccordionItem = 'one'"
|
|
x-bind:class="selectedAccordionItem === 'one' ? '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="selectedAccordionItem === 'one' ? '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="selectedAccordionItem === 'one' ? '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="selectedAccordionItem === 'one'" id="accordionItemOne" role="region"
|
|
aria-labelledby="controlsAccordionItemOne" x-collapse>
|
|
<div class="p-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>
|
|
<button id="controlsAccordionItemTwo" type="button"
|
|
class="flex w-full items-center justify-between gap-4 bg-surface-alt p-4 text-left underline-offset-2 hover:bg-surface-alt/75 focus-visible:bg-surface-alt/75 focus-visible:underline focus-visible:outline-hidden dark:bg-surface-dark-alt dark:hover:bg-surface-dark-alt/75 dark:focus-visible:bg-surface-dark-alt/75"
|
|
aria-controls="accordionItemTwo" x-on:click="selectedAccordionItem = 'two'"
|
|
x-bind:class="selectedAccordionItem === 'two' ? '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="selectedAccordionItem === 'two' ? '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="selectedAccordionItem === 'two' ? '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="selectedAccordionItem === 'two'" id="accordionItemTwo" role="region"
|
|
aria-labelledby="controlsAccordionItemTwo" x-collapse>
|
|
<div class="p-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>
|
|
<button id="controlsAccordionItemThree" type="button"
|
|
class="flex w-full items-center justify-between gap-4 bg-surface-alt p-4 text-left underline-offset-2 hover:bg-surface-alt/75 focus-visible:bg-surface-alt/75 focus-visible:underline focus-visible:outline-hidden dark:bg-surface-dark-alt dark:hover:bg-surface-dark-alt/75 dark:focus-visible:bg-surface-dark-alt/75"
|
|
aria-controls="accordionItemThree" x-on:click="selectedAccordionItem = 'three'"
|
|
x-bind:class="selectedAccordionItem === 'three' ? '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="selectedAccordionItem === 'three' ? '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="selectedAccordionItem === 'three' ? '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="selectedAccordionItem === 'three'" id="accordionItemThree" role="region"
|
|
aria-labelledby="controlsAccordionItemThree" x-collapse>
|
|
<div class="p-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> |