JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="menu">
        <li> <a href="#"><span>WHAT IS TEAM X?</span></a> </li>
        <li> <a href="#"><span>COMPANY BENEFITS</span></a> </li>
        <li> <a href="#"><span>COMPANY, COMPANY DATA</span></a> </li>
        <li> <a href="#"><span>TEAM CYCAD COVERAGE</span></a> </li>
        <li> <a href="#"><span>COMPANY2 </span></a> </li>
        <li> <a href="#"><span>COMPANY3 </span></a> </li>
        <li> <a href="#"><span>LATEST CAMPAIGNS</span></a> </li>
        <li> <a href="#"><span>CONTACT</span></a> </li>
    </ul>

CSS

.menu {
        float: left;
        margin: 0px 0px 0px 0px;
        width: 720px;
    }
    .menu li {
        display: table;
        float: left;   
    }
    .menu li span {
        height: 52px;
        display: table-cell;
        vertical-align: middle;
    }
    .menu li a {
        width: 86px;
        height: 52px;
        padding: 15px 0px 15px 4px;
        float: left;
        color: #fff;
        font-size: 14px;
        font-weight: bold;
        text-decoration: none;
        background-color: #ccc;
    }
    .menu li a:hover {
        background-color: #000;
    }