JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">

	<h1>Tabbed Content</h1>

    <a href="#tab-1" class="tab active">Tab 1</a>
    <a href="#tab-2" class="tab">Tab 2</a>

<div id="tabbed-content">
    <div id="tab-1" class="tab-content">
    </div>

    <div id="tab-2" class="tab-content hidden">
    </div>
</div>

</div>

CSS

#container {width:400px; margin: 0 auto;}

h1 {font: bold 30px arial;}

.tab {width: 200px; height: 30px; background: #ccc; display: block; float: left;}
.tab:hover {background: #333}
.tab.active {background: #333;}

#tab-1 {background: #f00; width: 400px; height: 400px;}
#tab-2 {background: #00f; width: 400px; height: 400px;}

.hidden {display: none;}

JavaScript

//This is okay I think?  Are there any better ways to do this?
$(document).ready(function() {
    $(".tab").click(function() {
        $("#tabbed-content .tab-content").hide();
        $($(this).attr("href")).show();
    });
});


//This is where I'm struggling - I want to add the active class to tab 2 and remove it from tab 1 and vice versa when the inactive tab is clicked.  
//What I have adds the class to the inactive tab but doesn't remove the class from the active tab.

$(document).ready(function() {
$(".tab").click(function () {
    $(".tab").removeClass("active");
    $(".tab").addClass("active");        
});
});