JSFiddle - React, Tailwind, and code Playground

HTML

<div class="nav-bar">
    <h1>
        topbar
    </h1>
    <ul>
        <li>one</li>
        <li>tow</li>
        <li>three</li>
    </ul>
</div>
<div class="content">
    <h2>content</h2>
    <p>hi hello ouyasd asdasda dasdasd</p>
     <p>hi hello ouyasd asdasda dasdasd</p>
     <p>hi hello ouyasd asdasda dasdasd</p>
     <p>hi hello ouyasd asdasda dasdasd</p>
</div>

CSS

.nav-bar{
    height:50px;
    overflow:hidden;
     background-color:#000;
     width:100%;
     position:fixed;
     top:0px;
     left:0px;
 }

.nav-bar h1{
    float:left;
    color:#fff;
    line-height:50px;
    margin:0px;
}
.nav-bar ul{
 float:left;
    overflow:hidden;
}
.nav-bar ul li{
 float:left;
    color:#fff;
    list-style:none;
    padding:0 15px;
    text-align:center;
}



.content{
    margin-top:75px;
}

.content h2{
    color:#222;
}
p{
    margin-top:15px;
    font-size:14px;
    color:#000;
}