JSFiddle - React, Tailwind, and code Playground
HTML
<nav class="menuMobile">
<ul>
<li><span><img src="https://upload.wikimedia.org/wikipedia/commons/d/d8/Instagram_Shiny_Icon.svg"><a href="#">ACCUEIL</a></span></li>
<li><span><img src="https://upload.wikimedia.org/wikipedia/commons/d/d8/Instagram_Shiny_Icon.svg"><a href="#">MUSIQUE</a></span></li>
<li><span><img src="https://upload.wikimedia.org/wikipedia/commons/d/d8/Instagram_Shiny_Icon.svg"><a href="#">FILMS</a></span></li>
<li><span><img src="https://upload.wikimedia.org/wikipedia/commons/d/d8/Instagram_Shiny_Icon.svg"><a href="#">CONTACT</a></span></li>
<!--
<li><img src="https://upload.wikimedia.org/wikipedia/commons/d/d8/Instagram_Shiny_Icon.svg"><a href="#musiques">MUSIQUES</a></li>
<li><img src="https://upload.wikimedia.org/wikipedia/commons/d/d8/Instagram_Shiny_Icon.svg"><a href="#films">FILMS</a></li>
<li><img src="https://upload.wikimedia.org/wikipedia/commons/d/d8/Instagram_Shiny_Icon.svg"><a href="#bio">BIO</a></li>
<li><img src="https://upload.wikimedia.org/wikipedia/commons/d/d8/Instagram_Shiny_Icon.svg"><a href="#contact">CONTACT</a></li> -->
</ul>
</nav>
CSS
.menuMobile ul{
/* reset */
list-style: none;
padding: 0;
margin: 0;
width: 30%;
/* position */
position: fixed;
top: 0;
right: -100px;
/* bordure
border: 1px solid red; */
}
.menuMobile ul li{
/*display*/
display: flex;
align-items: center;
justify-content: flex-end;
position: relative;
/*border: 1px solid green;*/
}
.menuMobile span{
display: inherit;
align-items: center;
justify-content: flex-start;
width: 50%;
}
.menuMobile img{
width: 35px;
align-items: center;
}
.menuMobile li a{
text-decoration: none;
color: green;
}
JavaScript
$(document).ready(function(){
$('.menuMobile li img').mouseenter(function(){
var p = $(this).parents('li');
p.css('justify-content', "flex-start")
});
$('.menuMobile li').mouseleave(function(){
var p = $(this);
p.css('justify-content', 'flex-end');
})
});