Accordion
DraftAccordion
This is the primary button, this should be used for a call to action. A interface element, should contain 1 primary button.
<div class="accordion divide-y divide-grey-200">
<details>
<summary class="list-none">
<div class="flex justify-between py-4">
<h4 class="font-bold leading-none">System Requirements</h4>
<span data-show-open="false">
<svg class="w-4" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
<!-- SVG content -->
</svg>
</span>
<span data-show-open="true">
<svg class="w-4" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
<!-- SVG content -->
</svg>
</span>
</div>
</summary>
<div class="content">
<p>
Requires a computer running an operating system. The computer must have some memory and ideally some kind of
long-term storage. An input device as well as some form of output device is recommended.
</p>
<p>
Requires a computer running an operating system. The computer must have some memory and ideally some kind of
long-term storage. An input device as well as some form of output device is recommended.
</p>
</div>
</details>
<details>
<summary class="list-none">
<div class="flex justify-between py-4">
<h4 class="font-bold leading-none">System Requirements</h4>
<span data-show-open="false">
<svg class="w-4" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
<!-- SVG content -->
</svg>
</span>
<span data-show-open="true">
<svg class="w-4" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
<!-- SVG content -->
</svg>
</span>
</div>
</summary>
<div class="content">
<p>
Requires a computer running an operating system. The computer must have some memory and ideally some kind of
long-term storage. An input device as well as some form of output device is recommended.
</p>
<p>
Requires a computer running an operating system. The computer must have some memory and ideally some kind of
long-term storage. An input device as well as some form of output device is recommended.
</p>
</div>
</details>
</div>