JSFiddle - React, Tailwind, and code Playground

https://twitter.com/wesbos/status/398952103378296832

by Aaron Kahlhamer

HTML

<ul>
    <li class="active">item 01</li>
    <li class="active">item 02</li>
    <li class="active">item 03</li>
    <li class="">item 04</li>
    <li class="">item 05</li>
    <li class="active">item 06 (make me red)</li>
    <li class="">item 07</li>
</ul>

CSS

li {
    /* font-size:3em; */
    position:relative;
}

li:not(.active):before {
    content:"content-needed-to-maintain-height";
    background:red;
    display:block;
    position:absolute;
    text-indent:-9999px;
    top:-1.1em;
    width:100%;
    z-index:-1;
}

li:not(.active) {
    background:white;
}