JSFiddle - React, Tailwind, and code Playground

HTML

</style>
<div id="header">
<div class="centeer">
<ul>
<li style="font-family: DFKai-SB;"><a href="#">Home</a></li>
<li style="font-family: DFKai-SB;"><a href="#">Shows</a></li>
<li style="font-family: DFKai-SB;"><a href="#">Classic</a></li>
<li style="font-family: DFKai-SB;"><a href="#">More</a></li>
</ul>
    </div>
</div>
<div id="content">
</div>

CSS

body {
font: 0.8em arial, helvetica, sans-serif;
}

#header ul {
list-style: none;
padding: 0;
margin: 0;
}

#header li {
float: right;
border: 1px solid #bbb;
border-bottom-width: 0;
margin: 0;
padding: 0;
}

#header a {
text-decoration: none;
display: block;
background: #eee;
padding: 0.24em 1em;
color: #00c;
width: 8em;
text-align: center;
}

#header a:hover {
background: #ddf;
}

#header #selected {
border-color: black;
}

#header #selected a {
position: relative;
top: 1px;
background: white;
color: black;
font-weight: bold;
}

#content {
border: 1px solid black;
clear: both;
padding: 0 1em;
}

h1 {
margin: 0;
padding: 0 0 1em 0;
}

.centeer {
    display:table;
    margin:0px auto 0px auto;
}