JSFiddle - React, Tailwind, and code Playground

by Alaksandar Jesus Gene

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<div class="col-md-3 book-list-cat  nopadding">
    <ul class="nav nav-pills nav-stacked" id="myTabs">
        <li class="active"><a href="#home">information </a>

        </li>
        <li><a href="#profile">Profile</a>

        </li>
        <li><a href="#messages">Messages</a>

        </li>
    </ul>
</div>
<div class="col-md-9 book-details nopadding">
    <div class="tab-content book-details-block">
        <div class="tab-pane active" id="home">information</div>
        <div class="tab-pane" id="profile">Profile</div>
        <div class="tab-pane" id="messages">Messages</div>
    </div>
</div>

CSS

.nav-pills > li >a{
    background:#FFF;
    border-radius:0;
    color: #777;
    border-right:5px solid #DDD;
    border-top:5px solid #ddd;
    border-bottom:5px solid #ddd;
}
.nav-pills > li.active > a, .nav-pills > li.active > a:focus, .nav-pills > li.active > a:hover {
    background:#f7f7f7 !important;
    border-radius:none !important;
    -moz-border-radius:none !important;
    -webkit-border-radius:none !important;
    color: #777;
    border-right:5px solid #005090;
    border-top:5px solid #ddd;
    border-bottom:5px solid #ddd;
}

JavaScript

$('#myTabs a').click(function (e) {
	    e.preventDefault()
	    $(this).tab('show')
	});