<.accordion id="accordion-single-basic" class="bg-white dark:bg-zinc-800 rounded-lg border border-zinc-200 dark:border-zinc-700">
  <:trigger class="p-4 pr-10 text-lg">
    Accordion 1
  </:trigger>
  <:panel class="p-4">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.
  </:panel>
  <:trigger class="p-4 pr-10 text-lg">
    Accordion 2
  </:trigger>
  <:panel class="p-4">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.
  </:panel>
  <:trigger class="p-4 pr-10 text-lg">
    Accordion 3
  </:trigger>
  <:panel class="p-4">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.
  </:panel>
</.accordion>

<.accordion id="accordion-single-controlled-accordion" class="bg-white dark:bg-zinc-800 rounded-lg border border-zinc-200 dark:border-zinc-700" controlled>
  <:trigger class="p-4 pr-10 text-lg">
    Accordion 1
  </:trigger>
  <:panel class="p-4">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.
  </:panel>
  <:trigger class="p-4 pr-10 text-lg">
    Accordion 2
  </:trigger>
  <:panel class="p-4">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.
  </:panel>
</.accordion>

<.accordion id="accordion-single-expand-icon" class="bg-white dark:bg-zinc-800 rounded-lg border border-zinc-200 dark:border-zinc-700">
  <:trigger class="p-4 pr-10 text-lg" icon_name="hero-arrow-down">
    Accordion 1
  </:trigger>
  <:panel class="p-4">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.
  </:panel>
  <:trigger class="p-4 pr-10 text-lg" icon_name="hero-arrow-down-circle">
    Accordion 2
  </:trigger>
  <:panel class="p-4">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.
  </:panel>
</.accordion>

<.accordion id="accordion-single-default-expanded" class="bg-white dark:bg-zinc-800 rounded-lg border border-zinc-200 dark:border-zinc-700">
  <:trigger class="p-4 pr-10 text-lg">
    Accordion
  </:trigger>
  <:panel class="p-4" default_expanded>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.
  </:panel>
</.accordion>

<.accordion id="accordion-single-max-height-class" class="bg-white dark:bg-zinc-800 rounded-lg border border-zinc-200 dark:border-zinc-700">
  <:trigger class="p-4 pr-10 text-lg">
    Accordion
  </:trigger>
  <:panel class="p-4 max-h-40 overflow-y-auto">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.
    <br />
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.
  </:panel>
</.accordion>