JSFiddle - React, Tailwind, and code Playground

HTML

<header>
    <div class="wrapper">
      <div class="logo">
        <h1>Logo</h1>
      </div>
      <div class="navigation">
        <nav>
          <ul>
            <li><a href="#">Main</a></li>
            <li><a href="#">Blog</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Contacts</a></li>
          </ul>
        </nav>
      </div>
    </div>
  </header>
  <div class="welcome">
    <h1>Welcome!</h1>
  </div>

CSS

html, body, ul, h1{
  margin: 0;
  padding: 0;
}

header{
  height: 100px;
  background: #5e7daa;
}

.wrapper{
  max-width: 1024px;
  height: inherit;
  margin: 0 auto;
}

.logo{
  float: left;
  color: #fff;
  line-height: 100px;
}

.navigation{
  float: right;
  line-height: 100px;
  outline: 3px solid violet;
}

.navigation li{
  display: inline-block;
  color: #fff;
  margin-right: 23px;
  font-size: 18px;
  text-transform: uppercase;
}

.navigation a{
  text-decoration: none;
  color: inherit;
  padding: 10px;
  transition: 0.75s ease-out;
  border-radius: 7px;
}

.navigation a:hover{
  background: #b6d2f9;
}

.welcome{
  text-align: center;
}
* {
  
}