JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<div class="tabs sidebar-item">
    <ul class="nav nav-tabs" role="tablist">
        <li class="active"><a href="#popular" role="tab" data-toggle="tab">Popular</a></li>
        <li><a href="#recent" role="tab" data-toggle="tab">Recent</a></li>
        <li><a href="#comments" role="tab" data-toggle="tab">Comments</a></li>
    </ul><!-- /.nav-tabs -->
    <!-- Tab panes -->
    <div class="tab-content">
        <div class="tab-pane fade in active" id="popular">
            popular - some content will go in here
        </div><!-- /.tab-pane -->
        <div class="tab-pane fade" id="recent">
            Some Content Will obviously come here
        </div><!-- /.tab-pane -->
        <div class="tab-pane fade" id="comments">
            Some Content Will obviously come here
        </div><!-- /.tab-pane -->
    </div><!-- /.tab-content -->
</div><!-- /.tabs -->

CSS

ul.nav-tabs li.active a{
    border-top: 3px solid #49c8ff;
    border-radius: 2px;
}
ul.nav-tabs li.active:hover a{
    border-top: 3px solid #49c8ff;
}
ul.nav-tabs li a{
    background-color: #eee;
    margin-right: 3;
}