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:nth-of-type(1){display:block}
ul li.B:nth-of-type(1){display:block}
ul li.C:nth-of-type(1){display:block}