Tabs
Classes Information
| ClassName | Description |
|---|---|
| tabs | Wrapper for tabs |
| tab | Tab base style |
| tab-bordered | All tabs will have a border by default |
| tab-underline | Will apply border bottom to a element |
| tab-pill | Will have a hover and active effect |
| tab-active | Will mark a tab as active |
| tab-disabled | Will disable the tab |
Basic Usage
Tab 1
Tab 2
Tab 3
Example Code
html
<div class="tabs">
<div class="tab p-4">Tab 1</div>
<div class="tab p-4">Tab 2</div>
<div class="tab tab-active p-4">Tab 3</div>
</div>Bordered
Tab 1
Tab 3
Tab 3
Example Code
html
<div class="tabs">
<div class="tab tab-bordered px-6">Tab 1</div>
<div class="tab tab-bordered px-6 tab-active">Tab 3</div>
<div class="tab tab-bordered px-6">Tab 3</div>
</div>Underline
Tab 1
Tab 2
Tab 3
Example Code
html
<div class="tabs">
<div class="tab px-6">Tab 1</div>
<div class="tab tab-underline tab-active px-6">Tab 2</div>
<div class="tab px-6">Tab 3</div>
</div>Pill
Tab 1
Tab 2
Tab 3
Example Code
html
<div class="tabs gap-1">
<div class="tab tab-pill">Tab 1</div>
<div class="tab tab-pill tab-active">Tab 2</div>
<div class="tab tab-pill tab-disabled">Tab 3</div>
</div>Responsive
Tab 1
Tab 3
Tab 3
Tab 4
Tab 5
Tab 6
Example Code
html
<div class="w-full max-w-xs overflow-auto">
<div class="tabs w-full flex-nowrap">
<div class="tab">Tab 1</div>
<div class="tab tab-underline tab-active">Tab 3</div>
<div class="tab">Tab 3</div>
<div class="tab">Tab 4</div>
<div class="tab">Tab 5</div>
<div class="tab">Tab 6</div>
</div>
</div>Basic Usage With Radio
Example Code
html
<div class="tabs">
<input type="radio" id="tab-1" name="tab-1" class="tab-toggle tab" checked />
<label for="tab-1" class="tab">Tab 1</label>
<input type="radio" id="tab-2" name="tab-1" class="tab-toggle" />
<label for="tab-2" class="tab">Tab 2</label>
<input type="radio" id="tab-3" name="tab-1" class="tab-toggle" />
<label for="tab-3" class="tab">Tab 3</label>
</div>Bordered With Radio
Example Code
html
<div class="tabs">
<input type="radio" id="tab-4" name="tab-2" class="tab-toggle" checked />
<label for="tab-4" class="tab tab-bordered px-6">Tab 1</label>
<input type="radio" id="tab-5" name="tab-2" class="tab-toggle" />
<label for="tab-5" class="tab tab-bordered px-6">Tab 2</label>
<input type="radio" id="tab-6" name="tab-2" class="tab-toggle" />
<label for="tab-6" class="tab tab-bordered px-6">Tab 3</label>
</div>Basic Usage
Tab 1
Tab 2
Tab 3
Example Code
html
Underline With Radio
Example Code
html
<div class="tabs tabs-underline">
<input type="radio" id="tab-7" name="tab-3" class="tab-toggle" checked />
<label for="tab-7" class="tab px-6">Tab 1</label>
<input type="radio" id="tab-8" name="tab-3" class="tab-toggle" />
<label for="tab-8" class="tab px-6">Tab 2</label>
<input type="radio" id="tab-9" name="tab-3" class="tab-toggle" />
<label for="tab-9" class="tab px-6">Tab 3</label>
</div>Pill With Radio
Example Code
html
<div class="tabs gap-1">
<input type="radio" id="tab-10" name="tab-4" class="tab-toggle" checked />
<label for="tab-10" class="tab tab-pill">Tab 1</label>
<input type="radio" id="tab-11" name="tab-4" class="tab-toggle" />
<label for="tab-11" class="tab tab-pill">Tab 2</label>
<input type="radio" id="tab-12" name="tab-4" class="tab-toggle" />
<label for="tab-12" class="tab tab-pill">Tab 3</label>
</div>