JSFiddle - React, Tailwind, and code Playground

HTML

<div id="navigation">
    <ul id="nav_buttons">
        <a href="firstpage.html"> 
            <li class="navbutton" id="home">
                Home
            </li>
        </a>
        <a href="contactpage.html">
            <li class="navbutton" id="contact">
                Contact Me
            </li>
        </a>
        <a href="resume.html">
            <li class="navbutton" id="resume">
                Resumé
            </li>
        </a>
        <a href="resume.html">
            <li class="navbutton" id="projects">
                Projects
            </li>
        </a>
    </ul>
</div>

CSS

#navigation
{
width: 100%;
}
#nav_buttons
{
margin-left: 28%;
width: 100%;
}
.navbutton
{
line-height: 150%;
font-size: 24px;
background-color: #7373AF;
height: 42px;
width: 120px;
display: inline-block;
color: white;
text-align: center;
font-family: 'Lato', Tahoma;
overflow: hidden;
text-overflow: ellipsis;
z-index: 1;
position: relative;
float: left;
vertical-align: top;
border-left: 2px solid black;
border-right: 2px solid black;
}
.navbutton:hover
{
background-color: #68689E;
}
#projects
{
margin-right: 0px;
margin-left: 0px;
border-right: 0px solid black;
}
#home
{
border-left: 0px solid black;
}