JSFiddle - React, Tailwind, and code Playground

by JakobJingleheimer

HTML

<ol class="list-inline">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li class="active"></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.active {
    background: red;
}

.list-inline li.active ~ li + li +li {
    background: blue;
}