JSFiddle - React, Tailwind, and code Playground

HTML

<div class="tabbuttonsdiv">
        <a href="#item1" class="tabbuttons activeTab">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>
        <p id="item2" class="tabcontent">... item 2...</p>
        <p id="item3" class="tabcontent">... item 3...</p>
        
    </div>

CSS

div.items p {display: none}
div.items p:first-child {display: block; }

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

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

.activeTab { background-color:PURPLE }
.activeItem { display: block; }

JavaScript

$(function() {    
    $('.tabbuttons').on('click', function() {
        $('.tabbuttons').removeClass('activeTab');
        $(this).addClass('activeTab');
        var i = $(this).attr('href');
        $('.items p').hide();
        $(i).show();
    });
});