JSFiddle - React, Tailwind, and code Playground
HTML
<body>
<p>
before
</p>
<div id="sqig">
<div class="topsqig"><div></div></div>
<div class="bottomsqig"><div></div></div>
<div class="topsqig"><div></div></div>
<div class="bottomsqig"><div></div></div>
<div class="topsqig"><div></div></div>
<div class="bottomsqig"><div></div></div>
<div class="topsqig"><div></div></div>
<div class="bottomsqig"><div></div></div>
<div class="topsqig"><div></div></div>
<div class="bottomsqig"><div></div></div>
<div class="topsqig"><div></div></div>
<div class="bottomsqig"><div></div></div>
<div class="topsqig"><div></div></div>
<div class="bottomsqig"><div></div></div>
<div class="topsqig"><div></div></div>
<div class="bottomsqig"><div></div></div>
<div class="topsqig"><div></div></div>
<div class="bottomsqig"><div></div></div>
<div class="topsqig"><div></div></div>
<div class="bottomsqig"><div></div></div>
<div class="topsqig"><div></div></div>
<div class="bottomsqig"><div></div></div>
<div class="topsqig"><div></div></div>
<div class="bottomsqig"><div></div></div>
<div class="topsqig"><div></div></div>
<div class="bottomsqig"><div></div></div>
<div class="topsqig"><div></div></div>
<div class="bottomsqig"><div></div></div>
<div class="topsqig"><div></div></div>
<div class="bottomsqig"><div></div></div>
<div class="topsqig"><div></div></div>
<div class="bottomsqig"><div></div></div>
<div class="topsqig"><div></div></div>
<div class="bottomsqig"><div></div></div>
<div class="topsqig"><div></div></div>
<div class="bottomsqig"><div></div></div>
<div class="topsqig"><div></div></div>
<div class="bottomsqig"><div></div></div>
<div class="topsqig"><div></div></div>
<div class="bottomsqig"><div></div></div>
...
CSS
#sqig{
position:relative;
width:400px;
height:6px;
}
#sqig div{
position:relative;
width:6px;
height:6px;
display: inline-block;
margin:0 0 0 -4px;
padding:0;
}
#sqig .topsqig div{
border-radius: 3px;
top:1px;
border-top: 1px solid #000;
}
#sqig .bottomsqig div{
border-radius: 3px;
top:-1px;
border-bottom: 1px solid #000;
}