JSFiddle - React, Tailwind, and code Playground

HTML

<body>
	<div id="mainmenu">
        <div id="menu"><a href="#">MENU</a></div>
        <div id="home"><a href="#">HOME</a></div>
        <div id="video"><a href="#">VIDEO</a></div>
        <div id="photos"><a href="#">>PHOTO'S</a></div>
        <div id="calendar"><a href="#">CALENDAR</a></div>
    </div>
</body>

CSS

#mainmenu {
    position:fixed;
    top: 300px;
    right: -50px;
    height:1px; width:1px;
}
#mainmenu div {
    position:absolute;
    right:0;
    color: #333333;
    text-decoration: none;
    font-size: 22px;
    font-weight: 500;    
    width: 100px;
    height: 100px;    
    background: #333333;
    text-align: center;
    line-height: 100px;
    transition: all 1s ease;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
}
a {
    display: block;
    color:white;
    text-decoration: none;
    transition: all 0.7s ease;
}
#main_nav {
    list-style: none;
    margin: 0;
    padding: 0;
}
#main_nav li a {
    /*text-indent: -999999px;*/
    overflow: hidden;
    display: block;
    float: right;
}
#menu {
    z-index: 5;
}
#home {
    z-index: 4;
}
#video {
    z-index: 3;
}
#photos {
    z-index: 2;
}
#calendar {
    z-index: 2;
}
#menu:hover {
    background: #FFFFFF;
}
#menu:hover a {
    color:black;
}
#mainmenu:hover #menu ~ #home {
    transition: all 0.3s ease;
    -webkit-transform: rotate(45deg) translate(0px, 105px) perspective(350px);
    -moz-transform: rotate(45deg) translate(0px, 105px) perspective(350px);
    -ms-transform: rotate(45deg) translate(0px, 105px) perspective(350px);
    -o-transform: rotate(45deg) translate(0px, 105px) perspective(350px);
    transform: rotate(45deg) translate(0px, 105px) perspective(350px);
}
#mainmenu:hover #menu ~ #photos {
    -webkit-transition: all 0.3s 0.3s ease;
    transition: all 0.3s 0.3s ease;
    -webkit-transform: rotate(45deg) translate(0px, 210px) perspective(350px);
    -moz-transform: rotate(45deg) translate(0px, 210px) perspective(350px);
    -ms-transform: rotate(45deg) translate(0px, 210px) perspective(350px);
    -o-transform: rotate(45deg) translate(0px, 210px) perspective(350px);
    transform: rotate(45deg) translate(0px, 210px) perspective(350px);
}
#mainmenu:hover...