JSFiddle - React, Tailwind, and code Playground

HTML

<button type="submit" class="btn">Add Tab</button>


<ul class="nav nav-tabs" id="myTab">
  <li class="active"><a href="#home">Home</a></li>
  <li><a href="#profile">Profile</a></li>
  <li><a href="#messages">Messages</a></li>
  <li><a href="#settings">Settings</a></li>
</ul>
 
<div class="tab-content">
  <div class="tab-pane active" id="home">Home...</div>
  <div class="tab-pane" id="profile">profile...</div>
  <div class="tab-pane" id="messages">messages...</div>
  <div class="tab-pane" id="settings">settings...</div>
</div>

CSS

@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');

.nav{ 
    margin-top:30px;
}
button{ 
    margin:10px;
}

JavaScript

$("#myTab").on("click", "a", function(e){
  e.preventDefault();
  $(this).tab('show');
});


/* just for this demo */
var i = 0;
$('button').click(function (e) {
  i++;
  e.preventDefault();
  $('.nav-tabs').append('<li><a href="#new_tab_' + i + '">New Tab</a></li>');
  $('.tab-content').append('<div class="tab-pane" id="new_tab_' + i + '">new' + i + '</div>');
})