JSFiddle - React, Tailwind, and code Playground

HTML

<div>
    <ul id="tabs-nav">
        <li><a href="#sd">Dogs</a></li>
        <li><a href="#">Cats</a></li>
    </ul>
    <div class="tabbed-contents">
        
    </div>
</div>

CSS

ul#tabs-nav a
 {
  border-color: #ddd;
  border-bottom-color: #fff;
  background: green;
  text-decoration: none;
  color: #555;
  }

ul#tabs-nav a:focus,ul#tabs-nav a:active
 {
    background:red;
    text-decoration:underline;
 }

ul#tabs-nav a.selectedLink
 {
    background:red;
    text-decoration:underline;
 }

JavaScript

$(document).ready(function(){
    
  $('#tabs-nav a').click(function() {
    $('.selectedLink').removeClass('selectedLink');
    $(this).addClass('selectedLink');
  });
});