JSFiddle - React, Tailwind, and code Playground

HTML

<div id='home'>
    <div class='slide' id='left'>
        <div class='wrap'>
            <div class='text'><a class='menul' href='#sounds'>Savado <span>Sounds</span></a>

                <br/>
                <div class='subtext'>	<a class='menul' href='#artist'>Performing Artist</a>

                    <br/>	<a class='menul' href='#composer' id='one'>Media Composer</a>

                    <br/>	<a class='menul' href='#producer' id='two'>Band Producer</a>

                </div>
            </div>
            <div class='inner'></div>	<a class='full' href='#home'></a>

        </div>
        <div class='logo' id='logol'>	<a href='#home'><img src='//savado.nl/new/logo.png' alt='Savado' /></a>

        </div>
    </div>
    <div class='slide' id='right'>
        <div class='wrap'>
            <div class='text'><a class='menur' href='#designs'>Savado <span>Designs</span></a>

                <br/>
                <div class='subtext'>	<a class='menur' href='#management'>Content Management</a>

                    <br/>	<a class='menur' href='#portfolio' id='one'>Design Portfolio</a>

                    <br/>	<a class='menur' href='#engines' id='two'>Search Engines</a>

                </div>
            </div>
            <div class='inner'></div>	<a class='full' href='#home'></a>

        </div>
        <div class='logo' id='logor'>	<a href='#home'><img src='//savado.nl/new/logo.png' alt='Savado' /></a>

        </div>
    </div>
</div>

CSS

.slide {
    position:absolute;
    height:100%;
    width:50%;
    -webkit-transform:skew(-15deg);
    -moz-transform:skew(-15deg);
    -ms-transform:skew(-15deg);
    -o-transform:skew(-15deg);
    transform:skew(-15deg);
    z-index:2;
    background:black;
}
.slide:hover, .open {
    width:59%;
    z-index:80;
}
#left, #left .inner, #left .text {
    left:0;
}
#right, #right .inner, #right .text {
    right:0;
}
.wrap {
    width:100%;
    height:100%;
    position:absolute;
    overflow:hidden;
    z-index:3;
}
.inner {
    width:100%;
    height:100%;
    -webkit-transform:skew(15deg) scale(1.8);
    -moz-transform:skew(15deg) scale(1.8);
    -ms-transform:skew(15deg) scale(1.8);
    -o-transform:skew(15deg) scale(1.8);
    transform:skew(15deg) scale(1.8);
    opacity:0.4;
    position:absolute;
}
.slide:hover .inner, .open .inner {
    opacity:0.8;
}
#left .inner {
    background:url(//savado.nl/new/sounds.jpg) no-repeat center center;
    -webkit-background-size:cover;
    -moz-background-size:cover;
    -ms-background-size:cover;
    -o-background-size:cover;
    background-size:cover;
}
#right .inner {
    background:url(//savado.nl/new/designs.jpg) no-repeat center center;
    -webkit-background-size:cover;
    -moz-background-size:cover;
    -ms-background-size:cover;
    -o-background-size:cover;
    background-size:cover;
}
a.full, a.full:link, a.full:hover, a.full:active, a.full:visited {
    display:block;
    width:100%;
    height:100%;
    position:absolute;
}
.slide .logo {
    position:absolute;
    z-index:90;
    top:50%;
    width:30%;
    overflow:hidden;
    -webkit-transform:translateY(-50%) skew(15deg);
    -moz-transform:translateY(-50%) skew(15deg);
    -ms-transform:translateY(-50%) skew(15deg);
    -o-transform:translateY(-50%) skew(15deg);
    transform:translateY(-50%) skew(15deg);
}
.logo img {
    width:100%;
}
.logo#logol {
    right:-15%;
}
.logo#logor {
    left:-15%;
}
.text {
    position:absolute;
    top:50%;
   ...

JavaScript

$('.menul').click(function () {    
    $('#left').addClass('active');
    $('#left').addClass('open');
    $('#right').removeClass('active');
    
    $('#right').off('mouseenter mouseleave').hover(function(){
        if($('#left').hasClass('active')){
            $('#left').toggleClass('open');
        }
    });
});

$('.menur').click(function () {
    $('#right').addClass('active');
    $('#right').addClass('open');
    $('#left').removeClass('active');
    
    $('#left').off('mouseenter mouseleave').hover(function(){
        if($('#right').hasClass('active')){
            $('#right').toggleClass('open');
        }
    });
});