JSFiddle - React, Tailwind, and code Playground
HTML
<div>
<div id="output" style="width: 100px; position: absolute; top: 30px; left: 450px;"></div>
<div class="List" id="barChart" style="overflow: auto; border: 1px solid rgb(51, 51, 51); height: 200px; width: 400px; position: absolute; top: 20px; left: 20px;">
<div class="NonVirtualDataGroup" style="overflow: auto; display: inline-block; position: inherit;">
<div style="position: absolute; top: 82.35294117647058px; left: 0px; width: 30px; height: 117.64705882352942px;">
<div style="position: absolute; background-color: rgb(255, 150, 77); left: 0px; top: 0px; width: 30px; height: 117.64705882352942px;"></div>
</div>
<div style="position: absolute; top: 90px; left: 30px; width: 30px; height: 110px;">
<div style="position: absolute; background-color: rgb(150, 77, 255); left: 0px; top: 0px; width: 30px; height: 110px;"></div>
</div>
<div style="position: absolute; top: 32.35294117647058px; left: 80px; width: 30px; height: 167.64705882352942px;">
<div style="position: absolute; background-color: rgb(255, 150, 77); left: 0px; top: 0px; width: 30px; height: 167.64705882352942px;"></div>
</div>
<div style="position: absolute; top: 187.5px; left: 110px; width: 30px; height: 12.5px;">
<div style="position: absolute; background-color: rgb(150, 77, 255); left: 0px; top: 0px; width: 30px; height: 12.5px;"></div>
</div>
<div style="position: absolute; top: 138.23529411764707px; left: 160px; width: 30px; height: 61.76470588235294px;">
<div style="position: absolute; background-color: rgb(255, 150, 77); left: 0px; top: 0px; width: 30px; height: 61.76470588235294px;"></div>
</div>
<div style="position: absolute; top: 0px; left: 190px; width: 30px; height: 200px;">
<div style="position: absolute; background-color: rgb(150, 77, 255); left:...