Tab Component
The Tab component is a user interface element that allows users to switch between different views or sections of content within the same space.
Tabs Plain
<div class="tabs" role="tablist">
<button class="tab" aria-controls="panel-1" id="tab-1" tabindex="0">
First Tab
</button>
<button class="tab active" aria-controls="panel-2" id="tab-2" tabindex="-1">
Second Tab
</button>
<button class="tab" aria-controls="panel-3" id="tab-3" tabindex="-1">
Third Tab
</button>
</div>
<div className="tabs" role="tablist">
<button className="tab" aria-controls="panel-1" id="tab-1" tabindex="0">
First Tab
</button>
<button className="tab active" aria-controls="panel-2" id="tab-2" tabindex="-1">
Second Tab
</button>
<button className="tab" aria-controls="panel-3" id="tab-3" tabindex="-1">
Third Tab
</button>
</div>
Tabs bordered
<div class="tabs tabs-border" role="tablist">
<button class="tab" aria-controls="panel-1" id="tab-1" tabindex="0">
First Tab
</button>
<button class="tab active" aria-controls="panel-2" id="tab-2" tabindex="-1">
Second Tab
</button>
<button class="tab" aria-controls="panel-3" id="tab-3" tabindex="-1">
Third Tab
</button>
</div>
<div className="tabs tabs-border" role="tablist">
<button className="tab" aria-controls="panel-1" id="tab-1" tabindex="0">
First Tab
</button>
<button className="tab active" aria-controls="panel-2" id="tab-2" tabindex="-1">
Second Tab
</button>
<button className="tab" aria-controls="panel-3" id="tab-3" tabindex="-1">
Third Tab
</button>
</div>
Tabs buttoned
<div class="tabs tabs-button" role="tablist">
<button class="tab" aria-controls="panel-1" id="tab-1" tabindex="0">
First Tab
</button>
<button class="tab active" aria-controls="panel-2" id="tab-2" tabindex="-1">
Second Tab
</button>
<button class="tab" aria-controls="panel-3" id="tab-3" tabindex="-1">
Third Tab
</button>
</div>
<div className="tabs tabs-button" role="tablist">
<button className="tab" aria-controls="panel-1" id="tab-1" tabindex="0">
First Tab
</button>
<button className="tab active" aria-controls="panel-2" id="tab-2" tabindex="-1">
Second Tab
</button>
<button className="tab" aria-controls="panel-3" id="tab-3" tabindex="-1">
Third Tab
</button>
</div>
Tabs Uplift
<div class="tabs tabs-uplift" role="tablist">
<button class="tab" aria-controls="panel-1" id="tab-1" tabindex="0">
First Tab
</button>
<button class="tab active" aria-controls="panel-2" id="tab-2" tabindex="-1">
Second Tab
</button>
<button class="tab" aria-controls="panel-3" id="tab-3" tabindex="-1">
Third Tab
</button>
</div>
<div className="tabs tabs-uplift" role="tablist">
<button className="tab" aria-controls="panel-1" id="tab-1" tabindex="0">
First Tab
</button>
<button className="tab active" aria-controls="panel-2" id="tab-2" tabindex="-1">
Second Tab
</button>
<button className="tab" aria-controls="panel-3" id="tab-3" tabindex="-1">
Third Tab
</button>
</div>
Tabs Box
<div class="tabs tabs-box" role="tablist">
<button class="tab" aria-controls="panel-1" id="tab-1" tabindex="0">
First Tab
</button>
<button class="tab active" aria-controls="panel-2" id="tab-2" tabindex="-1">
Second Tab
</button>
<button class="tab" aria-controls="panel-3" id="tab-3" tabindex="-1">
Third Tab
</button>
</div>
<div className="tabs tabs-box" role="tablist">
<button className="tab" aria-controls="panel-1" id="tab-1" tabindex="0">
First Tab
</button>
<button className="tab active" aria-controls="panel-2" id="tab-2" tabindex="-1">
Second Tab
</button>
<button className="tab" aria-controls="panel-3" id="tab-3" tabindex="-1">
Third Tab
</button>
</div>