JSFiddle - React, Tailwind, and code Playground
HTML
<div class="coverage-container">
<div class="progressbar-content">
<img width="21" height="21" title="Get Trends" src="http:/localhost/newccft2/Content/images/chart-graph-icon.png" class="progressbar-chart-icon" />
<div class="progressbar-maindiv">
<div class="progressbar-percentage">
<center>80%</center>
</div>
</div>
<img width="21" height="21" title="Get Trends" src="http:/localhost/newccft2/Content/images/chart-graph-icon.png" class="progressbar-chart-icon" />
<div class="progressbar-maindiv">
<div class="progressbar-percentage">
<center>80%</center>
</div>
</div>
<img width="21" height="21" title="Get Trends" src="http:/localhost/newccft2/Content/images/chart-graph-icon.png" class="progressbar-chart-icon" />
<div class="progressbar-maindiv">
<div class="progressbar-percentage">
<center>80%</center>
</div>
</div>
</div>
CSS
div.coverage-container {
//border: 1px solid rgba(0, 0, 0, 0.13);
width:700px;
height:30px;
display: inline-block;
}
div.progressbar-content {
width: 95px;
text-align: center;
border: 1px solid rgba(0, 0, 0, 0.13);
display: inline;
}
div.progressbar-maindiv {
background-color: #DAE2E3;
// border-radius: 13px 13px 13px 13px;
margin: 3px 9px 20px -10px;
padding: 3px;
width: 75px;
float: left;
}
.progressbar-percentage {
background-color: #F23F54;
// border-radius: 15px 15px 15px 15px;
height: 15px;
width: 80.00%;
}
.progressbar-chart-icon {
margin-right: 5px;
float:left;
text-align: center;
}