JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
    <header>
        <ul class="sidenav">
            <li><h2><a data-region="nav-1" href="#"><span class="title">About</span></a></h2></li>
            <li><h2><a data-region="nav-2" href="#"><span class="title">Services</span></a></h2></li>
        </ul>
    </header>
    <div id="nav-1" class="infozone"><p>Hello I'm box 1.</p></div>
    <div id="nav-2" class="infozone2"><p>Hello I'm box 2.</p></div>
</div>

CSS

.infozone{
	float:left;
	position:relative;
	height:400px;
	width:800px;
	background-color:#ff7200;
	background-color: rgba(0,0,0);
}

.infozone2{
	float:left;
	position:relative;
	height:400px;
	width:800px;
	background-color: #08a1ff;
	background-color: rgba(0,0,0);
	display:none;
}

JavaScript

$('.sidenav a').click(function(){
  $('.infozone').fadeOut(550);
  var region = $(this).attr('data-region');    
  $('#' + region).fadeIn(550);
})