JSFiddle - React, Tailwind, and code Playground

by Yuli Satriani

HTML

<nav id="menu">
    <ul>
      <li><a href="http://mastamvan.blogspot.co.id/">Home</a></li>
      <li><a href="http://mastamvan.blogspot.co.id/">HTML5</a></li>
      <li><a href="http://mastamvan.blogspot.co.id/">jQuery</a></li>
      <li><a href="http://mastamvan.blogspot.co.id/">PHP</a></li>
      <li><a href="http://mastamvan.blogspot.co.id/">Javascript</a></li>
      <li><a href="http://mastamvan.blogspot.co.id/">Design</a></li>
      <li><a href="http://mastamvan.blogspot.co.id/">Other</a></li>
      <div class="current">
        <div class="ctoparr"></div>   
        <div class="cback"></div>
        <div class="cbotarr"></div>
      </div>
    </ul>
  </nav>

CSS

<style type='text/css'>
#menu{display:inline-block;height:128px;margin:100px 5% 0;text-align:center;white-space:nowrap;width:90%}
#menu ul{margin:0;padding:0;position:relative}
#menu ul:after{clear:both;content:"";display:block}
#menu li{background-position:50% center;display:block;float:left;font-size:18px;font-weight:bold;height:128px;line-height:210px;margin-right:1%;position:relative;white-space:nowrap;width:13%;z-index:2}
#menu li:after{background:url("https://www.script-tutorials.com/demos/415/images/bg.png") repeat scroll 0 0;content:"";height:100%;position:absolute;right:-10%;top:0;width:10%}
#menu li:nth-child(1):before{background:url("https://www.script-tutorials.com/demos/415/images/1.png") repeat scroll 0 0;content:"";height:100%;left:-10%;position:absolute;top:0;width:10%}
#menu li:nth-child(1){background:url("https://www.script-tutorials.com/demos/415/images/1.png") no-repeat center;margin-left:1%}
#menu li:nth-child(2){background:url("https://www.script-tutorials.com/demos/415/images/2.png") no-repeat center}
#menu li:nth-child(3){background:url("https://www.script-tutorials.com/demos/415/images/3.png") no-repeat center}
#menu li:nth-child(4){background:url("https://www.script-tutorials.com/demos/415/images/4.png") no-repeat center}
#menu li:nth-child(5){background:url("https://www.script-tutorials.com/demos/415/images/5.png") no-repeat center}
#menu li:nth-child(6){background:url("https://www.script-tutorials.com/demos/415/images/1.png") no-repeat center}
#menu li:nth-child(7){background:url("https://www.script-tutorials.com/demos/415/images/2.png") no-repeat center}
#menu a{color:#eee;display:block;height:100%;text-decoration:none}
.current{height:158px;left:7.5%;margin-left:-50px;position:absolute;top:-13px;width:100px;-webkit-transition:all 400ms cubic-bezier(0,1.1,0.5,1.1);-moz-transition:all 400ms cubic-bezier(0,1.1,0.5,1.1);-o-transition:all 400ms cubic-bezier(0,1.1,0.5,1.1);-ms-transition:all 400ms cubic-bezier(0,1.1,0.5,1.1);transition:all...