JSFiddle - React, Tailwind, and code Playground

HTML

<header>
      <div id="headerbar" class="container clearfix">
        <a href="#" class="logo">Logo</a>
        <a href="#" class="post">Post</a>
      </div>
    </header>

CSS

body {
      padding: 0;
      margin: 0;
      background-color: white;
      font-family: sans-serif;
    }
    
    header {
      display: block;
      padding: 20px;
      background-color: #F9F9F9;
    }
    
    #headerbar {
      position: relative;
    }
    
    .container {
      width: 80%;
      max-width: 1000px;
      margin: 0 auto;
    }
    
    .logo {
      float:left;
    }
    
    .post {
      float:right;
    }
    
.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}