JSFiddle - React, Tailwind, and code Playground

by JakobJingleheimer

HTML

<ol class="list-inline">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ol>

CSS

.list-inline {
    display: block;
    list-style: none;
    width: 100%;
}

.list-inline li {
    background: black;
    display: inline-block;
    height: 0;
    padding-top: 10%;
    width: 10%;
}

.list-inline li:nth-of-type(n+4):nth-of-type(-n+8) {
    background: blue;
}