JSFiddle - React, Tailwind, and code Playground

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">
	<ul class="nav nav-tabs">
  		<li role="presentation" class="active"><a data-toggle="tab"  href="#tabFamily">Family</a></li>
  		<li role="presentation"><a data-toggle="tab" href="#tabFriends">Friends</a></li>
 		<li role="presentation"><a data-toggle="tab" href="#tabStrangers">Strangers</a></li>
	</ul>

	<div class="tab-content">
		<div id="tabFamily" class="tab-pane fade active">
			<h3>¡This is my family!</h3>
			<p>They are great.</p>
		</div>
		<div id="tabFriends" class="tab-pane fade">
			<h3>Where are your friends?</h3>
			<p>These are mine!</p>
		</div>
		<div id="tabStrangers" class="tab-pane fade">
			<h3>I don't know the strangers.</h3>
		</div>		
	</div>
</div>

CSS

@import url("https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css");

JavaScript

$(".nav-tabs").on("click", "a", function(e){
      e.preventDefault();
      $(this).tab('show');
    })