JSFiddle - React, Tailwind, and code Playground

HTML

<div id="SideNav">
	<div id="Headerhome">
		<div id="Site-icon-1"></div> 
		Dashboard
	</div>
	<div id="HeaderSites">
		<div id="Site-icon-2"></div>
		Clients
	</div>
	<div id="HeaderApps">
		<div id="Site-icon-3"></div>
		Apps
	</div>
</div>

CSS

#Site-icon-1 {
    
    background-color:#000;
    width:25px;
    height:25px;
    float:left;
    margin-right:15px;
    margin-top:12px;
    margin-left:5px;
}

#Site-icon-1.SiteIconHover {
    background-color:#00a9ff;
    width: 25px;
    height: 25px;
    float: left;
    margin-right: 15px;
    margin-top: 12px;
    margin-left: 5px;}


#Site-icon-2 {
    background-color:#000;
    width: 25px;
    height: 25px;
    float: left;
    margin-right: 15px;
    margin-top: 12px;
    margin-left: 5px;
}

#Site-icon-2.SiteIconHover2 {
    background-color:#00a9ff;
    width: 25px;
    height: 25px;
    float: left;
    margin-right: 15px;
    margin-top: 12px;
    margin-left: 5px;}


#Site-icon-3 {
    background-color:#000;
    width: 25px;
    height: 25px;
    float: left;
    margin-right: 15px;
    margin-top: 12px;
    margin-left: 5px;
}

#Site-icon-3.SiteIconHover3 {
    background-color:#00a9ff;
    width: 25px;
    height: 25px;
    float: left;
    margin-right: 15px;
    margin-top: 12px;
    margin-left: 5px;}


#Headerhome, #HeaderSites, #HeaderApps {

background: #254661;
font-weight: normal;
color: #eeeeee;
box-sizing: border-box;
outline: 0;
line-height:50px;
text-decoration: none;
font-size: 100%;
list-style: none;
width:240px;
height:50px;
display: block;
cursor: pointer;
margin-top: 2px;
margin-left:-20px;
margin-right:0px;
padding-left:20px;
font-family:'Segoe UI';

}

#HeaderSites.menuSelected {
    border-left: 3px solid #26b3f7;
background: #18374f;
}

#Headerhome.menuSelected {
    border-left: 3px solid #26b3f7;
background: #18374f;
}

#HeaderApps.menuSelected {
    border-left: 3px solid #26b3f7;
background: #18374f;
}

JavaScript

$("#Headerhome").addClass('menuSelected');

$("#Headerhome").on('click', function () {
    var thisSelected = $(this).hasClass('menuSelected');
    if(!thisSelected) {
        $('#HeaderSites, #HeaderApps, #Site-icon-1, #Site-icon-3').removeAttr('class');
        $(this).addClass('menuSelected');
        $('#Site-icon-1').addCass('SiteIconHover2');
    } else {
        $(this).removeAttr('class');
    }
});

$("#HeaderSites").on('click', function () {
    var thisSelected = $(this).hasClass('menuSelected');
    if(!thisSelected) {
        $('#Headerhome, #HeaderApps, #Site-icon-1, #Site-icon-3').removeAttr('class');
        $(this).addClass('menuSelected');
        $('#Site-icon-2').addCass('SiteIconHover2');
    } else {
        $(this).removeAttr('class');
    }
});

$("#HeaderApps").on('click', function () {
    var thisSelected = $(this).hasClass('menuSelected');
    if(!thisSelected) {
        $('#Headerhome, #HeaderSites, #Site-icon-1, #Site-icon-2').removeAttr('class');
	    $(this).addClass('menuSelected');
        $('#Site-icon-3').addCass('SiteIconHover3');
    } else {
        $(this).removeAttr('class');
    }
});