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>