JSFiddle - React, Tailwind, and code Playground

by blineberry

HTML

<div id="c-app">
<div id="c-home">
  <div id="logo">
    <img src="https://placehold.it/1080x986"  />  
  </div>
  <nav id="nav">
    <button id="people">
      <span class="img" style="background-image: url(https://placehold.it/201x187)"></span>
      <span class="label">People</span>
    </button>
    <button id="places">
      <span class="img" style="background-image: url(https://placehold.it/114x204)"></span>
      <span class="label">Places</span>     
    </button>
    <button id="schedule">
      <span class="img" style="background-image: url(https://placehold.it/181x205)"></span>
      <span class="label">Schedule</span>
    </button>
  </nav>
</div>
</div>

SCSS

body {
  margin: 0;
}

body * {
  box-sizing: border-box;
  border: 1px dotted black;
}

#c-app {
  width: 100%;
  height: 100vh;
}

#c-home {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
}

#logo {
  height: 78%;
  overflow: hidden;
  align-items: center;
  justify-content: center;
  display: flex;
  
  img {
    max-width: 100%;
    max-height: 100%;
  }
}

#nav {
  display: flex;
  height: 22%;
  min-height: 10em;
  
  & > button {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1em;
    width: 33%;
    
    .label {
      padding: 3em 0 0;
    }
    
    .img {
      flex-grow: 1;
      width: 100%;
      background-size: contain;
      background-position: center;
      background-repeat: no-repeat;
    }
  }
}