JSFiddle - React, Tailwind, and code Playground

by Mahadevan Sivasubramanian

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<div class="container-fluid">
        <div class="row-fluid">
			<div class="flw_width">
				<label class="pull-left flw_text green_prog_text">Basic Information</label>
               	<div class="col-xs-4 col-sm-4 col-md-1">
					<i class="fa fa-circle flw_circle_green"></i>
				</div>
				<div class="col-xs-4 col-sm-4 col-md-3">
					<div class="green_prog">
						&nbsp;
					</div>
				</div>	
				<label class="pull-left flw_text cst_text">Education &amp; Health</label>
				<div class="col-xs-4 col-sm-4 col-md-1">
					<i class="fa fa-circle flw_circle_grey"></i>
				</div>
				<div class="col-xs-4 col-sm-4 col-md-3">
					<div class="grey_prog">
						&nbsp;
					</div>
				</div>
				<label class="pull-left flw_text cst_text">Attach &amp; Declaration</label>
				<div class="col-xs-4 col-sm-4 col-md-1">
					<i class="fa fa-circle flw_circle_grey"></i>
				</div>
				<div class="col-xs-4 col-sm-4 col-md-3">
					<div class="grey_prog">
						&nbsp;
					</div>
				</div>
				<label class="pull-left flw_text pay_text">Payment</label>
				<div class="col-xs-4 col-sm-4 col-md-1">
					<i class="fa fa-circle flw_circle_grey"></i>
				</div>
			</div>
        </div>
    </div>

CSS

.flw_width{
	width: 480px;
	margin: 0px auto;
	padding-top:45px;
	padding-bottom: 60px;
}
.flw_text{
	font-size: 13px;
	color: #ced3d0;
	font-family: 'Open Sans', sans-serif;
	width: 0px;
    white-space: nowrap;
	margin-top: -35px;
    margin-left: -45px;
	border:0px;
}

.flw_text, .cst_text{
	margin-left: -46px !important;
}
.pay_text{
	padding-left:26px;
}
.flw_circle_grey{
     color:#ced3d0;
	width: 20px;
	height: 20px;
    margin-left: -35px;
    margin-top: -7px;
}
.flw_circle_green{
    
    color:#84bd00;
	width: 20px;
	height: 20px;
	margin-top: -6px;
    margin-left: 0px;
}
.grey_prog{
	background-color: #ced3d0;
	height: 6px;
	margin-left: -24px;
	border: 1px solid #bdbdbd;
}
.green_prog_text{
	color: #84bd00;
}
.green_prog{
	background-color: #84bd00;
	height: 6px;
	margin-left: -24px;
	
}