JSFiddle - React, Tailwind, and code Playground

HTML

<nav>
  Nav
</nav>
<main>
<section class="container">
  <div class="text">
    <p>title</p>
  </div>
   <div class="imageWrap">
     <div class="image"></div>
  </div>
</section>

<section class="container">
  <div class="text">
    <p>hello</p>
  </div>
   <div class="imageWrap">
     <div class="image"></div>
   </div>
</section>
</main>

CSS

nav{
  background:grey;
  width:100%;
  height: 100px;
  position:fixed;
}
main{
  padding-top: 100px;
}
.container{
    display:flex;
		flex-flow: column nowrap;
		height: calc(100vh - 100px);
    background: green;
    border: 3px solid brown;
}
.imageWrap {
  flex: 1;
  display:flex;
  border: 1px solid blue;
}
.image {
  flex: 1;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url(https://s-media-cache-ak0.pinimg.com/736x/d1/a6/64/d1a664bca214bf785a293cbc87950fc4.jpg)
}
.text{
    background: yellow;
}