JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div class="panel panel-default tab-panel">
    <div class="panel-heading panel-nav">
        <ul class="nav nav-tabs">
            <li role="presentation" class="active"> <a href="#tab-1" data-target="#tab-1" data-toggle="tab" prevent-default>
                        Tab 1
                    </a>

            </li>
            <li role="presentation"> <a href="#tab-2" data-target="#tab-2" data-toggle="tab" prevent-default>
                        Tab 2
                    </a>

            </li>
        </ul>
    </div>
    <div class="panel-body tab-content">
        <div class="tab-pane active" role="tabpanel" id="tab-1">This is some content - tab-1</div>
        <div class="tab-pane" role="tabpanel" id="tab-2">This is some content - tab-2</div>
    </div>
    <div class="panel-footer tab-content">This is a common footer</div>
</div>

CSS

.panel-nav {
  padding-bottom: 0;
  position: relative;
}
.panel-nav > .nav-tabs {
  position: relative;
  bottom: -1px; /* Overlap the .panel-nav bottom border */
}
.panel-nav > .nav-tabs > .active > a,
.panel-nav > .nav-tabs > .active > a:hover {
  background-color: #fff;
  border-bottom: }