JSFiddle - React, Tailwind, and code Playground

HTML

<h1>Effect Menu Dengan CSS3</h1>

<div class="container">   
    <!-- HTML -->
    <ul id="paneltwo">
        <li class="mask"><h3>MENU ></h3></li>
        <li class="linkOne"><a href="#">Home</a></li>
        <li class="linkTwo"><a href="#">About Us</a></li>
        <li class="linkThree"><a href="#">Product</a></li>
        <li class="linkFour"><a href="#">Blog</a></li>
        <li class="linkFive"><a href="#">Contact Us</a></li>
    </ul>
</div>

CSS

body {
    background: #FFF;
    margin: 0;
    padding: 0;
    font: 12px normal Verdana, Arial, Helvetica, sans-serif;
    height: 100%;
    color:#fff;
}

* {margin: 0; padding: 0; outline: none;}

a { 
    text-decoration:none; 
    color:#00c6ff;
}

h1 {
    font: 4em normal Arial, Helvetica, sans-serif;
    padding: 50px;  margin: 0;
    text-align:center;
    color:#333;
}

h3 {
    font: 1em Arial, Helvetica, sans-serif;
    font-weight:bold;
    color:#fff;
    display:block;
    padding:10px;
}

.container {
    width: 960px;
    margin: 0 auto; 
    overflow: hidden;
    position:relative;
    padding-bottom:50px;
}

/* STYLE EFFECT MENU */

#paneltwo { 
    width:300px;
    list-style:none; 
    position:relative;
    display:inline;
}

#paneltwo li {  
    margin-top:5px;
    width:150px;
    float:left;
    overflow:hidden;
    position:relative;
    background: #000000;
    background: -moz-linear-gradient(top, #161616 0%, #000000 100%);
    background: -webkit-linear-gradient(top, #161616 0%,#000000 100%);
    background: -o-linear-gradient(top, #161616 0%,#000000 100%);
    border-left:1px solid #111; 
    border-top:1px solid #111; 
    border-right:1px solid #333; 
    border-bottom:1px solid #333;
}

/* It allows us to hide the link behind it */
#paneltwo li.mask { 
    z-index:10; 
    overflow:hidden;
}

#paneltwo li.linkOne, 
#paneltwo li.linkTwo, 
#paneltwo li.linkThree, 
#paneltwo li.linkFour, 
#paneltwo li.linkFive 
{   -moz-transition: all 1s ease-in-out;
    -webkit-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
}

#paneltwo:hover li.linkOne, 
#paneltwo:hover li.linkTwo, 
#paneltwo:hover li.linkThree, 
#paneltwo:hover li.linkFour, 
#paneltwo:hover li.linkFive 
{   -moz-transform:translateX(0px);
    -moz-transition: all 1s ease-in-out; 
    -webkit-transform:translateX(0px);
    -webkit-transition: all 1s ease-in-out; 
    -o-transform:translateX(0px);
    -o-transition: all 1s ease-in-out; 
}

#paneltwo...