JSFiddle - React, Tailwind, and code Playground

HTML

<div id="text">
    <div><a href="./?tab=0#tabs">Go to Tab 1</a></div>
    <div><a href="./?tab=1#tabs">Go to Tab 2</a></div>
    <div><a href="./?tab=2#tabs">Go to Tab 3</a></div>
</div>
<hr>
<div id="tabs">
    <div class="tab">Tab 1</div>
    <div class="tab">Tab 2</div>
    <div class="tab">Tab 3</div>
</div>
<hr>
<div id="content">
    <div>Content of tab 1</div>
    <div>Content of tab 2</div>
    <div>Content of tab 3</div>
</div>

CSS

#text {
    width: 300px;
    margin: auto;
}

.tab {
    display: inline-block;
    padding: 5px 10px;
    cursor: pointer;
}

.tab.active {
    background: #ff0000;
}

#tabs {
    text-align: center;
}

#content > div {
    display: none;
}

#content > .active {
    display: block;
}

JavaScript

var cur;

var enableTab = function(id) {
	$('#tabs .tab').removeClass('active').eq(id).addClass('active');
    $('#content div').removeClass('active').eq(id).addClass('active');
};

var params = location.search;
params = params.slice(1, location.search.length);
params = params.split('&').map(function(el) {
	el = el.split('=');
    if(el[0] == 'tab') cur = el[1];
});

switch(cur * 1) {
    case 1:
        enableTab(1);
        break;
    case 2:
        enableTab(2);
        break;
    default:
        enableTab(0);
}

$('#tabs .tab').click(function() {
	enableTab($(this).index());
});