JSFiddle - React, Tailwind, and code Playground

by Umair Rafiq

HTML

<table>
<tr><td>
<div class="outside">
<div class="negative bar" style="width:100%"></div><div class="bar">100%</div>
</div>
</td></tr>
<tr><td>
<div class="outside">
<div class="negative bar" style="width:10%"></div><div class="bar">10%</div>
</div>
</td></tr>
<tr><td>
<div class="outside">
<div class="negative bar" style="width:90%"></div><div class="bar">90%</div>
</div>
</td></tr>

<tr><td>
<div class="outside">
<div class="negative bar" style="width:50%"></div><div class="bar">50%</div>
</div>
</td></tr>

<tr><td>
<div class="outside">
<div class="negative bar" style="width:98%"></div><div class="bar">98%</div>
</div>
</td></tr>

</table>

CSS

td {
  width: 120px;
  text-align:center;
}
.bar{
  position: absolute;
  height:20px;
  width:100%;
}
.negative{
  background-color:red;
}
.outside{
  position: relative;
  width:100%;
  height:20px;
  outline:1px solid black;
}