JSFiddle - React, Tailwind, and code Playground
by Dug Sohn
HTML
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<br/>
<br/>
<br/>
<div class="well">
<div class="row">
<div class="col-xs-2 col-sm-2">
<h5>Initiated By</h5>
<a href="#"><i class="glyphicon glyphicon-user"></i> Mary Jane</a>
</div>
<div class="col-xs-10 col-sm-10">
<h5 class="pull-right">
<span class="label label-small label-info"><i class="glyphicon glyphicon-time"></i> 3 Days</span>
</h5>
<h5>Ed Wells Recruit</h5>
<div class="progress">
<div class="progress-bar progress-bar-success" style="width: 19.5%"><span class="sr-only">Step 1</span>
</div>
<div class="progress-bar progress-bar-success" style="width: 19.5%"><span class="sr-only">Step 2</span>
<span class="ui-milestone">Background Research</span>
</div>
<div class="progress-bar progress-bar-success" style="width: 19.5%"><span class="sr-only">Step 3</span>
</div>
<div class="progress-bar progress-bar-warning progress-bar-striped active" style="width: 19.5%"><span class="sr-only">Step 4</span>
<span class="ui-milestone">Phone Interviews</span>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-2 col-sm-2">
<h5>Initiated By</h5>
<a href="#"><i class="glyphicon glyphicon-user"></i> Mary Jane</a>
</div>
<div class="col-xs-10 col-sm-10">
<h5 class="pull-right">
<span class="label label-small label-info"><i class="glyphicon glyphicon-time"></i> 8 Days</span>
</h5>
<h5>Robert Saskaetewan Recruit</h5>
<div class="progress">
<div class="progress-bar progress-bar-success"...
CSS
.progress {
overflow: visible;
height:15px;
margin-bottom:20px
}
.progress-bar, .col-xs-2 {
border-right:1px solid rgb(255, 255, 255);
position:relative;
}
.progress-bar .ui-milestone {
position:absolute;
top:0px;
right:-1px;
color:#999;
width:200px;
display:block;
padding:15px 5px 0;
border-right:1px solid #ddd;
text-align:right;
text-transform: uppercase;
font-size:9px;
}
.progress-bar-empty {
background:none;
border:none;
box-shadow:none;
}
}