JSFiddle - React, Tailwind, and code Playground
HTML
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.no-icons.min.css">
<ul class="nav nav-tabs">
<li role="presentation" class="active">
<a data-toggle="tab" href="#menu1">Future Tweets
<span class="badge alert-success"><span class="glyphicon glyphicon-ok"/> ready</span></a>
<span class="glyphicon glyphicon-ok pull-rigth"></span>
</li>
<li role="presentation">
<a data-toggle="tab" href="#menu2">Past Tweets
<span class="badge alert-danger"><span class="glyphicon glyphicon-warning-sign"></span> not
ready</span></a>
<span class="glyphicon glyphicon-warning-sign">
</li>
<li role="presentation">
<a data-toggle="tab" href="#menu3">User Timelines
<span class="badge alert-info"><span class="glyphicon glyphicon-play"></span> running</span></a>
<span class="glyphicon glyphicon-play"></span>
</li>
<li role="presentation">
<a data-toggle="tab" href="#menu4">Tweets by ID
<span class="badge alert-success"><span class="glyphicon glyphicon-ok"></span> ready</span></a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div id="menu1" class="tab-pane fade in active">
<h3>Future Tweets</h3>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div id="menu2" class="tab-pane fade">
<h3>Past Tweets</h3>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
</div>
<div id="menu3" class="tab-pane fade">
<h3>User Timelines</h3>
<p>Eaque ipsa quae...