JSFiddle - React, Tailwind, and code Playground

HTML

<div id="overlay">
OVERLAY (menu)
<br /><br />
<a href="#one" id="link">link</a><br />
<a href="#two" id="linktwo">link2</a>
</div>

<div id="div1">
<a name="one" id="one"></a>
THIS IS LINK ONE DIV
</div>

<div id="div2">
<a name="two" id="two"></a>
THIS IS LINK TWO DIV
</div>

CSS

body,html{
	margin: 0;
	padding: 0;
	background:#fff;
	color: #000;
}

#div1,
#div2{
	visibility: hidden;
  	opacity: 0;
    -webkit-transition: opacity 1s linear; 
	transition: opacity 1s linear;
	-moz-transition: opacity 1s linear;
	-o-transition: opacity 1s linear;
}

.visible{
	float: left;
	width: 65%;
	border: 1px solid #369;
	visibility: visible!important;
	filter:alpha(opacity=100)!important; /* For IE8 and earlier */
  	opacity: 1!important;
	-webkit-transition: opacity 2s linear; 
	transition: opacity 2s linear;
	-moz-transition: opacity 2s linear;
	-o-transition: opacity 2s linear;
}

#overlay{
	height: 100%;
	width: 100%;
    position: absolute;
    top: 0;
    right: 0;
	background: #999;
	color: #fff;
	text-align: center;
    -webkit-transition: all 0.4s ease-in-out; 
	transition: all 0.4s ease-in-out;
	-moz-transition: all 0.4s ease-in-out;
	-o-transition: all 0.4s ease-in-out;
	
}

.menu{
	width: 35%!important;
	position: fixed!important;
	top: 0;
	right: 0;
	background-color:#b9bcab;
	height: 100%;
	-webkit-transition: all 0.7s ease-in-out; 
	transition: all 0.7s ease-in-out;
	-moz-transition: all 0.7s ease-in-out;
	-o-transition: all 0.7s ease-in-out;
	
}

JavaScript

function visibleone()
    {
		document.getElementById("overlay").className = "menu";
		document.getElementById("div1").className = "visible";
   		document.getElementById("div2").className =
        document.getElementById("div2").className.replace
      ( /(?:^|\s)visible(?!\S)/g , '' )
    }
	
function visibletwo()
    {
		document.getElementById("overlay").className = "menu";
		document.getElementById("div2").className = "visible";
   		document.getElementById("div1").className =
        document.getElementById("div1").className.replace
      ( /(?:^|\s)visible(?!\S)/g , '' )

    }
	
	
 window.onload = function()
    {
    document.getElementById("link").addEventListener( 'click' , visibleone );
	document.getElementById("linktwo").addEventListener( 'click' , visibletwo );
    }