JSFiddle - React, Tailwind, and code Playground

HTML

<nav>
    <div>
        <ul>
            <li><a href="index.html">Home</a>
            </li>
            <li><a href="products.html">Products</a>
            </li>
        </ul>
    </div>
</nav>

CSS

nav {
    width:100%;
    display:block;
}
nav ul {
    border-top: 2px solid #000;
    list-style-type:none;
    margin:0;
    padding:0;
    text-align:center;
    background-color:#c0872e
}
nav li {
    display:inline-block;
    background-color:#c0872e;
}
nav a {
    line-height:35px;
    color:white;
    padding:0 30px;
    font-size:22px;
    font-family:WindsorDemi.fog Cn;
    background-color:#c0872e;
}
nav a:hover {
    text-decoration:none
}