JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://getbootstrap.com/2.3.2/assets/css/bootstrap.css">
<script src="http://getbootstrap.com/2.3.2/assets/js/jquery.js"></script>
<script src="http://getbootstrap.com/2.3.2/assets/js/bootstrap-tab.js"></script>
<div id="content">
    <ul class="nav nav-tabs tabs-advanced">
	    <li class="active"><a href="#1" data-toggle="tab">1</a></li>
        <li class="in-between-filler"></li>
		<li><a href="#2" data-toggle="tab">2</a></li>
        <li class="in-between-filler"></li>
		<li><a href="#3" data-toggle="tab">3</a></li>
        <li class="filler"></li>
    </ul>
    <div class="tab-content">
		<div id="1" class="tab-pane active">
            1
		</div>
        <div id="2" class="tab-pane">
		    2				
		</div>
		<div id="3" class="tab-pane">
            3
		</div>
    </div>
</div>

CSS

html, body {
    background-color: blue;
    color: white;
}

#content {
    margin: 10px;
}

.tabs-advanced > li > a {
    color: white;
    outline: 0;
}


.tabs-advanced > li > a:hover, .tabs-advanced > li > a:focus {
	background-color: transparent;
    border-color: #fff #fff transparent;
	color: white;
}

.tabs-advanced > .active > a, .tabs-advanced > .active > a:hover, .tabs-advanced > .active > a:focus {
	background-color: transparent;
    border-color: #fff #fff transparent;
	color: white;
}

.tabs-advanced {
    display: table;
    border: none;
}

.tabs-advanced > li{
    display: table-cell;
    float: none;
}

.tabs-advanced > li > a{
    margin-right: 0;
    border-bottom-style: none;
}

.tabs-advanced > li:not(.active):not(:hover) {
    border-bottom: 1px solid #ddd;
}

.tabs-advanced > li.filler{
    width: 100%;
    border-bottom: 1px solid #ddd;
}

.tabs-advanced > li.in-between-filler{
    min-width: 2px;
    border-bottom: 1px solid #ddd;
}