Tabs

<!-- Tabs -->
<!-- An Alpine.js and Tailwind CSS component by https://pinemix.com -->
<!-- Alpine.js focus plugin is required, for more info http://pinemix.com/docs/getting-started -->
<div
  x-data="{
    active: 'home',
    vertical: false,
  }"
  class="flex flex-col"
  x-bind:class="{
    'sm:flex-row': vertical
  }"
>
  <!-- Nav Tabs -->
  <div
    x-on:keydown.right.prevent.stop="$focus.wrap().next()"
    x-on:keydown.left.prevent.stop="$focus.wrap().previous()"
    x-on:keydown.home.prevent.stop="$focus.first()"
    x-on:keydown.end.prevent.stop="$focus.last()"
    x-bind:class="{
      'sm:w-36 sm:flex-none sm:flex-col sm:items-stretch': vertical
    }"
    class="flex items-center text-sm dark:border-zinc-700"
  >
    <button
      x-on:click="active = 'home'"
      x-on:focus="active = 'home'"
      type="button"
      id="home-tab"
      role="tab"
      aria-controls="home-tab-pane"
      x-bind:aria-selected="active === 'home' ? 'true' : 'false'"
      x-bind:tabindex="active === 'home' ? '0' : '-1'"
      x-bind:class="{
        'text-zinc-950 dark:text-zinc-50 border-zinc-200/75 dark:border-zinc-700/75 bg-white dark:bg-zinc-900': active === 'home',
        'text-zinc-500 border-transparent hover:text-zinc-950 dark:text-zinc-300 dark:hover:text-zinc-50': active !== 'home',
        'sm:border-e-0 sm:border-y sm:border-s sm:rounded-s-lg sm:rounded-e-none sm:-me-px': vertical,
      }"
      class="z-10 -mb-px flex items-center gap-2 rounded-t-lg border-x border-t px-5 py-3 font-medium"
    >
      Home
    </button>
    <button
      x-on:click="active = 'profile'"
      x-on:focus="active = 'profile'"
      type="button"
      id="profile-tab"
      role="tab"
      aria-controls="profile-tab-pane"
      x-bind:aria-selected="active === 'profile' ? 'true' : 'false'"
      x-bind:tabindex="active === 'profile' ? '0' : '-1'"
      x-bind:class="{
        'text-zinc-950 dark:text-zinc-50 border-zinc-200/75 dark:border-zinc-700/75 bg-white dark:bg-zinc-900': active === 'profile',
        'text-zinc-500 border-transparent hover:text-zinc-950 dark:text-zinc-300 dark:hover:text-zinc-50': active !== 'profile',
        'sm:border-e-0 sm:border-y sm:border-s sm:rounded-s-lg sm:rounded-e-none sm:-me-px': vertical,
      }"
      class="z-10 -mb-px flex items-center gap-2 rounded-t-lg border-x border-t px-5 py-3 font-medium"
    >
      Profile
    </button>
    <button
      x-on:click="active = 'settings'"
      x-on:focus="active = 'settings'"
      type="button"
      id="settings-tab"
      role="tab"
      aria-controls="settings-tab-pane"
      x-bind:aria-selected="active === 'settings' ? 'true' : 'false'"
      x-bind:tabindex="active === 'settings' ? '0' : '-1'"
      x-bind:class="{
        'text-zinc-950 dark:text-zinc-50 border-zinc-200/75 dark:border-zinc-700/75 bg-white dark:bg-zinc-900': active === 'settings',
        'text-zinc-500 border-transparent hover:text-zinc-950 dark:text-zinc-300 dark:hover:text-zinc-50': active !== 'settings',
        'sm:border-e-0 sm:border-y sm:border-s sm:rounded-s-lg sm:rounded-e-none sm:-me-px': vertical,
      }"
      class="z-10 -mb-px flex items-center gap-2 rounded-t-lg border-x border-t px-5 py-3 font-medium"
    >
      Settings
    </button>
  </div>
  <!-- END Nav Tabs -->

  <!-- Tab Content -->
  <div
    class="rounded-b-lg rounded-tr-lg border border-zinc-200/75 bg-white p-5 dark:border-zinc-700/75 dark:bg-zinc-900 rtl:rounded-tl-lg rtl:rounded-tr-none"
  >
    <!-- Home Tab -->
    <div
      x-show="active === 'home'"
      id="home-tab-pane"
      tab="tabpanel"
      aria-labelledby="home-tab"
      tabindex="0"
    >
      <h4 class="mb-2 text-lg font-bold">Welcome to your dashboard</h4>
      <p class="text-sm leading-relaxed text-zinc-700 dark:text-zinc-400">
        The Home tab serves as the primary landing page, providing an overview
        and quick access to the most essential features and information. It
        typically includes a welcome message, a summary of recent activity, and
        shortcuts to frequently used functions. Designed for convenience, the
        Home tab ensures users can easily find and navigate to all pages.
      </p>
    </div>
    <!-- END Home Tab -->

    <!-- Profile Tab -->
    <div
      x-cloak
      x-show="active === 'profile'"
      id="profile-tab-pane"
      tab="tabpanel"
      aria-labelledby="profile-tab"
      tabindex="0"
    >
      <h4 class="mb-2 text-lg font-bold">Manage your account</h4>
      <p class="text-sm leading-relaxed text-zinc-700 dark:text-zinc-400">
        The Profile tab allows users to view and manage their personal
        information and account settings. Here, users can update their contact
        details, change their password, and upload a profile picture. This tab
        ensures that users have complete control over their personal data and
        can customize their experience according to their preferences.
      </p>
    </div>
    <!-- END Profile Tab -->

    <!-- Settings Tab -->
    <div
      x-cloak
      x-show="active === 'settings'"
      id="settings-tab-pane"
      tab="tabpanel"
      aria-labelledby="settings-tab"
      tabindex="0"
    >
      <h4 class="mb-2 text-lg font-bold">Manage your application</h4>
      <p class="text-sm leading-relaxed text-zinc-700 dark:text-zinc-400">
        The Settings tab provides access to the application's configuration
        options, enabling users to customize their experience. It includes
        various controls and preferences such as notification settings, privacy
        options, and application themes. This tab empowers users to tailor the
        application to their specific needs and enhance their overall user
        experience.
      </p>
    </div>
    <!-- END Settings Tab -->
  </div>
  <!-- END Tab Content -->
</div>
<!-- END Tabs -->

<!-- Tabs: Vertical -->
<!-- An Alpine.js and Tailwind CSS component by https://pinemix.com -->
<!-- Alpine.js focus plugin is required, for more info http://pinemix.com/docs/getting-started -->
<div
  x-data="{
    active: 'home',
    vertical: true,
  }"
  class="flex flex-col"
  x-bind:class="{
    'sm:flex-row': vertical
  }"
>
  <!-- Nav Tabs -->
  <div
    x-on:keydown.right.prevent.stop="$focus.wrap().next()"
    x-on:keydown.left.prevent.stop="$focus.wrap().previous()"
    x-on:keydown.home.prevent.stop="$focus.first()"
    x-on:keydown.end.prevent.stop="$focus.last()"
    x-bind:class="{
      'sm:w-36 sm:flex-none sm:flex-col sm:items-stretch': vertical
    }"
    class="flex items-center text-sm dark:border-zinc-700"
  >
    <button
      x-on:click="active = 'home'"
      x-on:focus="active = 'home'"
      type="button"
      id="home-tab"
      role="tab"
      aria-controls="home-tab-pane"
      x-bind:aria-selected="active === 'home' ? 'true' : 'false'"
      x-bind:tabindex="active === 'home' ? '0' : '-1'"
      x-bind:class="{
        'text-zinc-950 dark:text-zinc-50 border-zinc-200/75 dark:border-zinc-700/75 bg-white dark:bg-zinc-900': active === 'home',
        'text-zinc-500 border-transparent hover:text-zinc-950 dark:text-zinc-300 dark:hover:text-zinc-50': active !== 'home',
        'sm:border-e-0 sm:border-y sm:border-s sm:rounded-s-lg sm:rounded-e-none sm:-me-px': vertical,
      }"
      class="z-10 -mb-px flex items-center gap-2 rounded-t-lg border-x border-t px-5 py-3 font-medium"
    >
      Home
    </button>
    <button
      x-on:click="active = 'profile'"
      x-on:focus="active = 'profile'"
      type="button"
      id="profile-tab"
      role="tab"
      aria-controls="profile-tab-pane"
      x-bind:aria-selected="active === 'profile' ? 'true' : 'false'"
      x-bind:tabindex="active === 'profile' ? '0' : '-1'"
      x-bind:class="{
        'text-zinc-950 dark:text-zinc-50 border-zinc-200/75 dark:border-zinc-700/75 bg-white dark:bg-zinc-900': active === 'profile',
        'text-zinc-500 border-transparent hover:text-zinc-950 dark:text-zinc-300 dark:hover:text-zinc-50': active !== 'profile',
        'sm:border-e-0 sm:border-y sm:border-s sm:rounded-s-lg sm:rounded-e-none sm:-me-px': vertical,
      }"
      class="z-10 -mb-px flex items-center gap-2 rounded-t-lg border-x border-t px-5 py-3 font-medium"
    >
      Profile
    </button>
    <button
      x-on:click="active = 'settings'"
      x-on:focus="active = 'settings'"
      type="button"
      id="settings-tab"
      role="tab"
      aria-controls="settings-tab-pane"
      x-bind:aria-selected="active === 'settings' ? 'true' : 'false'"
      x-bind:tabindex="active === 'settings' ? '0' : '-1'"
      x-bind:class="{
        'text-zinc-950 dark:text-zinc-50 border-zinc-200/75 dark:border-zinc-700/75 bg-white dark:bg-zinc-900': active === 'settings',
        'text-zinc-500 border-transparent hover:text-zinc-950 dark:text-zinc-300 dark:hover:text-zinc-50': active !== 'settings',
        'sm:border-e-0 sm:border-y sm:border-s sm:rounded-s-lg sm:rounded-e-none sm:-me-px': vertical,
      }"
      class="z-10 -mb-px flex items-center gap-2 rounded-t-lg border-x border-t px-5 py-3 font-medium"
    >
      Settings
    </button>
  </div>
  <!-- END Nav Tabs -->

  <!-- Tab Content -->
  <div
    class="rounded-b-lg rounded-tr-lg border border-zinc-200/75 bg-white p-5 dark:border-zinc-700/75 dark:bg-zinc-900 rtl:rounded-tl-lg rtl:rounded-tr-none"
  >
    <!-- Home Tab -->
    <div
      x-show="active === 'home'"
      id="home-tab-pane"
      tab="tabpanel"
      aria-labelledby="home-tab"
      tabindex="0"
    >
      <h4 class="mb-2 text-lg font-bold">Welcome to your dashboard</h4>
      <p class="text-sm leading-relaxed text-zinc-700 dark:text-zinc-400">
        The Home tab serves as the primary landing page, providing an overview
        and quick access to the most essential features and information. It
        typically includes a welcome message, a summary of recent activity, and
        shortcuts to frequently used functions. Designed for convenience, the
        Home tab ensures users can easily find and navigate to all pages.
      </p>
    </div>
    <!-- END Home Tab -->

    <!-- Profile Tab -->
    <div
      x-cloak
      x-show="active === 'profile'"
      id="profile-tab-pane"
      tab="tabpanel"
      aria-labelledby="profile-tab"
      tabindex="0"
    >
      <h4 class="mb-2 text-lg font-bold">Manage your account</h4>
      <p class="text-sm leading-relaxed text-zinc-700 dark:text-zinc-400">
        The Profile tab allows users to view and manage their personal
        information and account settings. Here, users can update their contact
        details, change their password, and upload a profile picture. This tab
        ensures that users have complete control over their personal data and
        can customize their experience according to their preferences.
      </p>
    </div>
    <!-- END Profile Tab -->

    <!-- Settings Tab -->
    <div
      x-cloak
      x-show="active === 'settings'"
      id="settings-tab-pane"
      tab="tabpanel"
      aria-labelledby="settings-tab"
      tabindex="0"
    >
      <h4 class="mb-2 text-lg font-bold">Manage your application</h4>
      <p class="text-sm leading-relaxed text-zinc-700 dark:text-zinc-400">
        The Settings tab provides access to the application's configuration
        options, enabling users to customize their experience. It includes
        various controls and preferences such as notification settings, privacy
        options, and application themes. This tab empowers users to tailor the
        application to their specific needs and enhance their overall user
        experience.
      </p>
    </div>
    <!-- END Settings Tab -->
  </div>
  <!-- END Tab Content -->
</div>
<!-- END Tabs: Vertical -->