JSFiddle - React, Tailwind, and code Playground

by apoucoz

HTML

<ul class="hmenu">
    <li>
        <a class="entypo-menu" href="#"></a> <span class="menu">Menu</span>
    </li>

    <li>
        <a class="entypo-star" href="#"></a> <span>Favorite</span>
    </li>

    <li>
        <a class="entypo-newspaper" href="#"></a> <span>About us</span>
    </li>

    <li>
        <a class="entypo-location" href="#"></a> <span>Find us</span>
    </li>

    <li>
        <a class="entypo-link" href="#"></a> <span>Share</span>
    </li>

    <li>
        <a class="entypo-help-circled" href="#"></a> <span>FAQ's</span>
    </li>
</ul>

CSS

@import "http://weloveiconfonts.com/api/?family=entypo";

/* entypo */
[class*="entypo-"]:before {
    font-family:'entypo',sans-serif
}

@-webkit-keyframes flip {
0% {
    -webkit-transform:rotateY(0deg);
    opacity:1
}

100% {
    -webkit-transform:rotateY(95deg);
    opacity:0
}
}

@-moz-keyframes flip {
0% {
    -webkit-transform:rotateY(0deg);
    opacity:1
}

100% {
    -webkit-transform:rotateY(95deg);
    opacity:0
}
}

@-o-keyframes flip {
0% {
    -webkit-transform:rotateY(0deg);
    opacity:1
}

100% {
    -webkit-transform:rotateY(95deg);
    opacity:0
}
}

@keyframes flip {
0% {
    -webkit-transform:rotateY(0deg);
    opacity:1
}

100% {
    -webkit-transform:rotateY(95deg);
    opacity:0
}
}

ul {
    position:absolute;
    left:0;
    right:0;
    margin:50px auto;
    padding:0;
    width:200px;
    height:220px;
    list-style:none;
    -webkit-perspective:1000;
    -moz-perspective:1000;
    -o-perspective:1000;
    perspective:1000px
}

li {
    margin:2px 0;
    padding:0
}

li a {
    display:block;
    height:18px;
    width:20px;
    background:rgba(155,155,155,0.5);
    color:#fff;
    padding:8px 6px;
    text-decoration:none;
    text-align:center
}

.menu {
    opacity:1;
    -webkit-transform:rotateY(0deg);
    -moz-transform:rotateY(0deg);
    -o-transform:rotateY(0deg);
    transform:rotateY(0deg);
    -webkit-transition:.3s;
    -moz-transition:.3s;
    -o-transition:.3s;
    transition:.3s
}

li span {
    width:154px;
    float:left;
    text-align:center;
    background:rgba(155,155,155,0.5);
    color:#fff;
    margin:-34px 34px;
    padding:8px 6px;
    transform-origin:0;
    opacity:0;
    -webkit-transform:rotateY(95deg);
    -webkit-transition:.5s;
    -moz-transition:.5s;
    -o-transition:.5s;
    transition:.5s;
    -webkit-animation:flip 2s;
    -moz-animation:flip 2s;
    -o-animation:flip 2s;
    animation:flip 2s
}

span[class='menu'] {
    -webkit-animation:none
}

li:nth-child(2) span {
   ...