JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
   <li class="red">First red</li>
   <li class="red">Second red</li>
   <li class="blue">First blue</li>
   <li class="blue">Second blue</li>
   <li class="yellow">First yellow</li>
   <li class="red">Third red</li>
   <li class="yellow">Secondyellow</li>
</ul>

CSS

.red,
.blue,
.yellow
{
    display: block;
}

.red ~ .red,
.blue ~ .blue,
.yellow ~ .yellow
{
    display: none;
}