JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="level1">
    <li>
        <a class="level1 selected" href="home.aspx">
            <div class="nav_style">
                <span>home</span> 
            </div>
        </a>
    </li>
    <li>
        <a class="level1" href="what-it-can-do.aspx">
            <div class="nav_style">
                <span>what it can do</span> 
            </div>
        </a>
    </li>
    <li>
        <a class="level1" href="#">
            <div class="nav_style">
                <span>pricing</span> 
            </div>
        </a>
    </li>
    <li>
        <a class="level1" href="#">
            <div class="nav_style">
                <span>news & events</span> 
            </div>
        </a>
    </li>
    <li>
        <a class="level1" href="#">
            <div class="nav_style">
                <span>partner with us</span> 
            </div>
        </a>
    </li>
    </ul>

CSS

li{
    background-color: none;
    list-style: none;
    float: left;
    padding-right: 2%;
}

.nav_selected
     {
     }
.nav_style
     {
         list-style:none;
         font:14px calibri;
         background-color: none;
         padding: 10px;
     }
.nav_style:hover
     {
         background-color:red;
     }
.selected .nav_style{
    background-color: yellow;
}
a{
    text-decoration: none;
}