JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://getbootstrap.com/dist/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://getbootstrap.com/dist/css/bootstrap.min.css">
<!-- Nav tabs - First level -->
<ul class="nav nav-tabs" role="tablist">
  <li class="active"><a href="#home" role="tab" data-toggle="tab">Home</a></li>
  <li><a href="#profile" role="tab" data-toggle="tab">Profile</a></li>
</ul>

<!-- Tab panes - First level -->
<div class="tab-content">
  <div class="tab-pane active" id="home">
  	
    <p>Home content.</p>
  
  	<!-- Nav tabs - Second level -->
    <ul class="nav nav-tabs" role="tablist">
      <li class="active"><a href="#home2" role="tab" data-toggle="tab">Home 2</a></li>
      <li><a href="#profile2" role="tab" data-toggle="tab">Profile 2</a></li>
    </ul>

    <!-- Tab panes - Second level -->
    <div class="tab-content">
      <div class="tab-pane active" id="home2">
      
      <p>Home 2 content.</p>
      
      
      <!-- Nav tabs - Third level -->
    <ul class="nav nav-tabs" role="tablist">
      <li class="active"><a href="#home3-1" role="tab" data-toggle="tab">Home 3-1</a></li>
      <li><a href="#profile3-1" role="tab" data-toggle="tab">Profile 3-1</a></li> 
    </ul>

    <!-- Tab panes - Third level -->
    <div class="tab-content">
      <div class="tab-pane active" id="home3-1"><p>Home 3-1 content.</p></div>
      <div class="tab-pane" id="profile3-1"><p>Profile 3-1 content.</p></div>
    </div> 
      
      
      </div>
      <div class="tab-pane" id="profile2">
      <p>Profile 2 content.</p>
      
      
      <!-- Nav tabs - Third level -->
    <ul class="nav nav-tabs" role="tablist">
      <li class="active"><a href="#home3-2" role="tab" data-toggle="tab">Home 3-2</a></li>
      <li><a href="#profile3-2" role="tab" data-toggle="tab">Profile 3-2</a></li> 
    </ul>

    <!-- Tab panes - Third level -->
    <div class="tab-content">
      <div...

JavaScript

// Tab based on anchor
	$(document).ready(function() {
	 /* Automagically jump on good tab based on anchor; for page reloads or links */
	 if(location.hash) {
	   $('a[href=' + location.hash + ']').tab('show');
	 }
	
	 /* Update hash based on tab, basically restores browser default behavior to
	    fix bootstrap tabs */
	 $(document.body).on("click", "a[data-toggle]", function(event) {
	   location.hash = this.getAttribute("href");
	 });
	});
	
	/* on history back activate the tab of the location hash
	  if exists or the default tab if no hash exists */
	$(window).on('popstate', function() {
	 var anchor = location.hash || $("a[data-toggle=tab]").first().attr("href");
	 $('a[href=' + anchor + ']').tab('show');
	});