JSFiddle - React, Tailwind, and code Playground

HTML

<div class="text-center row">
  <ul  class="col-md-12 secondNav">
    
    <a href="#" ><li class="navbar-brand nav-item" style="margin-right: 9%">
      <input type="checkbox" id="demo"/>
      <label for="demo"><strong>INICIO</strong></label>
    </li></a>
    <a href="#" ><li  class="navbar-brand nav-item" >
      <input type="checkbox" id="demo1"/>
      <label for="demo1"><strong>COMPARAR</strong></label>
    </li></a>
  </ul>
</div>

CSS

label {
    display: block;
}

input[type="checkbox"] {
  display:none;
}

#demo:checked + label, #demo1:checked + label {
    background: pink;
    color: white;
}