JSFiddle - React, Tailwind, and code Playground

HTML

<!-- div adicionada para usar no jsfiddle, não é obrigatório usá-la !!! -->
<div id="page">
    <!-- Barra de Menu (principal) -->
    <div class="menu_bar_top"> <a id="link-page" href="#menu"></a>

    </div>
    <!--/ Barra de Menu (principal) -->
    <!-- Slide Menu -->
    <div class="slide_menu">
        <div id="menu" class="panel">
            <div class="content">
                 <h2>Menu</h2>

                <br /> <a id="link-portfolio" href="#portfolio">Portfolio</a>
                <br /> <a id="link-about" href="#about">Sobre</a>
                <br /> <a id="link-contact" href="#contact">Contato</a>
                <br /> <a id="link-exit" href="#page">Fechar</a>

            </div>
        </div>
        <!-- /Slide Menu -->
        <!-- Portfolio -->
        <div id="portfolio" class="panel">
            <div class="content">
                	<h2>Portfolio</h2>
	<a id="link-exit" href="#page">Fechar</a>

            </div>
        </div>
        <!-- /Portfolio -->
        <!-- Sobre -->
        <div id="about" class="panel">
            <div class="content">
                	<h2>Sobre</h2>
	<a id="link-exit" href="#page">Fechar</a>

            </div>
        </div>
        <!-- /Sobre -->
        <!-- Contatto -->
        <div id="contact" class="panel">
            <div class="content">
                	<h2>Contato</h2>
	<a id="link-exit" href="#page">Fechar</a>

            </div>
        </div>
        <!-- /Contato -->
    </div>
    <!-- div page !!! -->

CSS

html, body {
    height:100%;
}
body {
    width: 100%;
    background: #9887F8;
    overflow-x: hidden;
    overflow-y: auto;
}
.content {
    right: 40px;
    left: 80px;
    top: 0px;
    position: absolute;
    padding-bottom: 30px;
}
.content h2 {
    font-size: 48px;
    padding: 10px 0px 20px 0px;
    margin-top: 52px;
    color: #fff;
    color: rgba(255, 255, 255, 0.9);
    text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.3);
}
.panel {
    width: 50%;
    min-height: 100%;
    position: absolute;
    background-color: #9887F8;
    box-shadow: 4px -4px 4px rgba(0, 0, 0, 0.2);
    margin-left: -102%;
    z-index:2;
    -webkit-transition: all .6s ease-in-out;
    -moz-transition: all .6s ease-in-out;
    -o-transition: all .6s ease-in-out;
    -ms-transition: all .6s ease-in-out;
    transition: all .6s ease-in-out;
}
.panel:target {
    margin-left: 0%;
    background-color: #9887F8;
}
/* CSS reset */
 body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td {
    margin:0;
    padding:0;
}
html, body {
    margin:0;
    padding:0;
}
/* Estilo Geral */
 body {
    font-family:'Electrolize', Arial, sans-serif;
    font-weight: 400;
    font-size: 15px;
    color: #fff;
}
a {
    text-decoration: none;
}
/* Barra de Menu (principal) */
 .menu_bar_top {
    line-height: 24px;
    font-size: 11px;
    background: rgba(255, 255, 255, 1);
    text-transform: uppercase;
    z-index: 9999;
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 40px;
    box-shadow: 1px 0px 2px rgba(0, 0, 0, 0.2);
    -webkit-animation: slideOut 0.5s ease-in-out 0.3s backwards;
    -moz-animation: slideOut 0.5s ease-in-out 0.3s backwards;
    -o-animation: slideOut 0.5s ease-in-out 0.3s backwards;
    -ms-animation: slideOut 0.5s ease-in-out 0.3s backwards;
    animation: slideOut 0.5s ease-in-out 0.3s backwards;
}
.menu_bar_top a {
    padding: 0px 10px;
    letter-spacing: 1px;
    color: #333;
   ...

JavaScript

var elementosMenu = $('.slide_menu .panel');
$('#page a[id^="link-"]').on('click', function(e){
   e.preventDefault();
    elementosMenu.css('margin-left', '-102%');
    var targetID = this.getAttribute('href').substr(1);
    document.getElementById(targetID).style.marginLeft = '0%';
});