JSFiddle - React, Tailwind, and code Playground

HTML

<input type="checkbox" class="burgerCheckbox"/>
<nav class="menuMobile">
  <ul>
    <li> <a href="#" title="Accueil"> ACCUEIL </a></li>
    <li> <a href="#musiques" title="Musiques"> MUSIQUES </a></li>
    <li> <a href="#films" title="Films"> FILMS </a></li>
    <li> <a href="#bio" title="Bio"> BIO </a></li>
    <li> <a href="#contact" title="Contact"> CONTACT </a></li>
  </ul>
</nav>

CSS

.burgerCheckbox:checked ~ .menuMobile{
  left: -40%;
}

.menuMobile
{
  position: fixed;
  left: 0;
  width: 40%;
  height: 100%;
  transition: left .5s ease;
}