JSFiddle - React, Tailwind, and code Playground

HTML

<header>
  <div class="logo">
   Logo
  </div>
  
  <nav class="navigation">
    <a href="#">Home</a>
    <a href="#">FAQ</a>
    <a href="#">Contact</a>
  </nav>
  
  <div class="search">
    <a href="#">Search</a>
  </div>
  
  <div class="login">
   <a href="#">Register</a>
   <a href="#">Login</a>
  </div>
  
</header>

CSS

header {
    width: 100%;
    height: 60px;
    line-height: 60px;
    
    display: flex;
		flex-flow: row wrap;	
		justify-content: space-between;
    
    position: fixed;
    top: 0;
    left: 0;
    
    padding: 0 25px;
    box-sizing: border-box;
    
    background: #ccc;
}