JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li>a</li>
    <li>b</li>
    <li>c</li>
    <li>d</li>
    <li>e</li>
    <li>f</li>
</ul>

CSS

ul {
    width: 210px;
}

li {
    display: block;
    float: left;
    width: 48px;
    height: 48px;
    margin: 0;
    text-align: center;
    border: 1px solid blue;
}

li:first-child,
li:first-child + li,
li:first-child + li + li,
li:first-child + li + li + li {
    margin: 51px 0 -99px 0;
}