JSFiddle - React, Tailwind, and code Playground

by GMK Hussain

HTML

<h2>Multiple bootstrap tabs</h2>
<h3>tabs into tab</h3>

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
    

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
    
    
    <div class="container-fluid">
  <div class="row">
    <!-- Nav left -->
    <ul class="nav col-md-2" id="leftTabs">
      <li class="active">
        <a href="#a_tab" data-toggle="tab">
          <span></span>ItemA
        </a>
      </li>
      <li>
        <a href="#b_tab" data-toggle="tab">
          <span></span>ItemB
        </a>
      </li>
      <li>
        <a href="#c_tab" data-toggle="tab">
          <span></span>ItemC - TABS!
        </a>
      </li>
    </ul>
    <!-- Nav content -->
    <div class="tab-content col-md-10">
      <div class="tab-pane active" id="a_tab">
        <h1>Content of A</h1>
      </div>
      <div class="tab-pane" id="b_tab">
        <h1>Content of B</h1>
      </div>
      <div class="tab-pane" id="c_tab">
        <!-- Nav tabs -->
        <ul class="nav nav-tabs">
          <li class="active"><a href="#first" data-toggle="tab">First</a></li>
          <li><a href="#second" data-toggle="tab">Second</a></li>
          <li><a href="#third" data-toggle="tab">Third</a></li>
        </ul>
        <!-- Nav tabs content -->
        <div class="tab-content">
          <div id="first" class="tab-pane active">Content of first</div>
          <div id="second" class="tab-pane">Content of second</div>
          <div id="third" class="tab-pane">Content of third</div>
        </div>
      </div>
    </div>
  </div>
</div>

CSS

.nav li {
    border: 2px solid #eee;
    border-radius: 5px;
    float: left;
    margin: 1%;
    text-align: center;
    width: 30%;
}