JSFiddle - React, Tailwind, and code Playground

HTML

<div id="test">
    <div class="t1"></div>
    <div class="t1"></div>
    <div class="t1"></div>
    <div class="t1"></div>
    <div class="t1"></div>
</div>

CSS

.t1{
    counter-increment : test 1;
    background-color:red;
    
}
.t1:after{    
    content : counter(test);
    width : calc(counter(test)*50px);
}