JSFiddle - React, Tailwind, and code Playground

by Sub Lines

HTML

<div id="masthead">
        <div id="name">Ryu Hyabusa</div>
        <ul class="menu">
            <li>item one</li>
            <li>item two</li>
            <li>item three</li>
            <li>item four</li>
        </ul>
    </div>

    <div id="content">
        <p>there is some content here</p>
    </div>

CSS

#masthead {
  position: fixed;
  background-color: yellow;
  width: 98%;
}

#name {
  font-weight: bold;
  font-size: 24px;
  float: left;
}

.menu {
  margin:0;
  /* line-height:28px; Try this to vertically center the list. */
}

.menu li {
  list-style-type: none;
  display: inline;
  padding-left: 20px;
  float: right;
}

#content {
  padding-top: 50px;
  text-align: center;
}