JSFiddle - React, Tailwind, and code Playground
HTML
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<div class="container">
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12">
<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">
<ul class="popular-list list-normal">
<li>
<div class="text">
<a href="#">Sample Title for a Post </a>
<p class="meta">
</div><!-- /.text -->
<div class="image">
</div><!-- /.image -->
</li>
</ul><!-- /.popular-list -->
</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 -->
...
CSS
.nav-tabs li{
background-color: #eee;
}
.tab-content{
border: 1px solid #ddd;
border-top: none;
padding: 10px;
}