JSFiddle - React, Tailwind, and code Playground

HTML

<header>
    <h1>Header</h1><h2> | chapter</h2>
</header>

<nav>
    <ul id="menu" class="clearfix">
        <li><a href="#">alpha</a></li>
        <li><a href="#">beta</a></li>
        <li><a href="#">gamma</a></li>
        <li><a href="#">delta</a></li>
    </ul>
</nav>

CSS

header{
    background-color: green;
    border: 1px solid purple;
    width: 100%;
    height: auto;
}
nav{
    background-color: pink;
    border: 1px solid grey;
    width: 100%;
    height: auto;
}
h1, h2{
    display: inline;
}
/*Set li as buttons*/
#menu li{
    float: left;
    list-style-type: none;
    width: 5em;
    margin-left: -2.5em; /*Removes default indentation of lists*/
    margin-right: 5em;
    display: block;
}
/*display anchor tags as buttons*/
#menu a{
    display: block;
    background-color: white;
    border: 3px solid blue;
    text-align: center; 
    text-decoration: none;
    color: black;
}
/*display setting on button hover*/
#menu a:hover{
    color: white;
    background-color: black;
}

.clearfix:after {
     visibility: hidden;
     display: block;
     font-size: 0;
     content: " ";
     clear: both;
     height: 0;
     }
.clearfix { display: inline-block; }
/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* close commented backslash hack */