JSFiddle - React, Tailwind, and code Playground

by karinafotocollectiondemo

HTML

<center><div class="boxsupermenu">
<ul id="supermenu">
<li><a class="animasi" href="#">Tutorial BloGGeR<br /><br /><span>Tutorial BloGGeR</span></a></li>
<li><a class="animasi" href="#">Home<br /><br /><span>Home</span></a></li>
<li><a class="animasi" href="#">jQuery<br /><br /><span>jQuery</span></a></li>
<li><a class="animasi" href="#">CSS3<br /><br /><span>CSS3</span></a></li>
    <li><a class="animasi" href="#">Conten Dewasa<br /><br /><span>Conten Dewasa</span></a></li>


</ul>
</div></center>

CSS

/*------super menu-----*/
.boxsupermenu{
        position:relative;
        margin:15px 0 0 10px;
        overflow:hidden;
        margin:0;
        float:left;
        padding:0;
        background:#1d1d1d url(https://widgetduniablogger-project.googlecode.com/files/header-background2.png);
}
ul#supermenu{
        width:520px;/*untuk merubah lebar menu*/
        margin:10px 0 20px;
        padding:0;
        margin:3px 4px 3px 4px;
        clear:both;
        float:left;
}
ul#supermenu li{
        margin:0;
        padding:0;
        overflow:hidden;
        float:left;
        height:40px;
}
ul#supermenu li a.animasi{
        padding:10px 10px;
        font:10px Arial;
        float:left;
        color:white;
        text-decoration:none;
        text-transform:uppercase;
        text-shadow:1px 1px 1px #000;
        clear:both;
        height:18px;
        line-height:20px;
        background:white url(https://widgetduniablogger-project.googlecode.com/files/menu-hover2.png)center  repeat;
        text-align:center;
        transition:all 0.7s ease-in-out;
        -o-transition:all 0.7s ease-in-out;
        -moz-transition:all 0.7s ease-in-out;
        -webkit-transition:all 0.7s ease-in-out;
        -ms-transition:all 0.7s ease-in-out;
        font-weight:bold;
        border:1px solid #999;
}   
ul#supermenu li a.animasi:hover{
        transform:scale(1.0) rotate(0deg) translate(0, -40px);
        -o-transform:scale(1.0) rotate(0deg) translate(0, -40px);
        -moz-transform:scale(1.0) rotate(0deg) translate(0, -40px);
        -webkit-transform:scale(1.0) rotate(0deg) translate(0, -40px);
        -ms-transform:scale(1.0) rotate(0deg) translate(0, -40px);
}  
ul#supermenu li a.animasi span{
        padding:10px 9px;
        color:transparent;
        opacity:0.2;
        filter:alpha(opacity=20);
        border:2px solid transparent;
        transition:all 0.7s ease-out;
        -o-transition:all 0.7s ease-out;
        -moz-transition:all 0.7s ease-out;
     ...