JSFiddle - React, Tailwind, and code Playground
HTML
<div class="progress">
</div>
<div class="progress_inner"></div>
<span class="progress_count">34 shares</span>
</div>
<div class="min_max"><span class="min">0</span><span class="max">80к</span>
CSS
.progress_content {
margin-top:30px;
width:320px;
height:15px;
}
.progress {
position:absolute;
width: 240px;
border: 1px #95b5d3 solid;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
behavior: url(pie/PIE.htc);
overflow: hidden;
height:9px;
z-index:10;
}
.progress_inner {
top:1px;
left:1px;
position:relative;
height:9px;
width:150px;
max-width:240px;
background:#007eff;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
float:left;
z-index:1;
}
.progress_count {
position:relative;
bottom:15px;
left:-10px;
color: #000000;
font-size: 11px;
}
.max {
float:right;
}
.min_max {
width:240px;
margin-bottom:30px;
}