Components

Tabs

Tabs should be used to alternate among related views within the same context.

Underline Tabs

HTML & AlpineJS

 <nav x-data="{tabs:['one','two'],activeTab:'one'}" class="flex mb-2 
            w-full h-12 overflow-x-auto border-b border-gray-200">
      <template x-for="tab in tabs">
        <span class="border-transparent mr-2 text-gray-500 
        hover:text-gray-700 hover:border-gray-300 whitespace-nowrap 
        pt-4 pb-1 px-1 border-b-2 font-medium text-sm"
          :class="activeTab === tab && 'border-indigo-500 text-indigo-600'"
           @click="activeTab = tab">
          <span class="font-bold uppercase" x-text="tab"></span>
        </span>
      </template>
  </nav>
  

Button Tabs

HTML & AlpineJS

  <nav x-data="{tabs:['one','two'],activeTab:'one'}" 
        class="px-2 py-2 h-12 flex w-full">
      <div class="relative bg-gray-100 dark:bg-slate-600 px-1.5 py-1.5 
         flex w-full self-center rounded-lg">
        <template x-for="tab in tabs" :key="tab">
          <button  @click="activeTab = tab" type="button"
            class="py-0.5 w-1/2 text-sm font-medium relative 
            whitespace-nowrap focus:outline-none focus:z-10 
            sm:px-4 sm:w-auto rounded-lg transition-all duration-300 
            ease-in-out"
            :class="activeTab === tab ? 'bg-white shadow text-gray-600' : 'ml-0.5 border border-transparent text-gray-700'">
            <span x-text="tab"></span>
          </button>
        </template>
      </div>
    </nav>