JSFiddle - React, Tailwind, and code Playground

by Abdul Ahmad

HTML

<nav class='nav'>
  <div class='content'>
    <div class='image-wrap'>
      <img src='https://upload.wikimedia.org/wikipedia/commons/thumb/a/ab/Android_O_Preview_Logo.png/1024px-Android_O_Preview_Logo.png' />
    </div>
  </div>
</nav>

SCSS

html, body {
  margin: 0;
  padding: 0;
  background: tomato;
}

.nav {
  padding: 20px 0;
  background: white;
}

.image-wrap {
  width: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
  
  img {
    width: 100%;
    height: auto;
  }
}

.content {
  margin: 0 auto;
  width: calc(100% - 40px);
  max-width: 1000px;
  display: flex;
}