JSFiddle - React, Tailwind, and code Playground

HTML

<a href="javascript: swapin('1');" class="tabs">One</a>&nbsp;
<a href="javascript: swapin('2');" class="tabs" >Two</a>&nbsp;
<a href="javascript: swapin('3');" class="tabs">Three</a>&nbsp;

<div id="contain" class="contain">
    <div id="1" style="display: none;">
    One Content
    </div>
    <div id="2" style="display: none;">
    Two Content
    </div>
    <div id="3" style="display: none;">
    Three Content
    </div>
</div>

CSS

.tabs {
        background-color:#7D135A;
        border-radius: 2px 2px 0 0;
        height: 50px;
        width: 90px;
        padding-left:10px;
        padding-right:10px;
        padding-top:5px;
        padding-bottom:0px;
        color:#FFFFFF;
        }

     .contain {
     	width:500px;
     	height:200px;
     	border:1px;
		border-style: solid;
	    border-color: #7D135A;
     	}



.active{
    background-color: #008800;
}

JavaScript

var currentDiv = null;

swapin = function(divName){
if(currentDiv != null){
document.getElementById(currentDiv).style.display = "none";

}
if(document.getElementById != 'contain'){
document.getElementById('1').style.display = "none";
}
currentDiv = divName;
document.getElementById(currentDiv).style.display = "block";
}
window.onload = function(){
document.getElementById('1').style.display = "block";
}
$(function () {
    $(".tabs").click(function () {
        $(".active").removeClass("active");
        $(this).addClass('active');
    });
});