JSFiddle - React, Tailwind, and code Playground

HTML

<a href="#" class="all" tabindex="-1" title="All" >All</a> 
    <a href="#" class="web" tabindex="-1" title="Web">Web</a> 
    <a href="#" class="graphic" tabindex="-1" title="Graphic">Graphic</a> 
    <a href="#" class="music" tabindex="-1" title="Music">Music</a>

    <li class="web"><a href="#">Web</a></li>
      <li class="music"><a href="#">Music</a></li>
      <li class="graphic"><a href="#">Graphic</a></li>
      <li class="web"><a href="#">Web</a></li>
      <li class="music"><a href="#">Music</a></li>
      <li class="graphic"><a href="#">Graphic</a></li>
      <li class="music"><a href="#">Music</a></li>
      <li class="graphic"><a href="#">Graphic</a></li>

CSS

a[class="web"]:focus ~ li:not([class="web"]) {
 height:0px;
 width:0px;
 border:none;
 margin:0;
 display:none;
}
 a[class="graphic"]:focus ~ li:not([class="graphic"]) {
 height:0px;
 width:0px;
 border:none;
 margin:0;
 display:none;
}
 a[class="music"]:focus ~ li:not([class="music"]) {
 height:0px;
 width:0px;
 border:none;
 margin:0;
 display:none;
}