JSFiddle - React, Tailwind, and code Playground

by Gaurav Singh

HTML

<nav id="menu" class="clearfix" role="navigation">
 <article>
  <section class="content">
   <ul class="menu">
    <li class="item-1 current active">
     <a class="menu_button" href="#" >ACTIVE</a>
     <span class="reflect"></span>
    </li>
    <li class="item-2">
     <a class="menu_button" href="#" >HOVER TRANSITION</a>
     <span class="reflect"></span>
    </li>
       <li>
<a class="menu_button" href="#" >Reflect Button</a>
<a class="menu_button" id="box-ref1" href="#" >Testing</a>           
       </li>
   </ul>
  </section>
 </article>
</nav>

CSS

#menu {
    margin:10px 10px;
}

ul.menu li {
    list-style-type:none;
    float: left;
    margin-right: 3.8%;
}

nav ul.menu li a {
    display:block;
}

nav ul.menu li .reflect {
    display: inline-block;
    /* transition easeInOutBack */
    -webkit-transition: opacity 3500ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
    -moz-transition: opacity 3500ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
           opacity: 0;

    -webkit-border-radius: 19px;
    -moz-border-radius: 19px;

    border-top: solid #a3aeb1 1px;
    border-left: none;
    border-right: none;
    border-bottom: none;

    width: 100%;
    height: 38px;

    background: -moz-linear-gradient(top,  rgba(70,226,203,0.55) 0%, rgba(70,226,203,0.51) 6%, rgba(52,147,150,0.42) 17%, rgba(51,140,146,0.4) 20%, rgba(43,101,124,0.15) 37%, rgba(43,101,124,0.1) 40%, rgba(43,101,124,0.02) 48%, rgba(43,101,124,0) 55%); /* FF3.6+ */

    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(70,226,203,0.55)), color-stop(6%,rgba(70,226,203,0.51)), color-stop(17%,rgba(52,147,150,0.42)), color-stop(20%,rgba(51,140,146,0.4)), color-stop(37%,rgba(43,101,124,0.15)), color-stop(40%,rgba(43,101,124,0.1)), color-stop(48%,rgba(43,101,124,0.02)), color-stop(55%,rgba(43,101,124,0))); /* Chrome,Safari4+ */

    background: -webkit-linear-gradient(top,  rgba(70,226,203,0.55) 0%,rgba(70,226,203,0.51) 6%,rgba(52,147,150,0.42) 17%,rgba(51,140,146,0.4) 20%,rgba(43,101,124,0.15) 37%,rgba(43,101,124,0.1) 40%,rgba(43,101,124,0.02) 48%,rgba(43,101,124,0) 55%); /* Chrome10+,Safari5.1+ */

}

nav ul.menu li {
     /* linear transition */
    -webkit-transition: opacity 4000ms  cubic-bezier(0.250, 0.250, 0.750, 0.750);
    -moz-transition: opacity 4000ms  cubic-bezier(0.250, 0.250, 0.750, 0.750);
    opacity: 0;
}

nav ul.menu li:hover,  nav ul.menu li:hover .reflect{
     /* linear transition */
    -webkit-transition: opacity 150ms cubic-bezier(0.250, 0.250, 0.750, 0.750);
    -moz-transition: opacity...