JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="menu"> 
                    <li><a href="index.html">Home</a></li> 
                    <li><a href="miembros.html">Miembros</a></li> 
                    <li><a href="reclutamiento.html">Reclutamiento</a></li> 
                    <li><a href="guias.html">Guias</a></li> 
                    <li><a href="descargas.html">Descargas</a></li> 
                    <li><a href="foro.html">Foro</a></li> 
            </ul>

CSS

#menu li{ 
    display: inline-block; 
    padding: 4px 7px; 
    margin: 0px; 
    border: solid 1px white; 
    border-radius: 18px; 
    text-shadow: 3px 3px 5px black; 
 
    -webkit-transition: width 2s, background-color 1s, -webkit-transform 2s; 
} 

#menu li:hover{ 
    background-color: black; 
    width: 60px; 
    -webkit-transform: rotate(360deg); 
    text-shadow: 3px 3px 3px black;     
}