JSFiddle - React, Tailwind, and code Playground

HTML

<div class="menu_nav">
    <ul style="font-family:Ubuntu">
        <li><a href="index.html">Home</a>
        </li>
        <li><a href="activities.html">Activities</a>
        </li>
        <li><a href="games.html">Games</a>
        </li>
        <li><a href="about.html">About Us</a>
        </li>
        <li><a href="contact.html">Contact Us</a>
        </li>
    </ul>
</div>

CSS

.menu_nav {
    text-transform: uppercase;
    margin: 0 auto;
}
.menu_nav ul {
    list-style: none;
    margin: 0 auto;
    text-align:center;
}
.menu_nav ul li {
    margin: 0 auto;
    padding: 0 auto;
}
.menu_nav ul li a {
    display:block;
    margin: 0 auto;
    padding:35px 50px;
    color:#000;
    text-decoration:none;
    font-size:20px;
}