Tailwind CSS Accordion - Nuanxa

The accordion component is used to toggle the visibility of content sections. Each item can be expanded or collapsed, with configurable behavior to control how sections open and close.

Default Accordion

An accordion that allows only one section to be open at a time. Opening a new section will automatically close the previously opened one.


<div
  class="accordion border border-gray-300 dark:border-gray-700 rounded-2xl divide-y divide-gray-300 dark:divide-gray-700 overflow-hidden"
>
  <div class="accordion-item">
    <button
      class="accordion-header w-full text-left p-4 flex justify-between items-center font-semibold hover:bg-gray-200 dark:hover:bg-gray-700"
    >
      <span>What is Nuanxa?</span>
      <i
        class="fas fa-chevron-down w-4 h-4 text-xs transition-transform duration-100"
      ></i>
    </button>
    <div class="accordion-body text-gray-600 dark:text-gray-400 hidden p-4">
      Nuanxa is a collection of modern Tailwind CSS UI components and website
      templates designed to help developers and designers build responsive and
      beautiful interfaces quickly. With a focus on clean code, reusability, and
      ease of integration, Nuanxa provides a growing library of components and
      templates that can be easily customized to fit any project. Whether you're
      building a simple landing page or a complex web application, Nuanxa offers
      the tools you need to create stunning user interfaces with less effort.
    </div>
  </div>
  <div class="accordion-item">
    <button
      class="accordion-header w-full text-left p-4 flex justify-between items-center font-semibold hover:bg-gray-200 dark:hover:bg-gray-700"
    >
      <span>Why is Nuanxa provided for free?</span>
      <i
        class="fas fa-chevron-down w-4 h-4 text-xs transition-transform duration-100"
      ></i>
    </button>
    <div class="accordion-body text-gray-600 dark:text-gray-400 hidden p-4">
      Nuanxa is provided for free to ensure that everyone can easily use
      interactive components based on Tailwind CSS without having to create them
      from scratch, thus speeding up website development and encouraging
      community usage.
    </div>
  </div>
  <div class="accordion-item">
    <button
      class="accordion-header w-full text-left p-4 flex justify-between items-center font-semibold hover:bg-gray-200 dark:hover:bg-gray-700"
    >
      <span
        >What is the difference between Nuanxa and other UI component libraries?</span
      >
      <i
        class="fas fa-chevron-down w-4 h-4 text-xs transition-transform duration-100"
      ></i>
    </button>
    <div class="accordion-body text-gray-600 dark:text-gray-400 hidden p-4">
      Nuanxa provides ready-to-use interactive components based on Tailwind CSS
      that can be directly used to build websites faster without having to
      create components from scratch. Other UI libraries may provide components
      but are not always designed to be used directly with Tailwind CSS or as
      conveniently.
    </div>
  </div>
</div>

Accordion Open

An accordion with the first section expanded by default. Only one section can remain open at a time.

Nuanxa adalah koleksi komponen UI Tailwind CSS modern dan template website yang dirancang untuk membantu pengembang dan desainer membangun antarmuka yang responsif dan indah dengan cepat. Dengan fokus pada kode yang bersih, dapat digunakan kembali, dan kemudahan integrasi, Nuanxa menyediakan perpustakaan komponen dan template yang terus berkembang yang dapat dengan mudah disesuaikan untuk memenuhi kebutuhan proyek apa pun. Baik Anda membangun halaman arahan sederhana atau aplikasi web yang kompleks, Nuanxa menawarkan alat yang Anda butuhkan untuk membuat antarmuka pengguna yang menakjubkan dengan lebih sedikit usaha.


<div
  class="accordion border border-gray-300 dark:border-gray-700 rounded-2xl divide-y divide-gray-300 dark:divide-gray-700 overflow-hidden"
>
  <div class="accordion-item open">
    <button
      class="accordion-header w-full text-left p-4 flex justify-between items-center font-semibold hover:bg-gray-200 dark:hover:bg-gray-700"
    >
      <span>What is Nuanxa?</span>
      <i
        class="fas fa-chevron-down w-4 h-4 text-xs transition-transform duration-100"
      ></i>
    </button>
    <div class="accordion-body text-gray-600 dark:text-gray-400 hidden p-4">
      Nuanxa is a collection of modern Tailwind CSS UI components and website
      templates designed to help developers and designers build responsive and
      beautiful interfaces quickly. With a focus on clean code, reusability, and
      ease of integration, Nuanxa provides a growing library of components and
      templates that can be easily customized to fit any project. Whether you're
      building a simple landing page or a complex web application, Nuanxa offers
      the tools you need to create stunning user interfaces with less effort.
    </div>
  </div>
  <div class="accordion-item">
    <button
      class="accordion-header w-full text-left p-4 flex justify-between items-center font-semibold hover:bg-gray-200 dark:hover:bg-gray-700"
    >
      <span>Why is Nuanxa provided for free?</span>
      <i
        class="fas fa-chevron-down w-4 h-4 text-xs transition-transform duration-100"
      ></i>
    </button>
    <div class="accordion-body text-gray-600 dark:text-gray-400 hidden p-4">
      Nuanxa is provided for free to ensure that everyone can easily use
      interactive components based on Tailwind CSS without having to create them
      from scratch, thus speeding up website development and encouraging
      community usage.
    </div>
  </div>
  <div class="accordion-item">
    <button
      class="accordion-header w-full text-left p-4 flex justify-between items-center font-semibold hover:bg-gray-200 dark:hover:bg-gray-700"
    >
      <span
        >What is the difference between Nuanxa and other UI component libraries?</span
      >
      <i
        class="fas fa-chevron-down w-4 h-4 text-xs transition-transform duration-100"
      ></i>
    </button>
    <div class="accordion-body text-gray-600 dark:text-gray-400 hidden p-4">
      Nuanxa provides ready-to-use interactive components based on Tailwind CSS
      that can be directly used to build websites faster without having to
      create components from scratch. Other UI libraries may provide components
      but are not always designed to be used directly with Tailwind CSS or as
      conveniently.
    </div>
  </div>
</div>

Accordion Card

An accordion styled as cards, providing a more distinct and visually separated layout for each section.


<div class="accordion space-y-3 overflow-hidden">
  <div
    class="accordion-item bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded-2xl overflow-hidden"
  >
    <button
      class="accordion-header w-full text-left p-4 flex justify-between items-center font-semibold hover:bg-gray-200 dark:hover:bg-gray-700"
    >
      <span>What is Nuanxa?</span>
      <i
        class="fas fa-chevron-down w-4 h-4 text-xs transition-transform duration-100"
      ></i>
    </button>
    <div class="accordion-body text-gray-600 dark:text-gray-400 hidden p-4">
      Nuanxa is a collection of modern Tailwind CSS UI components and website
      templates designed to help developers and designers build responsive and
      beautiful interfaces quickly. With a focus on clean code, reusability, and
      ease of integration, Nuanxa provides a growing library of components and
      templates that can be easily customized to fit any project. Whether you're
      building a simple landing page or a complex web application, Nuanxa offers
      the tools you need to create stunning user interfaces with less effort.
    </div>
  </div>
  <div
    class="accordion-item bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded-lg overflow-hidden"
  >
    <button
      class="accordion-header w-full text-left p-4 flex justify-between items-center font-semibold hover:bg-gray-200 dark:hover:bg-gray-700"
    >
      <span>Why is Nuanxa provided for free?</span>
      <i
        class="fas fa-chevron-down w-4 h-4 text-xs transition-transform duration-100"
      ></i>
    </button>
    <div class="accordion-body text-gray-600 dark:text-gray-400 hidden p-4">
      Nuanxa is provided for free to ensure that everyone can easily use
      interactive components based on Tailwind CSS without having to create them
      from scratch, thus speeding up website development and encouraging
      community usage.
    </div>
  </div>
  <div
    class="accordion-item bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded-lg overflow-hidden"
  >
    <button
      class="accordion-header w-full text-left p-4 flex justify-between items-center font-semibold hover:bg-gray-200 dark:hover:bg-gray-700"
    >
      <span
        >What is the difference between Nuanxa and other UI component libraries?</span
      >
      <i
        class="fas fa-chevron-down w-4 h-4 text-xs transition-transform duration-100"
      ></i>
    </button>
    <div class="accordion-body text-gray-600 dark:text-gray-400 hidden p-4">
      Nuanxa provides ready-to-use interactive components based on Tailwind CSS
      that can be directly used to build websites faster without having to
      create components from scratch. Other UI libraries may provide components
      but are not always designed to be used directly with Tailwind CSS or as
      conveniently.
    </div>
  </div>
</div>

Underline Accordion

An accordion with an underline style, providing a clean and minimal look for each section.


<div
  class="accordion border-b border-gray-300 dark:border-gray-700 divide-y divide-gray-300 dark:divide-gray-700 overflow-hidden"
>
  <div class="accordion-item">
    <button
      class="accordion-header w-full text-left p-4 flex justify-between items-center font-semibold hover:bg-gray-200 dark:hover:bg-gray-700"
    >
      <span>What is Nuanxa?</span>
      <i
        class="fas fa-chevron-down w-4 h-4 text-xs transition-transform duration-100"
      ></i>
    </button>
    <div class="accordion-body text-gray-600 dark:text-gray-400 hidden p-4">
      Nuanxa is a collection of modern Tailwind CSS UI components and website
      templates designed to help developers and designers build responsive and
      beautiful interfaces quickly. With a focus on clean code, reusability, and
      ease of integration, Nuanxa provides a growing library of components and
      templates that can be easily customized to fit any project. Whether you're
      building a simple landing page or a complex web application, Nuanxa offers
      the tools you need to create stunning user interfaces with less effort.
    </div>
  </div>
  <div class="accordion-item">
    <button
      class="accordion-header w-full text-left p-4 flex justify-between items-center font-semibold hover:bg-gray-200 dark:hover:bg-gray-700"
    >
      <span>Why is Nuanxa provided for free?</span>
      <i
        class="fas fa-chevron-down w-4 h-4 text-xs transition-transform duration-100"
      ></i>
    </button>
    <div class="accordion-body text-gray-600 dark:text-gray-400 hidden p-4">
      Nuanxa is provided for free to ensure that everyone can easily use
      interactive components based on Tailwind CSS without having to create them
      from scratch, thus speeding up website development and encouraging
      community usage.
    </div>
  </div>
  <div class="accordion-item">
    <button
      class="accordion-header w-full text-left p-4 flex justify-between items-center font-semibold hover:bg-gray-200 dark:hover:bg-gray-700"
    >
      <span
        >What is the difference between Nuanxa and other UI component libraries?</span
      >
      <i
        class="fas fa-chevron-down w-4 h-4 text-xs transition-transform duration-100"
      ></i>
    </button>
    <div class="accordion-body text-gray-600 dark:text-gray-400 hidden p-4">
      Nuanxa provides ready-to-use interactive components based on Tailwind CSS
      that can be directly used to build websites faster without having to
      create components from scratch. Other UI libraries may provide components
      but are not always designed to be used directly with Tailwind CSS or as
      conveniently.
    </div>
  </div>
</div>

Accordion Multi-Open

An accordion that allows multiple sections to remain open simultaneously without closing others.


<div
  class="accordion-multi-open border border-gray-300 dark:border-gray-700 rounded-2xl divide-y divide-gray-300 dark:divide-gray-700 overflow-hidden"
>
  <div class="accordion-item">
    <button
      class="accordion-header w-full text-left p-4 flex justify-between items-center font-semibold hover:bg-gray-200 dark:hover:bg-gray-700"
    >
      <span>What is Nuanxa?</span>
      <i
        class="fas fa-chevron-down w-4 h-4 text-xs transition-transform duration-100"
      ></i>
    </button>
    <div class="accordion-body text-gray-600 dark:text-gray-400 hidden p-4">
      Nuanxa is a collection of modern Tailwind CSS UI components and website
      templates designed to help developers and designers build responsive and
      beautiful interfaces quickly. With a focus on clean code, reusability, and
      ease of integration, Nuanxa provides a growing library of components and
      templates that can be easily customized to fit any project. Whether you're
      building a simple landing page or a complex web application, Nuanxa offers
      the tools you need to create stunning user interfaces with less effort.
    </div>
  </div>
  <div class="accordion-item">
    <button
      class="accordion-header w-full text-left p-4 flex justify-between items-center font-semibold hover:bg-gray-200 dark:hover:bg-gray-700"
    >
      <span>Why is Nuanxa provided for free?</span>
      <i
        class="fas fa-chevron-down w-4 h-4 text-xs transition-transform duration-100"
      ></i>
    </button>
    <div class="accordion-body text-gray-600 dark:text-gray-400 hidden p-4">
      Nuanxa is provided for free to ensure that everyone can easily use
      interactive components based on Tailwind CSS without having to create them
      from scratch, thus speeding up website development and encouraging
      community usage.
    </div>
  </div>
  <div class="accordion-item">
    <button
      class="accordion-header w-full text-left p-4 flex justify-between items-center font-semibold hover:bg-gray-200 dark:hover:bg-gray-700"
    >
      <span
        >What is the difference between Nuanxa and other UI component libraries?</span
      >
      <i
        class="fas fa-chevron-down w-4 h-4 text-xs transition-transform duration-100"
      ></i>
    </button>
    <div class="accordion-body text-gray-600 dark:text-gray-400 hidden p-4">
      Nuanxa provides ready-to-use interactive components based on Tailwind CSS
      that can be directly used to build websites faster without having to
      create components from scratch. Other UI libraries may provide components
      but are not always designed to be used directly with Tailwind CSS or as
      conveniently.
    </div>
  </div>
</div>