JSFiddle - React, Tailwind, and code Playground

HTML

<h2>Demo transition déclenchements (état initial + :hover)</h2>
<div id="vdo-5">
  <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>

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-5 ul.nav li a...