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