JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrap">
    <h1 class="test"> Blah Blah </h1>
    <ul class="main_navigation">
        <li><a href="#"> Blog </a></li>
        <li><a href="#"> Facebook </a></li>
        <li><a href="#"> Twitter </a></li>
        <li><a href="#"> About </a></li>
    </ul>
</div>

CSS

.wrap
{
    width: 1000px;
    height: 800px;
    margin: auto;
    background-color: black;
    color: white;
    font-family: sans-serif;
    text-align: center;
}

.main_navigation li
{
    display: inline;
    list-style: none;
    padding-right: 50px;

}

.main_navigation li a
{
    color: white;
    text-decoration: none;  
    border-style: solid;
    border-color: green;
    padding: 5px;
}

.main_navigation li a:hover 
{
    color: 339900;
    border-color: 339900;

}