JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
<div class="container">
    <div class="row">
        <div class="col-md-12 center">
            <ul class="nav nav-tabs" role="tablist" id="myTab">
                <li role="presentation" class="active"><a href="#first" role="tab" data-toggle="tab">First</a>

                </li>
                <li role="presentation"><a href="#last" role="tab" data-toggle="tab">Last</a>

                </li>
            </ul>
        </div>
    </div>
</div>

CSS

body {
    padding:50px 0;
    background-color: #a8a68c;
}
.container {
    background-color: rgba(0, 0, 0, 0.2);
    padding: 50px;
}
.nav-tabs {
    border: none;
}
.nav-tabs:before {
    content:"";
    height: 2px;
    background-color: rgba(255, 255, 255, 0.1);
    display: block;
    margin: 10px 0;
    box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.2);
}
.nav-tabs:after {
    content:"";
    height: 2px;
    background: linear-gradient(to right, rgba(255, 255, 255, 0.0) 0, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.0) 100%);
    display: block;
    margin: 10px 0;
    box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.0);
}