JSFiddle - React, Tailwind, and code Playground
HTML
<div class="container">
<ul class="rnd">
<li class="wrap"> </li>
<li class="child"> </li>
<li class="child second"> </li>
<li class="separator"> </li>
<li class="child"> </li>
<li class="child second"> </li>
<li class="separator"> </li>
<li class="child"> </li>
<li class="child second"> </li>
<li class="separator"> </li>
<li class="child"> </li>
<li class="child second"> </li>
<li class="separator"> </li>
<li class="child"> </li>
<li class="child second"> </li>
<li class="separator"> </li>
<li class="child"> </li>
<li class="child second"> </li>
<li class="separator"> </li>
<li class="child"> </li>
<li class="child second"> </li>
<li class="separator"> </li>
<li class="child"> </li>
<li class="child second"> </li>
<li class="wrap"> </li>
</ul>
<ul class="rnd">
<li class="wrap"> </li>
<li class="child"> </li>
<li class="child second"> </li>
<li class="separator"> </li>
<li class="child"> </li>
<li class="child second"> </li>
<li class="separator"> </li>
<li class="child"> </li>
<li class="child second"> </li>
<li class="separator"> </li>
<li class="child"> </li>
<li class="child second"> </li>
<li class="wrap"> </li>
</ul>
<ul class="rnd">
<li class="wrap"> </li>
<li class="child"> </li>
<li class="child second"> </li>
<li class="separator"> </li>
<li class="child"> </li>
<li class="child second"> </li>
...
CSS
.container {
display: flex;
flex-direction: row;
}
.container .rnd {
display: flex;
flex-direction: column;
width: 200px;
list-style: none;
padding: 0;
justify-content: center;
}
.container .rnd .wrap {
flex-grow: 2;
background: rgba(255, 0, 0, 0.2);
}
.container .rnd .child {
flex-grow: 1;
background: rgba(0, 255, 0, 0.2);
position: relative;
}
.container .rnd .separator {
flex-grow: 4;
background: rgba(0, 0, 255, 0.2);
}
.container .rnd .child:after {
content: '';
border-top: 1px solid red;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.container .rnd .child.second:after {
border-bottom: 1px solid red;
}