Accordion

<flowbite-accordion>
  <flowbite-accordion-panel [isOpen]="true">
    <flowbite-accordion-title>What is Flowbite ?</flowbite-accordion-title>
    <flowbite-accordion-content>
      <div class="p-5">
        <p class="text-base font-normal text-gray-600 dark:text-gray-400">
          Flowbite is an open-source library of interactive components built on top of Tailwind CSS
          including buttons, dropdowns, modals, navbars, and more.
        </p>
        <p class="text-base font-normal text-gray-600 dark:text-gray-400">
          Check out this guide to learn how to
          <a
            class="text-base font-medium underline text-gray-600 dark:text-gray-400 decoration-primary-600 dark:decoration-primary-500"
            href="https://flowbite.com/docs/getting-started/introduction/">
            Get started
          </a>
          and start developing websites even faster with components on top of Tailwind CSS.
        </p>
      </div>
    </flowbite-accordion-content>
  </flowbite-accordion-panel>
  <flowbite-accordion-panel>
    <flowbite-accordion-title>Is there a Figma file available ?</flowbite-accordion-title>
    <flowbite-accordion-content>
      <div class="p-5">
        <p class="text-base font-normal text-gray-600 dark:text-gray-400">
          Flowbite is first conceptualized and designed using the Figma software so everything you
          see in the library has a design equivalent in our Figma file.
        </p>
        <p class="text-base font-normal text-gray-600 dark:text-gray-400">
          Check out the
          <a href="https://flowbite.com/figma/">Figma design system</a>
          based on the utility classes from Tailwind CSS and components from Flowbite.
        </p>
      </div>
    </flowbite-accordion-content>
  </flowbite-accordion-panel>
  <flowbite-accordion-panel>
    <flowbite-accordion-title>
      What are the differences between Flowbite and Tailwind UI ?
    </flowbite-accordion-title>
    <flowbite-accordion-content>
      <div class="p-5">
        <p class="text-base font-normal text-gray-600 dark:text-gray-400">
          The main difference is that the core components from Flowbite are open source under the
          MIT license, whereas Tailwind UI is a paid product. Another difference is that Flowbite
          relies on smaller and standalone components, whereas Tailwind UI offers sections of pages.
        </p>
        <p class="text-base font-normal text-gray-600 dark:text-gray-400">
          However, we actually recommend using both Flowbite, Flowbite Pro, and even Tailwind UI as
          there is no technical reason stopping you from using the best of two worlds.
        </p>
        <p class="text-base font-normal text-gray-600 dark:text-gray-400">
          Learn more about these technologies :
        </p>
        <ul class="text-base font-normal text-gray-600 dark:text-gray-400 list-disc list-inside">
          <li>
            <a
              class="text-base font-medium underline text-gray-600 dark:text-gray-400 decoration-primary-600 dark:decoration-primary-500"
              href="https://flowbite.com/pro/">
              Flowbite Pro
            </a>
          </li>
          <li>
            <a
              class="text-base font-medium underline text-gray-600 dark:text-gray-400 decoration-primary-600 dark:decoration-primary-500"
              href="https://tailwindui.com/"
              rel="nofollow">
              Tailwind UI
            </a>
          </li>
        </ul>
      </div>
    </flowbite-accordion-content>
  </flowbite-accordion-panel>
</flowbite-accordion>

<flowbite-accordion [isAlwaysOpen]="true">
  <flowbite-accordion-panel [isOpen]="true">
    <flowbite-accordion-title>What is Flowbite ?</flowbite-accordion-title>
    <flowbite-accordion-content>
      <div class="p-5">
        <p class="text-base font-normal text-gray-600 dark:text-gray-400">
          Flowbite is an open-source library of interactive components built on top of Tailwind CSS
          including buttons, dropdowns, modals, navbars, and more.
        </p>
        <p class="text-base font-normal text-gray-600 dark:text-gray-400">
          Check out this guide to learn how to
          <a
            class="text-base font-medium underline text-gray-600 dark:text-gray-400 decoration-primary-600 dark:decoration-primary-500"
            href="https://flowbite.com/docs/getting-started/introduction/">
            Get started
          </a>
          and start developing websites even faster with components on top of Tailwind CSS.
        </p>
      </div>
    </flowbite-accordion-content>
  </flowbite-accordion-panel>
  <flowbite-accordion-panel>
    <flowbite-accordion-title>Is there a Figma file available ?</flowbite-accordion-title>
    <flowbite-accordion-content>
      <div class="p-5">
        <p class="text-base font-normal text-gray-600 dark:text-gray-400">
          Flowbite is first conceptualized and designed using the Figma software so everything you
          see in the library has a design equivalent in our Figma file.
        </p>
        <p class="text-base font-normal text-gray-600 dark:text-gray-400">
          Check out the
          <a href="https://flowbite.com/figma/">Figma design system</a>
          based on the utility classes from Tailwind CSS and components from Flowbite.
        </p>
      </div>
    </flowbite-accordion-content>
  </flowbite-accordion-panel>
  <flowbite-accordion-panel>
    <flowbite-accordion-title>
      What are the differences between Flowbite and Tailwind UI ?
    </flowbite-accordion-title>
    <flowbite-accordion-content>
      <div class="p-5">
        <p class="text-base font-normal text-gray-600 dark:text-gray-400">
          The main difference is that the core components from Flowbite are open source under the
          MIT license, whereas Tailwind UI is a paid product. Another difference is that Flowbite
          relies on smaller and standalone components, whereas Tailwind UI offers sections of pages.
        </p>
        <p class="text-base font-normal text-gray-600 dark:text-gray-400">
          However, we actually recommend using both Flowbite, Flowbite Pro, and even Tailwind UI as
          there is no technical reason stopping you from using the best of two worlds.
        </p>
        <p class="text-base font-normal text-gray-600 dark:text-gray-400">
          Learn more about these technologies :
        </p>
        <ul class="text-base font-normal text-gray-600 dark:text-gray-400 list-disc list-inside">
          <li>
            <a
              class="text-base font-medium underline text-gray-600 dark:text-gray-400 decoration-primary-600 dark:decoration-primary-500"
              href="https://flowbite.com/pro/">
              Flowbite Pro
            </a>
          </li>
          <li>
            <a
              class="text-base font-medium underline text-gray-600 dark:text-gray-400 decoration-primary-600 dark:decoration-primary-500"
              href="https://tailwindui.com/"
              rel="nofollow">
              Tailwind UI
            </a>
          </li>
        </ul>
      </div>
    </flowbite-accordion-content>
  </flowbite-accordion-panel>
</flowbite-accordion>

<flowbite-accordion color="blue">
  <flowbite-accordion-panel [isOpen]="true">
    <flowbite-accordion-title>What is Flowbite ?</flowbite-accordion-title>
    <flowbite-accordion-content>
      <div class="p-5">
        <p class="text-base font-normal text-gray-600 dark:text-gray-400">
          Flowbite is an open-source library of interactive components built on top of Tailwind CSS
          including buttons, dropdowns, modals, navbars, and more.
        </p>
        <p class="text-base font-normal text-gray-600 dark:text-gray-400">
          Check out this guide to learn how to
          <a
            class="text-base font-medium underline text-gray-600 dark:text-gray-400 decoration-primary-600 dark:decoration-primary-500"
            href="https://flowbite.com/docs/getting-started/introduction/">
            Get started
          </a>
          and start developing websites even faster with components on top of Tailwind CSS.
        </p>
      </div>
    </flowbite-accordion-content>
  </flowbite-accordion-panel>
  <flowbite-accordion-panel>
    <flowbite-accordion-title>Is there a Figma file available ?</flowbite-accordion-title>
    <flowbite-accordion-content>
      <div class="p-5">
        <p class="text-base font-normal text-gray-600 dark:text-gray-400">
          Flowbite is first conceptualized and designed using the Figma software so everything you
          see in the library has a design equivalent in our Figma file.
        </p>
        <p class="text-base font-normal text-gray-600 dark:text-gray-400">
          Check out the
          <a href="https://flowbite.com/figma/">Figma design system</a>
          based on the utility classes from Tailwind CSS and components from Flowbite.
        </p>
      </div>
    </flowbite-accordion-content>
  </flowbite-accordion-panel>
  <flowbite-accordion-panel>
    <flowbite-accordion-title>
      What are the differences between Flowbite and Tailwind UI ?
    </flowbite-accordion-title>
    <flowbite-accordion-content>
      <div class="p-5">
        <p class="text-base font-normal text-gray-600 dark:text-gray-400">
          The main difference is that the core components from Flowbite are open source under the
          MIT license, whereas Tailwind UI is a paid product. Another difference is that Flowbite
          relies on smaller and standalone components, whereas Tailwind UI offers sections of pages.
        </p>
        <p class="text-base font-normal text-gray-600 dark:text-gray-400">
          However, we actually recommend using both Flowbite, Flowbite Pro, and even Tailwind UI as
          there is no technical reason stopping you from using the best of two worlds.
        </p>
        <p class="text-base font-normal text-gray-600 dark:text-gray-400">
          Learn more about these technologies :
        </p>
        <ul class="text-base font-normal text-gray-600 dark:text-gray-400 list-disc list-inside">
          <li>
            <a
              class="text-base font-medium underline text-gray-600 dark:text-gray-400 decoration-primary-600 dark:decoration-primary-500"
              href="https://flowbite.com/pro/">
              Flowbite Pro
            </a>
          </li>
          <li>
            <a
              class="text-base font-medium underline text-gray-600 dark:text-gray-400 decoration-primary-600 dark:decoration-primary-500"
              href="https://tailwindui.com/"
              rel="nofollow">
              Tailwind UI
            </a>
          </li>
        </ul>
      </div>
    </flowbite-accordion-content>
  </flowbite-accordion-panel>
</flowbite-accordion>

<flowbite-accordion [isFlush]="true">
  <flowbite-accordion-panel [isOpen]="true">
    <flowbite-accordion-title>What is Flowbite ?</flowbite-accordion-title>
    <flowbite-accordion-content>
      <div class="p-5">
        <p class="text-base font-normal text-gray-600 dark:text-gray-400">
          Flowbite is an open-source library of interactive components built on top of Tailwind CSS
          including buttons, dropdowns, modals, navbars, and more.
        </p>
        <p class="text-base font-normal text-gray-600 dark:text-gray-400">
          Check out this guide to learn how to
          <a
            class="text-base font-medium underline text-gray-600 dark:text-gray-400 decoration-primary-600 dark:decoration-primary-500"
            href="https://flowbite.com/docs/getting-started/introduction/">
            Get started
          </a>
          and start developing websites even faster with components on top of Tailwind CSS.
        </p>
      </div>
    </flowbite-accordion-content>
  </flowbite-accordion-panel>
  <flowbite-accordion-panel>
    <flowbite-accordion-title>Is there a Figma file available ?</flowbite-accordion-title>
    <flowbite-accordion-content>
      <div class="p-5">
        <p class="text-base font-normal text-gray-600 dark:text-gray-400">
          Flowbite is first conceptualized and designed using the Figma software so everything you
          see in the library has a design equivalent in our Figma file.
        </p>
        <p class="text-base font-normal text-gray-600 dark:text-gray-400">
          Check out the
          <a href="https://flowbite.com/figma/">Figma design system</a>
          based on the utility classes from Tailwind CSS and components from Flowbite.
        </p>
      </div>
    </flowbite-accordion-content>
  </flowbite-accordion-panel>
  <flowbite-accordion-panel>
    <flowbite-accordion-title>
      What are the differences between Flowbite and Tailwind UI ?
    </flowbite-accordion-title>
    <flowbite-accordion-content>
      <div class="p-5">
        <p class="text-base font-normal text-gray-600 dark:text-gray-400">
          The main difference is that the core components from Flowbite are open source under the
          MIT license, whereas Tailwind UI is a paid product. Another difference is that Flowbite
          relies on smaller and standalone components, whereas Tailwind UI offers sections of pages.
        </p>
        <p class="text-base font-normal text-gray-600 dark:text-gray-400">
          However, we actually recommend using both Flowbite, Flowbite Pro, and even Tailwind UI as
          there is no technical reason stopping you from using the best of two worlds.
        </p>
        <p class="text-base font-normal text-gray-600 dark:text-gray-400">
          Learn more about these technologies :
        </p>
        <ul class="text-base font-normal text-gray-600 dark:text-gray-400 list-disc list-inside">
          <li>
            <a
              class="text-base font-medium underline text-gray-600 dark:text-gray-400 decoration-primary-600 dark:decoration-primary-500"
              href="https://flowbite.com/pro/">
              Flowbite Pro
            </a>
          </li>
          <li>
            <a
              class="text-base font-medium underline text-gray-600 dark:text-gray-400 decoration-primary-600 dark:decoration-primary-500"
              href="https://tailwindui.com/"
              rel="nofollow">
              Tailwind UI
            </a>
          </li>
        </ul>
      </div>
    </flowbite-accordion-content>
  </flowbite-accordion-panel>
</flowbite-accordion>

<flowbite-accordion>
  <flowbite-accordion-panel [isOpen]="true">
    <flowbite-accordion-title [icon]="no_arrow">What is Flowbite ?</flowbite-accordion-title>
    <flowbite-accordion-content>
      <div class="p-5">
        <p class="text-base font-normal text-gray-600 dark:text-gray-400">
          Flowbite is an open-source library of interactive components built on top of Tailwind CSS
          including buttons, dropdowns, modals, navbars, and more.
        </p>
        <p class="text-base font-normal text-gray-600 dark:text-gray-400">
          Check out this guide to learn how to
          <a
            class="text-base font-medium underline text-gray-600 dark:text-gray-400 decoration-primary-600 dark:decoration-primary-500"
            href="https://flowbite.com/docs/getting-started/introduction/">
            Get started
          </a>
          and start developing websites even faster with components on top of Tailwind CSS.
        </p>
      </div>
    </flowbite-accordion-content>
  </flowbite-accordion-panel>
  <flowbite-accordion-panel>
    <flowbite-accordion-title [icon]="question_mark_arrow">
      Is there a Figma file available ?
    </flowbite-accordion-title>
    <flowbite-accordion-content>
      <div class="p-5">
        <p class="text-base font-normal text-gray-600 dark:text-gray-400">
          Flowbite is first conceptualized and designed using the Figma software so everything you
          see in the library has a design equivalent in our Figma file.
        </p>
        <p class="text-base font-normal text-gray-600 dark:text-gray-400">
          Check out the
          <a href="https://flowbite.com/figma/">Figma design system</a>
          based on the utility classes from Tailwind CSS and components from Flowbite.
        </p>
      </div>
    </flowbite-accordion-content>
  </flowbite-accordion-panel>
  <flowbite-accordion-panel>
    <flowbite-accordion-title>
      What are the differences between Flowbite and Tailwind UI ?
    </flowbite-accordion-title>
    <flowbite-accordion-content>
      <div class="p-5">
        <p class="text-base font-normal text-gray-600 dark:text-gray-400">
          The main difference is that the core components from Flowbite are open source under the
          MIT license, whereas Tailwind UI is a paid product. Another difference is that Flowbite
          relies on smaller and standalone components, whereas Tailwind UI offers sections of pages.
        </p>
        <p class="text-base font-normal text-gray-600 dark:text-gray-400">
          However, we actually recommend using both Flowbite, Flowbite Pro, and even Tailwind UI as
          there is no technical reason stopping you from using the best of two worlds.
        </p>
        <p class="text-base font-normal text-gray-600 dark:text-gray-400">
          Learn more about these technologies :
        </p>
        <ul class="text-base font-normal text-gray-600 dark:text-gray-400 list-disc list-inside">
          <li>
            <a
              class="text-base font-medium underline text-gray-600 dark:text-gray-400 decoration-primary-600 dark:decoration-primary-500"
              href="https://flowbite.com/pro/">
              Flowbite Pro
            </a>
          </li>
          <li>
            <a
              class="text-base font-medium underline text-gray-600 dark:text-gray-400 decoration-primary-600 dark:decoration-primary-500"
              href="https://tailwindui.com/"
              rel="nofollow">
              Tailwind UI
            </a>
          </li>
        </ul>
      </div>
    </flowbite-accordion-content>
  </flowbite-accordion-panel>
</flowbite-accordion>

<ng-template #no_arrow />
<ng-template #question_mark_arrow>
  <flowbite-icon
    svgIcon="outline:question-circle"
    class="h-6 w-6 shrink-0" />
</ng-template>