JSFiddle - React, Tailwind, and code Playground

by ferz

HTML

<nav class="menu">
  <ul id="yw1">
    <li><a href="#">Aaaaaaaaa</a></li>
    <li><a href="#">Aaaaaaaaa</a></li>
    <li><a href="#">Aaaaaaaaa</a></li>
    <li><a href="#">Aaaaaaaaa</a></li>
  </ul>
</nav>

CSS

ul#yw1
{
    list-style-type: none;
    text-transform: uppercase;
/*        background-clip: padding-box;*/
}

ul#yw1 a
{
    text-decoration: none;
}

ul#yw1 a:visited
{
    color: #fff;
    text-decoration: none;
}

ul#yw1 li
{
    display: inline-block;
    border: 1px solid black;
    padding: 10px;
    margin: -3px;
    color: #fff;
    background-color: #00AA00 ;
}


ul#yw1 li :hover
{
    color: #fff ;
    background-color: #00ff00;
}