JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
  <div class="col-md-8">
		<div class="steps-headers">
		<ul class="nav nav-tabs nav-steps">
			<li class="step">
				<a href="#facebook-tab" data-toggle="tab">Facebook</a>
			</li>
			<li class="step">
				<a href="#twitter-tab" data-toggle="tab">Twitter</a>
			</li>
			<li class="step">
				<a href="#googleplus-tab" data-toggle="tab">Google+</a>
			</li>
			<li class="step">
				<a href="#pinterest-tab" data-toggle="tab">Pinterest</a>
			</li>	
		</ul>
		</div>
		<div class="tab-content">
			<div class="tab-pane fade in active" id="facebook-tab">
				<h3>Facebook</h3>
				<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
			</div>
			<div class="tab-pane fade" id="twitter-tab">
				<h3>Twitter</h3>
				<p>Twitter Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
			</div>
			<div class="tab-pane fade" id="googleplus-tab">
				<h3>Google+</h3>
				<p>Google + Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
			</div>
			<div class="tab-pane fade" id="pinterest-tab">
				<h3>Pinterest</h3>
				<p>Pinterest Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem...

CSS

.steps-headers {
	text-align: center;
}

.nav-steps {
  border: none;
  padding-bottom: 1px; 
  background-color: orange;
  display: inline-block;
overflow: hidden; 
}

.nav-steps>li>a {
  margin-right: 0px;
  line-height: 1.428571429;
       width: 180px;
}

/* step arrow style */
.nav-steps>.step a:after {
position: absolute;
z-index: 2;
content: '';
top: 0px;
right: -30px;
border-bottom: 23px solid transparent;
border-left: 23px solid orange;
border-top: 20px solid transparent;
width: 31px;
}


/* disable step arrow style for last item */
.nav-steps>.step:last-child a:after {
  display: none;
}

/* HOVER STYLE */

/* hover state */
.nav-steps>li a:hover {
  background-color: pink;
  color: white;
  border-radius: 0px;  
}



/* step arrow color on hover:after */
.nav-steps .step:hover a:after {
  border-left-color: pink;
}

/* ACTIVE STYLE */

/* active state */
.nav-steps>li.active>a, .nav-steps>li.active>a:hover, .nav-steps>li.active>a:focus {
  background-color: yellow;
  color: black;
  border-radius: 0px;
}

/* step arrow color on active:after */
.nav-steps .step.active a:after {
  border-left-color: yellow;
}