JSFiddle - React, Tailwind, and code Playground

HTML

<div id="nav">
   <ul>
       <li class="first"><a id="testa" href="#"><img src="images/accueil.png" id="a" alt="#"> </a></li>
       <li><a id="testb" href="#"><img src="images/portfolio.png" id="a" alt="#"></a></li>
       <li><a id="testb" href="#"><img src="images/compétence.png" id="a" alt="#"></a></li>
       <li><a id="testb" href="#"><img src="images/contact.png" id="a" alt="#"></a></li>
   </ul>
     </div>

CSS

#nav ul {
list-style : none;
}
#nav li {
margin-left:30px;
padding:0;
display:inline-block;
    *display:inline;
    zoom:1;
}
#nav li.first {
    margin-left:0;
}
#nav  {
text-align:center;
    margin:0 auto;
}