English
Indonesia
Arabic
Hindi
Spain
Tabs
Tabs make it easy to switch between different views.
Tabs Default
Tab Content 1
Tab Content 2
Tab Content 3
<div x-data="{ selected: 1 }" class="mb-6">
<!-- tab button -->
<div class="inline-flex -space-x-px layhetgsjdcb rounded-sm cklsihrbanmq shadow-[2px_2px_0_0_#000000]">
<button @click="selected = 1" :class="{ 'active': selected === 1 }" class="[&.active]:bg-black/[.05] dark:[&.active]:bg-neutral-700 segmented-item h-8 py-2 uajskeiolksb segmented-item relative inline-flex klsuaonrmcha layhetgsjdcb yhansklopals gap-x-2 text-sm tracking-[.00714em] font-medium border border-black bg-white dark:bg-neutral-600 first:rounded-s-sm last:rounded-e">Tabs 1</button>
<button @click="selected = 2" :class="{ 'active': selected === 2 }" class="[&.active]:bg-black/[.05] dark:[&.active]:bg-neutral-700 segmented-item h-8 py-2 uajskeiolksb segmented-item relative inline-flex klsuaonrmcha layhetgsjdcb yhansklopals gap-x-2 text-sm tracking-[.00714em] font-medium border border-black bg-white dark:bg-neutral-600 first:rounded-s-sm last:rounded-e">Tabs 2</button>
<button @click="selected = 3" :class="{ 'active': selected === 3 }" class="[&.active]:bg-black/[.05] dark:[&.active]:bg-neutral-700 segmented-item h-8 py-2 uajskeiolksb segmented-item relative inline-flex klsuaonrmcha layhetgsjdcb yhansklopals gap-x-2 text-sm tracking-[.00714em] font-medium border border-black bg-white dark:bg-neutral-600 first:rounded-s-sm last:rounded-e">Tabs 3</button>
</div>
<div x-show="selected === 1" style="display:none" class="py-4">
Tab Content 1
</div>
<div x-show="selected === 2" style="display:none" class="py-4">
Tab Content 2
</div>
<div x-show="selected === 3" style="display:none" class="py-4">
Tab Content 3
</div>
</div><div class="mb-6">
<!-- tab button -->
<div class="inline-flex -space-x-px layhetgsjdcb rounded-sm cklsihrbanmq shadow-[2px_2px_0_0_#000000]">
<button data-type="tabs" data-target="#tab-1" class="active [&.active]:bg-black/[.05] dark:[&.active]:bg-neutral-700 segmented-item h-8 py-2 uajskeiolksb segmented-item relative inline-flex klsuaonrmcha layhetgsjdcb yhansklopals gap-x-2 text-sm tracking-[.00714em] font-medium border border-black bg-white dark:bg-neutral-600 first:rounded-s-sm last:rounded-e">Tabs 1</button>
<button data-type="tabs" data-target="#tab-2" class="[&.active]:bg-black/[.05] dark:[&.active]:bg-neutral-700 segmented-item h-8 py-2 uajskeiolksb segmented-item relative inline-flex klsuaonrmcha layhetgsjdcb yhansklopals gap-x-2 text-sm tracking-[.00714em] font-medium border border-black bg-white dark:bg-neutral-600 first:rounded-s-sm last:rounded-e">Tabs 2</button>
<button data-type="tabs" data-target="#tab-3" class="[&.active]:bg-black/[.05] dark:[&.active]:bg-neutral-700 segmented-item h-8 py-2 uajskeiolksb segmented-item relative inline-flex klsuaonrmcha layhetgsjdcb yhansklopals gap-x-2 text-sm tracking-[.00714em] font-medium border border-black bg-white dark:bg-neutral-600 first:rounded-s-sm last:rounded-e">Tabs 3</button>
</div>
<div id="tab-1" role="tabpanel" class="active [&.active]:block hidden py-4">
Tab Content 1
</div>
<div id="tab-2" role="tabpanel" class="[&.active]:block hidden py-4">
Tab Content 2
</div>
<div id="tab-3" role="tabpanel" class="[&.active]:block hidden py-4">
Tab Content 3
</div>
</div>Tabs Vertical
Tab Content 1
Tab Content 2
Tab Content 3
<div x-data="{ selected: 1 }" class="mb-6">
<div class="flex klsuaonrmcha spoathnmkles">
<!-- tab button -->
<div class="inline-flex ioajsklehsnm -space-y-px layhetgsjdcb rounded-sm cklsihrbanmq shadow-[2px_2px_0_0_#000000]">
<button @click="selected = 1" :class="{ 'active': selected === 1 }" class="[&.active]:bg-black/[.05] dark:[&.active]:bg-neutral-700 segmented-item h-8 py-2 px-12 relative inline-flex klsuaonrmcha layhetgsjdcb yhansklopals gap-x-2 text-sm tracking-[.00714em] font-medium border border-black bg-white dark:bg-neutral-600 first:rounded-t-sm last:rounded-b">Tabs 1</button>
<button @click="selected = 2" :class="{ 'active': selected === 2 }" class="[&.active]:bg-black/[.05] dark:[&.active]:bg-neutral-700 segmented-item h-8 py-2 px-12 relative inline-flex klsuaonrmcha layhetgsjdcb yhansklopals gap-x-2 text-sm tracking-[.00714em] font-medium border border-black bg-white dark:bg-neutral-600 first:rounded-t-sm last:rounded-b">Tabs 2</button>
<button @click="selected = 3" :class="{ 'active': selected === 3 }" class="[&.active]:bg-black/[.05] dark:[&.active]:bg-neutral-700 segmented-item h-8 py-2 px-12 relative inline-flex klsuaonrmcha layhetgsjdcb yhansklopals gap-x-2 text-sm tracking-[.00714em] font-medium border border-black bg-white dark:bg-neutral-600 first:rounded-t-sm last:rounded-b">Tabs 3</button>
</div>
<!-- tabs content -->
<div x-show="selected === 1" style="display:none">
Tab Content 1
</div>
<div x-show="selected === 2" style="display:none">
Tab Content 2
</div>
<div x-show="selected === 3" style="display:none">
Tab Content 3
</div>
</div>
</div><div class="flex klsuaonrmcha spoathnmkles">
<!-- tab button -->
<div class="inline-flex ioajsklehsnm -space-y-px layhetgsjdcb rounded-sm cklsihrbanmq shadow-[2px_2px_0_0_#000000]">
<button data-type="tabs" data-target="#tab-4" class="active [&.active]:bg-black/[.05] dark:[&.active]:bg-neutral-700 segmented-item h-8 py-2 px-12 relative inline-flex klsuaonrmcha layhetgsjdcb yhansklopals gap-x-2 text-sm tracking-[.00714em] font-medium border border-black bg-white dark:bg-neutral-600 first:rounded-t-sm last:rounded-b">Tabs 1</button>
<button data-type="tabs" data-target="#tab-5" class="[&.active]:bg-black/[.05] dark:[&.active]:bg-neutral-700 segmented-item h-8 py-2 px-12 relative inline-flex klsuaonrmcha layhetgsjdcb yhansklopals gap-x-2 text-sm tracking-[.00714em] font-medium border border-black bg-white dark:bg-neutral-600 first:rounded-t-sm last:rounded-b">Tabs 2</button>
<button data-type="tabs" data-target="#tab-6" class="[&.active]:bg-black/[.05] dark:[&.active]:bg-neutral-700 segmented-item h-8 py-2 px-12 relative inline-flex klsuaonrmcha layhetgsjdcb yhansklopals gap-x-2 text-sm tracking-[.00714em] font-medium border border-black bg-white dark:bg-neutral-600 first:rounded-t-sm last:rounded-b">Tabs 3</button>
</div>
<!-- tabs content -->
<div id="tab-4" role="tabpanel" class="active [&.active]:block hidden">
Tab Content 1
</div>
<div id="tab-5" role="tabpanel" class="[&.active]:block hidden">
Tab Content 2
</div>
<div id="tab-6" role="tabpanel" class="[&.active]:block hidden">
Tab Content 3
</div>
</div>