JSFiddle - React, Tailwind, and code Playground

by kougiland

HTML

<ul id="panelthree">  
     <li class="mask"><h3>MENU ></h3></li>  
     <li class="linkAnimationOne"><a href="#">Link 1</a></li>  
     <li class="linkAnimationTwo"><a href="#">Link 2</a></li>  
     <li class="linkAnimationThree"><a href="#">Link 3</a></li>  
     <li class="linkAnimationFour"><a href="#">Link 4</a></li>  
     <li class="linkAnimationFive"><a href="#">Link 5</a></li>  
</ul>

CSS

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

#panelthree li {  
    border-radius:3px 3px 3px 3px; 
    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;
}

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

#panelthree li a { 
    color:#fff; 
    display:block; 
    padding:10px;
}

#panelthree li a:hover { 
    color:#00c6ff;
}

#panelthree li.linkAnimationOne, 
#panelthree li.linkAnimationTwo, 
#panelthree li.linkAnimationThree, 
#panelthree li.linkAnimationFour, 
#panelthree li.linkAnimationFive {
        -moz-transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
}

#panelthree:hover li.linkAnimationOne, 
#panelthree:hover li.linkAnimationTwo, 
#panelthree:hover li.linkAnimationThree, 
#panelthree:hover li.linkAnimationFour, 
#panelthree:hover li.linkAnimationFive{ 
        -moz-animation:bounceX 0.5s linear forwards;
    -webkit-animation:bounceX 0.5s linear forwards;
}

#panelthree:hover li.linkAnimationTwo {     
    -moz-animation-delay:0.5s;
    -webkit-animation-delay:0.5s; 
}

#panelthree:hover li.linkAnimationThree { 
    -moz-animation-delay:1s;
    -webkit-animation-delay:1s; 
}

#panelthree:hover li.linkAnimationFour{ 
    -moz-animation-delay:1.5s;
    -webkit-animation-delay:1.5s; 
}

#panelthree:hover li.linkAnimationFive { 
        -moz-animation-delay:2s;
    -webkit-animation-delay:2s;
}

#panelthree li.linkAnimationOne {
    -moz-transform:translateX(-100%); 
   ...