JSFiddle - React, Tailwind, and code Playground
HTML
<div class="wrapper">
<div class="s s1"></div>
<div class="s1 s2"></div>
<div class="s1 s2 s3"></div>
<div class="s1 s2 s3 s4"></div>
<div class="s1 s2 s3 s4 s5"></div>
</div>
<div class="wrapper">
<div class="s s1"></div>
<div class="s1 s2"></div>
<div class="s1 s2 s3"></div>
<div class="s1 s2 s3 s4"></div>
<div class="s1 s2 s3 s4 s5"></div>
</div>
<div class="wrapper">
<div class="s s1"></div>
<div class="s1 s2"></div>
<div class="s1 s2 s3"></div>
<div class="s1 s2 s3 s4"></div>
<div class="s1 s2 s3 s4 s5"></div>
</div>
<div class="wrapper">
<div class="s s1"></div>
<div class="s1 s2"></div>
<div class="s1 s2 s3"></div>
<div class="s1 s2 s3 s4"></div>
<div class="s1 s2 s3 s4 s5"></div>
</div>
<div class="wrapper">
<div class="s s1"></div>
<div class="s1 s2"></div>
<div class="s1 s2 s3"></div>
<div class="s1 s2 s3 s4"></div>
<div class="s1 s2 s3 s4 s5"></div>
</div>
<div class="wrapper">
<div class="s s1"></div>
<div class="s1 s2"></div>
<div class="s1 s2 s3"></div>
<div class="s1 s2 s3 s4"></div>
<div class="s1 s2 s3 s4 s5"></div>
</div>
<div class="wrapper">
<div class="s s1"></div>
<div class="s1 s2"></div>
<div class="s1 s2 s3"></div>
<div class="s1 s2 s3 s4"></div>
<div class="s1 s2 s3 s4 s5"></div>
</div>
<div class="wrapper">
<div class="s s1"></div>
<div class="s1 s2"></div>
<div class="s1 s2 s3"></div>
<div class="s1 s2 s3 s4"></div>
<div class="s1 s2 s3 s4 s5"></div>
</div>
<div class="wrapper">
<div class="s s1"></div>
<div class="s1 s2"></div>
<div class="s1 s2 s3"></div>
<div class="s1 s2 s3 s4"></div>
<div class="s1 s2 s3 s4 s5"></div>
</div>
<div class="wrapper">
<div class="s s1"></div>
<div class="s1 s2"></div>
<div class="s1 s2 s3"></div>
<div class="s1 s2 s3 s4"></div>
<div class="s1 s2 s3 s4 s5"></div>
</div> ...
CSS
.wrapper{
float:left;
margin-left:-3px;
}
.s1{
width:1px;
height:1px;
border:1px solid gray;
background:black;
}
.s2{
margin-left:1px;
}
.s3{
margin-left:2px;
}
.s4{
margin-left:3px;
}
.s5{
margin-left:4px;
}