JSFiddle - React, Tailwind, and code Playground

HTML

<h2>Demo transition déclenchements (:hover)</h2>
<div id="vdo-3">
<ul class="nav">
    <li><a href="#"><img src="http://dev.iamvdo.me/icones1.png" />Videos</a></li>
    <li><a href="#"><img src="http://dev.iamvdo.me/icones2.png" />Games</a></li>
    <li><a href="#"><img src="http://dev.iamvdo.me/icones3.png" />Music</a></li>
    <li><a href="#"><img src="http://dev.iamvdo.me/icones4.png" />Settings</a></li>
</ul>
</div>lokiolilkiolkiollloloiliolkiololiklolilkilolo

CSS

body{
    padding: 70px;
    font: 1em sans-serif;
}
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;
    background: -webkit-linear-gradient(rgba(255,255,255,.3),transparent), #C3F051;
    background: -moz-linear-gradient(rgba(255,255,255,.3),transparent), #C3F051;
    background: -o-linear-gradient(rgba(255,255,255,.3),transparent), #C3F051;
    background: linear-gradient(rgba(255,255,255,.3),transparent), #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{
    background: #FAA3AA;
    background: -webkit-linear-gradient(rgba(255,255,255,.4),transparent), #FAA3AA;
    background: -moz-linear-gradient(rgba(255,255,255,.4),transparent), #FAA3AA;
    background: -o-linear-gradient(rgba(255,255,255,.4),transparent), #FAA3AA;
    background: linear-gradient(rgba(255,255,255,.4),transparent), #FAA3AA;
}
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-3 ul.nav li...