JSFiddle - React, Tailwind, and code Playground

HTML

<body>
<header>
<h1>Main Title Goes Here</h1>
<ul>
	<li><a href='#'>Category</a></li>
	<li><a href='#'>Category</a></li>
	<li><a href='#'>Category</a></li>
	<li><a href='#'>Category</a></li>
</ul>
</header>
</body>

CSS

body,header,h1,ul{
margin:0;
color:#666;
}
*{
    -moz-box-sizing:border-box;
    box-sizing:border-box;
}
header{
background:#ddd;
border-bottom:2px solid #666;
    position:absolute;
    bottom:0;
    left:0;
}

h1{
display:inline-block;
padding:.5em 1em;
font:bold 2em arial;
    width:39%;
}

ul{
display:inline-block;
list-style:none;
    width:60%;
}

ul li{
float:right;
}

ul li a{
font:bold 1.2em arial;
color:#666;
text-decoration:none;
display:block;
padding:.2em .4em;
margin-left:.5em;
}

ul li a:hover{
color:#000;
border-color:#000;
}