JSFiddle - React, Tailwind, and code Playground

by Cone

HTML

<div class="menu">
    <ul>
        <li><a href="#"> mini  </a>
        </li>
        <li><a href="#"> tooooo long for haovering  </a>
        </li>
        <li><a href="#"> short </a>
        </li>
    </ul>
</div>

CSS

* {
    padding:0;
    margin:0;
}

ul a {
   text-decoration:none;
    color:black;
}

ul {
    list-style:none;
}
ul li {
    background:silver;;
    padding:0 10px;
    margin-right:1px;
    line-height:200%;
    float:left;
    text-align:center;
}

ul li a:hover {
 text-shadow:0 1px 0 black;
}