JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    
  <li class='A'>A1</li>
  <li class='A'>A2</li>
  <li class='A'>A3</li>
  <li class='A'>A4</li>
  
  <li class='B'>B1</li>
  <li class='B'>B2</li>
  <li class='B'>B3</li>
  <li class='B'>B4</li>
  
  <li class='C'>C1</li>
  <li class='C'>C2</li>
  <li class='C'>C3</li>
  <li class='C'>C4</li>

</ul>

CSS

ul li{display:none}
ul li.A:first-child {display: block}
ul li.A + .B{display:block}
ul li.B + .C{display:block}