JSFiddle - React, Tailwind, and code Playground

by AshThakur

HTML

<div class="outer-bar">
<div class="percentage-label">
Photoshop
</div>
<div class="inner-bar" style="width:50%;">
<div class="pager-percentage">100%</div>
</div>
</div>
<br/><br/>
<div class="outer-bar">
    <div class="percentage-label">
        Dreamviewer
    </div>
    <div class="inner-bar" style="width:40%;">
        <div class="pager-percentage">40%</div>
    </div>
</div>
<br/><br/>
<div class="outer-bar">
    <div class="percentage-label">
        Web Designing
    </div>
    <div class="inner-bar" style="width:50%;">
        <div class="pager-percentage">50%</div>
    </div>
</div>
<br/><br/>
<div class="outer-bar">
    <div class="percentage-label">
        WordPress
    </div>
    <div class="inner-bar" style="width:100%;">
        <div class="pager-percentage">100%</div>
    </div>
</div>

<link rel='stylesheet' id='pager-google-fonts-css'  href='//fonts.googleapis.com/css?family=Hind%3A300%2C400%2C700&#038;ver=4.7.2' type='text/css' media='all' />

CSS

.outer-bar{
  width:500px;
  background:#eeeeee;
  height:15px;
  position:relative;
}
body{
  background:#fff;
  margin:70px;
  font-family: 'Hind';
  font-style: normal;
  font-weight: 300;
}
.inner-bar{
  background:#1974d2;
  height:15px;
  position:relative;
}
.pager-percentage{
  position:absolute;
  right:0;
  z-index:9999;
  background:#1974d2;
  top:-38px;
  padding:4px 8px;
  text-align:center;
  font-size:14px;
  text-transform:uppercase;
  color:#fff;
}
.percentage-label{
  position:absolute;
  top:-30px;
  z-index:999;
  font-weight:700;
  text-transform:uppercase;
  font-size:16px;
}