JSFiddle - React, Tailwind, and code Playground

by Brett Gaynor

HTML

<html>
  <body>
    <header id="header">
      <figure>
        <img id="header-img" src="https://cdn.shopify.com/s/files/1/0866/9666/files/checkout_logo_4_1024x2_37df55d3-8344-46fb-8913-ea64de22f564_500x.png?v=1509363172">
      </figure>
      <div>
        <h1>Doce Meliponicultura</h1>
        <p>Reconnect with Mother-nature</p>
      </div>
      <nav id="nav-bar">
        <ul>
          <li><a href="#top-features" class="nav-link">Top Features</a></li>
          <li><a href="#products" class="nav-link">Products</a></li>
          <li><a href="#social" class="nav-link">Social</a></li>
        </ul>
      </nav>
    </header>
  </body>
</html>

CSS

<style>
html, body {
  padding: 0;
  margin: 0;
}

a {
  text-decoration: none;
  display: inline-block;
}

#header {
  display: flex;
  background: gold;
  align-items: center;
  justify-content: space-around;
  width: 100%;
}

@media (max-width: 600px) {
  #header {
     flex-direction: column;
  }
}

#header>figure {
  justify-self: flex-start;
  align-self: center;
  max-height: 140px;
}

@media (max-width: 600px) {
  #header>figure {
    justify-self: center;
  }
}

#header>nav {
  justify-self: flex-end;
}

@media (max-width: 600px) {
  #header>nav {
    justify-self: center;
  }
}

</style>