JSFiddle - React, Tailwind, and code Playground
by James
HTML
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div class="container">
<div class="masthead">
<div class="container">
<ul class="nav nav-pills nav-justified">
<li class="active"><a href="#Canon0" data-toggle="pill">Canon 0</a></li>
<li class=""><a href="#Canon1" data-toggle="pill">Canon 1</a></li>
<li class=""><a href="#Canon2" data-toggle="pill">Canon 2</a></li>
<li class=""><a href="#Canon3" data-toggle="pill">Canon 3</a></li>
<li class=""><a href="#Canon4" data-toggle="pill">Canon 4</a></li>
<li class=""><a href="#Canon5" data-toggle="pill">New Canon</a></li>
</ul>
<div class="tab-content">
<div id="Canon0" class="tab-pane active">
<h3>Section A</h3>
<ul class="nav nav-pills nav-justified">
<li class="active"><a href="#Canon0Age0" data-toggle="pill">Age 0</a></li>
<li class=""><a href="#Canon0Age1" data-toggle="pill">Age 1</a></li>
<li class=""><a href="#Canon0Age2" data-toggle="pill">Age 2</a></li>
<li class=""><a href="#Canon0Age3" data-toggle="pill">Age 3</a></li>
<li class=""><a href="#Canon0Age4" data-toggle="pill">Age 4</a></li>
<li class=""><a href="#Canon0Age5" data-toggle="pill">Age 5</a></li>
</ul>
</div>
<div id="Canon1" class="tab-pane">
<h3>Section B</h3>
<ul class="nav nav-pills nav-justified">
<li class="active"><a href="#Canon1Age0" data-toggle="pill">Age 0</a></li>
<li class=""><a href="#Canon1Age1" data-toggle="pill">Age 1</a></li>
<li class=""><a href="#Canon1Age2"...