JSFiddle - React, Tailwind, and code Playground

by Mahadevan Sivasubramanian

HTML

<script src="bootstrap.min.css "></script>
<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="col-xs-12 col-sm-12 col-md-12">
            <div class="progress-start text-center">
                    <a class="spant">Basic</a>
                <div class="cirle1">
                    <i class="fa fa-circle"></i>
                </div>
                <div class="single-bar">
                </div>
                <a class="spant">Inter</a>
                <div class="cirle1">
                    <i class="fa fa-circle"></i>
                </div>
                <a class="spant">Advancedc</a>
                <div class="cirle1">
                    <i class="fa fa-circle"></i>
                </div>
                    <a class="spant">Expert</a>
                <div class="cirle1">
                    <i class="fa fa-circle"></i>
                </div>
            </div>
        </div>
    </div>
</div>
<div>
    &nbsp;
</div>
<!-- first section-->
<div class="container-fluid">
    <div class="row-fluid">
        <div class="col-xs-12 col-sm-12 col-md-12">
            <div class="header">
                First Header
            </div>
            <div class="body">
                First Body
            </div>
        </div>
    </div>
</div>
<div>&nbsp;</div>
<!-- second section-->
<div class="container-fluid">
    <div class="row-fluid">
        <div class="col-xs-12 col-sm-12 col-md-12">
            <div class="header">
                Second Header
            </div>
            <div class="body">
                Second Body
            </div>
        </div>
    </div>
</div>

CSS

.progress-start{
    height: 20px;
    margin-left: 272px;
    margin-top: 31px;
}
.cirle1{    
    margin-left:0px;   
    margin-top: -21px;
    display:inline-block;    
    width:14%;
}
.single-bar{
    border-bottom: 5px solid black;
    position: absolute;
    top: 40px;
    width: 30%;
}
.spant{
    margin-left: -12px;
    margin-top: -20px;
    position: absolute;
}
.header{
    background-color:#e2e2e2;
    font-size:11px
    height:25px;
    padding:5px;
    border-top:1px solid #a2a2a2;
    border-left:1px solid #a2a2a2;
    border-right:1px solid #a2a2a2;
}
.body{
    background-color:#f2f2f2;
    font-size:15px;
    height:45px;
    border:1px solid #a2a2a2;
    padding:5px;
}