JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/css/bootstrap.min.css">
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
    <li class="active"><a href="#home" role="tab" data-toggle="tab">Home</a>

    </li>
    <li><a href="#profile" role="tab" data-toggle="tab">Profile</a>

    </li>
    <li><a href="#messages" role="tab" data-toggle="tab">Messages</a>

    </li>
    <li><a href="#settings" role="tab" data-toggle="tab">Settings</a>

    </li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
    <div class="tab-pane fade in active" id="home">A</div>
    <div class="tab-pane fade" id="profile">B</div>
    <div class="tab-pane fade" id="messages">C</div>
    <div class="tab-pane fade" id="settings">D</div>
</div>

CSS

@media screen and (max-width: 480px) {
    .nav {
        padding-left:2px;
        padding-right:2px;
    }
    .nav li {
        display:block !important;
        width:100%;
        margin:0px;
    }
    .nav li.active {
        border-bottom:1px solid #ddd!important;
        margin: 0px;
    }
}