Tailwind CSS Accordion - Nuanxa

Komponen accordion digunakan untuk menampilkan atau menyembunyikan bagian konten. Setiap item dapat diperluas atau ditutup, dengan perilaku yang dapat dikonfigurasi untuk mengatur bagaimana bagian dibuka dan ditutup.

Requires Nuanxa JS

Default accordion

Accordion yang hanya memungkinkan satu bagian terbuka dalam satu waktu. Membuka bagian baru akan otomatis menutup bagian yang sebelumnya terbuka.

            
<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

Accordion dengan bagian pertama terbuka secara default. Hanya satu bagian yang dapat tetap terbuka dalam satu waktu.

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 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

Accordion dengan gaya kartu, memberikan tampilan yang lebih jelas dan terpisah untuk setiap bagian.

            
<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

Accordion dengan gaya garis bawah, memberikan tampilan yang bersih dan minimalis untuk setiap bagian.

            
<div
  class="accordion accordion-underline 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

Accordion yang memungkinkan beberapa bagian tetap terbuka secara bersamaan tanpa menutup bagian lainnya.

            
<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>

Lisensi

Alert