JSFiddle - React, Tailwind, and code Playground

HTML

<nav>
    <ul>
        <li><a target="_parent" href="index.php" class="button">Home</a></li>
        <li><a target="_parent" href="about.html" class="button">About</a></li>
        <li><a target="_parent" href="login/reg.php" class="button">Register</a></li>
        <li><a target="_parent" href="private/" class="button">Member</a></li>
        <li><a target="_parent" href="chat.php" class="button">Chat</a></li>
        <li><a target="_parent" href="http://yo.hostei.com" class="button">URL Shortener</a></li>
        <li><a target="_parent" href="http://sql17.000webhost.com/phpMyAdmin/index.php?db=a7593238_data" class="button">Admin</a></li>
    </ul>
</nav>

CSS

nav {
        text-align:center;
        width:100%;
    }
    ul li {
        list-style:none;
        text-align:center;
        display:inline-block;
    }
    .button {
        text-decoration:none;
        color:#000000;
        padding:10px 20px;
        display: block; /* transform only works on block level elements */
        text-align:center;
    }
    .button:hover {
        -ms-transform:translateY(10px);
        -webkit-transform:translateY(10px);
        transform:translateY(10px);
        background-color:#cccccc;
    }