JSFiddle - React, Tailwind, and code Playground

HTML

<p>
    <div class="tabbuttonsdiv">
  <a href="#item1" class="tabbuttons">item 1</a>
  <a href="#item2" class="tabbuttons">item 2</a>
  <a href="#item3" class="tabbuttons">item 3</a>
  
    </div>
<div class="items">
  <p id="item1" class="tabcontent">... item 1...
  <p id="item2" class="tabcontent">... item 2...
  <p id="item3" class="tabcontent">...
  
</div>

CSS

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

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

.tabbuttons:hover {
    background-color:PURPLE;
}
.tabcontent{
 background: #ddd;
    min-height: 100px;
}