JSFiddle - React, Tailwind, and code Playground

by Imran Bughio

HTML

<div>
    <p class="">lorem</p>
    <p class="">lorem ipsum</p>
    <p class="active">ipsum</p>
    <p class="">ipsum</p>
    <p class="">dolor</p>
    <p class="active">ipsum</p>
    <p class="">ipsum</p>
    <p class="active">ipsum</p>
    <p class="">ipsum</p>
    <p class="">ipsum</p>
</div>

CSS

.active{
    background: #f00;
    color: #fff;
}
.active + .active,
.active ~ p:not(.active) + .active{
    background: initial;
    color: initial;
}