JSFiddle - React, Tailwind, and code Playground

HTML

<div class="tabbuttonsdiv">
  <a href="#item1" class="tabbuttons active">item 1</a>
  <a href="#item2" class="tabbuttons">item 2</a>
  <a href="#item3" class="tabbuttons">item 3</a>
</div>

<div class="items">
  <div id="item1" class="tabcontent"><p>... item 1...</p></div>
  <div id="item2" class="tabcontent"><p>... item 2...</p></div>
  <div id="item3" class="tabcontent"><p>...</p></div>
</div>

CSS

div.items .tabcontent {display: none}
div.items .tabcontent:target {display: block}

.tabbuttons{
	color: #fff;
    background-color:#3195c1;
    border: none;
    padding: 10px;
}

.tabbuttons:hover {
    background-color:PURPLE;
}
.tabbuttons.active {
    background-color:PURPLE;
}

.tabcontent{
 background: #ddd;
    min-height: 100px;
}

JavaScript

$(".tabbuttons").click(function(){
    $(".tabbuttons").removeClass("active");
    $(this).addClass("active");
});

$(document).ready(function(){
    $("#item1").show();
});