Tabs

Default

Preview

Code

HTML

Code

JSX/TSX

Tab 1

Tab 2

Tab 3

<div class="tabs bw">
	<div class="tab p-4">Tab 1</div>
	<div class="tab p-4">Tab 2</div>
	<div class="tab active p-4">Tab 3</div>
</div>

<div className='tabs bw'>
  <div className='tab p-4'>
    Tab 1
  </div>
  <div className='tab p-4'>
    Tab 2
  </div>
  <div className='tab active p-4'>
    Tab 3
  </div>
</div>

Bordered

Preview

Code

HTML

Code

JSX/TSX

Tab 1

Tab 2

Tab 3

<div class="tabs danger bordered">
	<div class="tab p-4">Tab 1</div>
	<div class="tab p-4">Tab 2</div>
	<div class="tab active p-4">Tab 3</div>
</div>

<div className='tabs danger bordered'>
  <div className='tab p-4'>
    Tab 1
  </div>
  <div className='tab p-4'>
    Tab 2
  </div>
  <div className='tab active p-4'>
    Tab 3
  </div>
</div>

Pill

Preview

Code

HTML

Code

JSX/TSX

Tab 1

Tab 2

Tab 3

<div class="tabs success pill">
	<div class="tab p-4">Tab 1</div>
	<div class="tab p-4">Tab 2</div>
	<div class="tab active p-4">Tab 3</div>
</div>

<div className='tabs success pill'>
  <div className='tab p-4'>
    Tab 1
  </div>
  <div className='tab p-4'>
    Tab 2
  </div>
  <div className='tab active p-4'>
    Tab 3
  </div>
</div>

Boxed

Preview

Code

HTML

Code

JSX/TSX

Tab 1

Tab 2

Tab 3

<div class="tabs boxed warn">
	<div class="tab p-4">Tab 1</div>
	<div class="tab p-4">Tab 2</div>
	<div class="tab active p-4">Tab 3</div>
</div>

<div className='tabs boxed warn'>
  <div className='tab p-4'>
    Tab 1
  </div>
  <div className='tab p-4'>
    Tab 2
  </div>
  <div className='tab active p-4'>
    Tab 3
  </div>
</div>

Boxed with pill

Preview

Code

HTML

Code

JSX/TSX

Tab 1

Tab 2

Tab 3

<div class="tabs boxed success pill">
	<div class="tab p-4">Tab 1</div>
	<div class="tab p-4">Tab 2</div>
	<div class="tab active p-4">Tab 3</div>
</div>

<div className='tabs boxed success pill'>
  <div className='tab p-4'>
    Tab 1
  </div>
  <div className='tab p-4'>
    Tab 2
  </div>
  <div className='tab active p-4'>
    Tab 3
  </div>
</div>

Directions

Default (Top)

Preview

Code

HTML

Code

JSX/TSX

Tab 1

Tab 2

Tab 3

<div class="tabs bordered success">
	<div class="tab p-4">Tab 1</div>
	<div class="tab p-4">Tab 2</div>
	<div class="tab active p-4">Tab 3</div>
</div>

<div className='tabs bordered success'>
  <div className='tab p-4'>
    Tab 1
  </div>
  <div className='tab p-4'>
    Tab 2
  </div>
  <div className='tab active p-4'>
    Tab 3
  </div>
</div>

Bottom

Preview

Code

HTML

Code

JSX/TSX

Tab 1

Tab 2

Tab 3

<div class="tabs bordered success bottom">
	<div class="tab p-4">Tab 1</div>
	<div class="tab p-4">Tab 2</div>
	<div class="tab active p-4">Tab 3</div>
</div>

<div className='tabs bordered success bottom'>
  <div className='tab p-4'>
    Tab 1
  </div>
  <div className='tab p-4'>
    Tab 2
  </div>
  <div className='tab active p-4'>
    Tab 3
  </div>
</div>

Left

Preview

Code

HTML

Code

JSX/TSX

Tab 1

Tab 2

Tab 3

<div class="tabs bordered success left">
	<div class="tab p-4">Tab 1</div>
	<div class="tab p-4">Tab 2</div>
	<div class="tab active p-4">Tab 3</div>
</div>

<div className='tabs bordered success left'>
  <div className='tab p-4'>
    Tab 1
  </div>
  <div className='tab p-4'>
    Tab 2
  </div>
  <div className='tab active p-4'>
    Tab 3
  </div>
</div>

Right

Preview

Code

HTML

Code

JSX/TSX

Tab 1

Tab 2

Tab 3

<div class="tabs bordered success right">
	<div class="tab p-4">Tab 1</div>
	<div class="tab p-4">Tab 2</div>
	<div class="tab active p-4">Tab 3</div>
</div>

<div className='tabs bordered success right'>
  <div className='tab p-4'>
    Tab 1
  </div>
  <div className='tab p-4'>
    Tab 2
  </div>
  <div className='tab active p-4'>
    Tab 3
  </div>
</div>

Table Tooltip