JSFiddle - React, Tailwind, and code Playground

HTML

<div data-role="navbar">
  <ul>
    <li><a href="#tab-1" onclick="ShowHide(this)">Tab1</a></li>
    <li><a href="#tab-2" onclick="ShowHide(this)">Tab2</a></li>
    <li><a href="#tab-3" onclick="ShowHide(this)">Tab3</a></li>
  </ul>
</div>

<div data-role="content" class="content">
   <div id="tab-1">
      <h2>Here is the first tab</h2>
   </div>
   <div id="tab-2">
      <h2>Here is the second tab</h2>
    </div>
    <div id="tab-3">
       <h2>Here is the third tab</h2>
    </div>
</div>

JavaScript

$(".content").find("div:first").show()

function ShowHide(e)
{
  $(".tabs").hide();
  var id =$(e).attr("href"); 
  $(id).show();
}