JSFiddle - React, Tailwind, and code Playground

HTML

<div class='header-container'>
  <div class='header'>
    <div class='logo'>
      <img src='assets/logo.png'>
    </div>
    <div class='menu'>
      <ul>
        <li>
          <a href='#'>Home</a>
        </li>
        <li>
          <a href='#'>Features</a>
        </li>
        <li>
          <a href='#'>Pricing</a>
        </li>
        <li>
          <a href='#'>Team</a>
        </li>
        <li>
          <a href='#'>Support</a>
        </li>
      </ul>
    </div>
    <a href='#'>Login</a>
  </div>
</div>
<div class='container'></div>
<div class='footer'></div>

CSS

/* line 1, ../../app/assets/stylesheets/menu.css.scss */
.header-container {
  width: 100%;
  min-height: 15%;
  background: url(menubg.jpg) no-repeat;
}
/* line 10, ../../app/assets/stylesheets/menu.css.scss */
.header-container .header {
  width: 70%;
  margin: 0 auto;
  padding: 2% 2% 4% 2%;
  border: 1px solid red;
}
/* line 16, ../../app/assets/stylesheets/menu.css.scss */
.header-container .header .logo {
  border: 1px solid orange;
  display: block;
  margin-right: 2%;
  float: left;
}
/* line 23, ../../app/assets/stylesheets/menu.css.scss */
.header-container .header ul {
  float: left;
  overflow: auto;
  border: 1px solid green;
}
/* line 27, ../../app/assets/stylesheets/menu.css.scss */
.header-container .header ul li {
  display: inline;
  float: left;
  border: 1px solid blue;
  margin-right: 2%;
}
/* line 35, ../../app/assets/stylesheets/menu.css.scss */
.header-container .header a {
  float: right;
}