JSFiddle - React, Tailwind, and code Playground

HTML

<div id="page_headings">
    <h2 class="no_highlight">Heading One</h2>
    <h2 class="no_highlight">Heading Two</h2>
</div>

<br><br>
    <p>What I want it to look like when the click is active<p>
<div id="example">
    <h2 class="no_highlight">Example One</h2>
    <h2 class="red_highlight">Example Two</h2>
</div>

CSS

#page_headings{
	overflow: hidden;
	margin-bottom: 32px;
}

#page_headings h2{
	float: left;
	margin-right:24px;
	font-size: 14px;
    cursor:pointer;
}

#page_headings h2:hover{
	font-weight: bold;
}

.red_highlight{
	color:red;
	border-bottom: 1px solid red;
}

.no_highlight{
	color:#898989;
	border-bottom: none;
}

/* example area */
#examle{
	overflow: hidden;

}

#example h2{
	float: left;
	margin-right:24px;
	font-size: 14px;
    cursor:pointer;
}

#example h2:hover{
	font-weight: bold;
}

JavaScript

$('#page_headings h2').on('click', function(){
    if($(this).hasClass('no_highlight')){
    	$(this).removeClass('no_highlight').addClass('red_highlight');
    }else{
        $(this).addClass('no_highlight');
    }
    $(this).siblings('h2').addClass('no_highlight');
});