Tailwind CSS Tabs

Default tabs

Tabs standar dengan gaya dasar dan bagian konten.

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>
  <ul class="flex border-b border-gray-300 dark:border-gray-700 mb-4">
    <li class="mr-1">
      <button
        class="bg-blue-200 dark:bg-gray-700 inline-block py-2 px-4 rounded-t-lg font-semibold"
      >
        Tab 1
      </button>
    </li>
    <li class="mr-1">
      <button
        class="bg-white dark:bg-gray-800 inline-block py-2 px-4 rounded-t-lg hover:bg-blue-100 dark:hover:bg-gray-600"
      >
        Tab 2
      </button>
    </li>
    <li class="mr-1">
      <button
        class="bg-white dark:bg-gray-800 inline-block py-2 px-4 rounded-t-lg hover:bg-blue-100 dark:hover:bg-gray-600"
      >
        Tab 3
      </button>
    </li>
  </ul>
  <div class="hidden">
    <p class="text-md font-normal text-gray-500 dark:text-gray-400">
      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.
    </p>
  </div>

  <div class="hidden">
    <p class="text-md font-normal text-gray-500 dark:text-gray-400">
      uanxa 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.
    </p>
  </div>

  <div>
    <p class="text-md font-normal text-gray-500 dark:text-gray-400">
      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.
    </p>
  </div>
</div>

Pills tabs

Tabs dengan desain berbentuk pill yang memberikan tampilan lebih modern dan stylish.

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>
  <ul class="flex border-b border-gray-300 dark:border-gray-700 mb-4">
    <li class="mr-1">
      <button
        class="bg-blue-200 dark:bg-gray-700 inline-block py-2 px-4 rounded-t-lg font-semibold"
      >
        Tab 1
      </button>
    </li>
    <li class="mr-1">
      <button
        class="bg-white dark:bg-gray-800 inline-block py-2 px-4 rounded-t-lg hover:bg-blue-100 dark:hover:bg-gray-600"
      >
        Tab 2
      </button>
    </li>
    <li class="mr-1">
      <button
        class="bg-white dark:bg-gray-800 inline-block py-2 px-4 rounded-t-lg hover:bg-blue-100 dark:hover:bg-gray-600"
      >
        Tab 3
      </button>
    </li>
  </ul>
  <div class="hidden">
    <p class="text-md font-normal text-gray-500 dark:text-gray-400">
      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.
    </p>
  </div>

  <div class="hidden">
    <p class="text-md font-normal text-gray-500 dark:text-gray-400">
      uanxa 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.
    </p>
  </div>

  <div>
    <p class="text-md font-normal text-gray-500 dark:text-gray-400">
      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.
    </p>
  </div>
</div>

Underline tabs

Tabs dengan gaya garis bawah, di mana tab aktif disorot dengan garis bawah.

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>
  <ul class="flex border-b border-gray-300 dark:border-gray-700 mb-4">
    <li class="mr-1">
      <button
        class="bg-blue-200 dark:bg-gray-700 inline-block py-2 px-4 rounded-t-lg font-semibold"
      >
        Tab 1
      </button>
    </li>
    <li class="mr-1">
      <button
        class="bg-white dark:bg-gray-800 inline-block py-2 px-4 rounded-t-lg hover:bg-blue-100 dark:hover:bg-gray-600"
      >
        Tab 2
      </button>
    </li>
    <li class="mr-1">
      <button
        class="bg-white dark:bg-gray-800 inline-block py-2 px-4 rounded-t-lg hover:bg-blue-100 dark:hover:bg-gray-600"
      >
        Tab 3
      </button>
    </li>
  </ul>
  <div class="hidden">
    <p class="text-md font-normal text-gray-500 dark:text-gray-400">
      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.
    </p>
  </div>

  <div class="hidden">
    <p class="text-md font-normal text-gray-500 dark:text-gray-400">
      uanxa 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.
    </p>
  </div>

  <div>
    <p class="text-md font-normal text-gray-500 dark:text-gray-400">
      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.
    </p>
  </div>
</div>

Vertical tabs

Tabs yang disusun secara vertikal, berguna untuk menghemat ruang horizontal.

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>
  <ul class="flex border-b border-gray-300 dark:border-gray-700 mb-4">
    <li class="mr-1">
      <button
        class="bg-blue-200 dark:bg-gray-700 inline-block py-2 px-4 rounded-t-lg font-semibold"
      >
        Tab 1
      </button>
    </li>
    <li class="mr-1">
      <button
        class="bg-white dark:bg-gray-800 inline-block py-2 px-4 rounded-t-lg hover:bg-blue-100 dark:hover:bg-gray-600"
      >
        Tab 2
      </button>
    </li>
    <li class="mr-1">
      <button
        class="bg-white dark:bg-gray-800 inline-block py-2 px-4 rounded-t-lg hover:bg-blue-100 dark:hover:bg-gray-600"
      >
        Tab 3
      </button>
    </li>
  </ul>
  <div class="hidden">
    <p class="text-md font-normal text-gray-500 dark:text-gray-400">
      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.
    </p>
  </div>

  <div class="hidden">
    <p class="text-md font-normal text-gray-500 dark:text-gray-400">
      uanxa 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.
    </p>
  </div>

  <div>
    <p class="text-md font-normal text-gray-500 dark:text-gray-400">
      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.
    </p>
  </div>
</div>

Tabs with form