JSFiddle - React, Tailwind, and code Playground

HTML

<div class="section">
<div id="vdo-4">
<ul class="nav">
    <li><a href="#"><img src="http://dev.iamvdo.me/icones1.png" />Videos</a></li>
</ul>
</div>
</div>

CSS

body{
    font: 1em sans-serif;
}
.section {
    /* background: #000; */
    display: block;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    background: #2f5050;
}

h2{
    font-size: 1.6em;
}
ul.nav{
    width:540px;
    height:30px;
    margin: 30px auto;
    font: .9em sans-serif;
}
ul.nav li{
    display:inline-block;
}
ul.nav li a{
    display: block;
    width:130px;
    height:27px;
    padding-top:3px;
    vertical-align:middle;
    border-radius:3px;
    background: #C3F051;
    border: 1px solid rgba(0,0,0,.3);
    text-decoration: none;
    color: #333;
    text-shadow: 0 1px 0 rgba(255,255,255,.6);
    box-shadow: 0 1px 0 rgba(255,255,255,.7) inset,0 0 3px rgba(0,0,0,.3);
    -webkit-transition: all .5s ease;
       -moz-transition: all .5s ease;
         -o-transition: all .5s ease;
            transition: all .5s ease;
}
ul.nav a:hover,
ul.nav a:focus{
    filter: invert(100%);
}
 ul.nav a:focus .section{
    filter: invert(100%);
}

ul.nav li a:hover img,
ul.nav li a:focus img{
    margin-right:15px;
}
ul.nav li a img{
    display: inline-block;
    width:28px;height:28px;margin:-2px 5px 0 2px;
    background: -webkit-linear-gradient(rgba(0,0,0,.3) 50%,rgba(0,0,0,.4));
    background: -moz-linear-gradient(rgba(0,0,0,.3) 50%,rgba(0,0,0,.4));
    background: -o-linear-gradient(rgba(0,0,0,.3) 50%,rgba(0,0,0,.4));
    background: linear-gradient(rgba(0,0,0,.3) 50%,rgba(0,0,0,.4));
    border-radius: 15px;
    vertical-align: middle;
    
}

/*
Ajout des transitions
*/
#vdo-4 ul.nav li a img,
#vdo-4 ul.nav li a img{
    -webkit-transition: margin-right .5s;
       -moz-transition: margin-right .5s;
         -o-transition: margin-right .5s;
            transition: margin-right .5s;
}