JSFiddle - React, Tailwind, and code Playground

HTML

<div id='menu'>
    <ul>
        <li class='active'><a href='#'><span>Home</span></a>
        </li>
        <li><a href='#'>XML</a>
        </li>
        <li><a href='#'>SQL</a>
        </li>
        <li><a href='#'>Java</a>
        </li>
        <li><a href='#'>C#</a>
        </li>
    </ul>
</div>

CSS

#menu {
        height:37px;
        display:block;
        margin:20px auto;
        border:1px solid;
        border-radius:5px;
        max-width:550px;
    }
    #menu * {
        box-sizing: border-box;
    }
    #menu ul {
        height: 100%;
        margin:0;
        padding:0;
    }
    #menu li {
        float:left;
        display:block;
        min-width:110px;
        height: 100%;
        border-right: 1px solid black;
        background-color:#5A8A41;
    }
    #menu li:last-child {
        border: none;
    }
    #menu a {
        display:block;
        width: 100%;
        height: 100%;
        font:bold 13px/100% Arial, Helvetica, sans-serif;
        text-align:center;
        text-decoration:none;
        text-shadow:2px 2px 0 rgba(0, 0, 0, 0.8);
        color:#fff;
        line-height: 37px;
    }
    #menu li:nth-child(1):hover {
        background: red;
    }
    #menu li:nth-child(2):hover {
        background: blue;
    }
    #menu li:nth-child(3):hover {
        background: purple;
    }
    #menu li:nth-child(4):hover {
        background: yellow;
    }
    #menu li:nth-child(5):hover {
        background: pink;
    }