JSFiddle - React, Tailwind, and code Playground

HTML

<nav class="primary">
    <ul class="menu">
      <li><a href="#1"><span class="titre">Un Bouton</span><br /><span class="boutons">Qui ne marche pas du tout</span></a></li>
         <li><a href="#2">DĂ©pannage</a></li>
         <li><a href="#3">Formation</a></li>
      <li><a href="#4">Contact</a></li>
                </ul>
  </nav>

CSS

nav 
{
  background-color: black;
}

.menu {
        float: inside;
        display: block;
        padding-right: 50px;
        padding-left: 50px;
    }
    nav.primary ul li {
    display: inline;
    float: inside;
    position: relative;
    }
    nav.primary ul li a {
    display: inline-block;
    line-height: 15px;
    padding:  0 30px;
    color: #ebebeb;
    text-transform: none;
    text-decoration: none;
    font-weight: bold;
    letter-spacing: 0.08em;
    }
    nav.primary ul li a:hover  span.titre{
        color: green
    }
    nav.primary ul li a:hover span.boutons {
    cursor: pointer;
        color: Aquamarine
    }