JSFiddle - React, Tailwind, and code Playground

HTML

<nav class="site-navigation main-navigation" role="navigation">
    <div class="menu-menu-1-container">
        <ul class="menu" id="menu-menu-1">
            <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-19" id="menu-item-19"><a href="http://www.studiosoek.com/hello/">Hello</a>
            </li>
            <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-has-children menu-item-20" id="menu-item-20"><a href="http://www.studiosoek.com/category/work/">Work</a>

            </li>
            <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-18" id="menu-item-18"><a href="http://www.studiosoek.com/contact/">Contact</a>
            </li>
        </ul>
    </div>
</nav>

CSS

.main-navigation {
    clear: both;
    display: block;
    width: 100%;
    top: 50%;
    margin-top: 150px;
    font-family: arial;
    text-align: center;
    text-transform: uppercase;
}
.main-navigation ul {
    list-style: none;
    margin: 0;
    padding-left: 0;
}
.main-navigation li {
    position: relative;
}
.main-navigation a {
    display: block;
    text-decoration: none;
    color: black;
    font-weight: bold;
    letter-spacing: 0.45em;
    line-height: 4.5em;
    text-decoration: underline;
}