JSFiddle - React, Tailwind, and code Playground

by Peter Aad

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<div class="inner">
<div role="tabpanel">

  <ul class="nav nav-tabs nav-justified" role="tablist">
    <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
    <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
  </ul>

  <!-- Tab panes -->
  <div class="tab-content">
      <div role="tabpanel" class="tab-pane fade in active" id="home"><p>In eget libero pulvinar, maximus massa a, molestie sapien. Praesent at dapibus ex. Pellentesque mauris felis, accumsan eu iaculis a, sodales sed arcu. Ut auctor consectetur nisi ac facilisis. Praesent risus metus, gravida vel urna vitae, mattis cursus ligula. Aenean nec ante vitae eros aliquet tristique. Vestibulum finibus fringilla felis, eget dictum elit ultricies vitae. Curabitur id ligula consequat, semper velit non, dapibus metus. Sed a gravida lorem.</p></div>
      <div role="tabpanel" class="tab-pane" id="profile"><p>Nulla aliquet nunc fringilla neque fermentum, et blandit leo malesuada. Nunc sed eleifend lectus. Duis et metus justo. Nunc ut ligula lobortis, viverra ex id, convallis odio. Sed vehicula lacus felis, non aliquet urna hendrerit et. Donec congue pretium neque vitae condimentum. Etiam tempus dictum lectus pulvinar euismod. Etiam lobortis diam eget ligula rhoncus, vel congue nunc suscipit. Ut mattis molestie rhoncus. Donec at efficitur orci, et ultrices magna. Donec consequat fermentum libero, id blandit nulla egestas non. Integer malesuada, metus ut dictum egestas, nisl mi vulputate ipsum, et bibendum velit felis ut lectus. Vestibulum a metus fermentum, convallis lacus sit amet, semper eros. Sed eu euismod dui, sit amet ornare odio. Cras iaculis faucibus leo id rhoncus.</p></div>
  </div>
</div>
</div>

CSS

.inner {padding:20px;}
.nav-tabs>li>a {
    background:whitesmoke;
    color:#d54848;
    border:0 !important;
    border-radius: 0 !important;
}
.nav-tabs.nav-justified>li {
    display:table-cell;
    width: 1%
}

.nav-tabs.nav-justified>li>a {
    margin-bottom: 0
}

.nav-tabs>li>a:hover {
    color:DarkRed;
}
.nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover {
    background-color:#d54848 ;
    color:white;
}
.nav-tabs>li.active:after {
    top: 100%;
	left: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-color: rgba(213, 72, 72, 0);
	border-top-color: #d54848;
    border-width: 10px;
	margin-left: -10px;  
}

.tab-content>.tab-pane {
  padding:20px;
}