JSFiddle - React, Tailwind, and code Playground

HTML

<div class='image'></div>
<div class='fourty'></div>
<div class='sixty'></div>

CSS

html { height: 100%; }

body {
 margin-top: 85px;
 /* min-height: 100%; */
 height: 100%;
 background-color: aqua;
}

.image {
  content: image_url('something.jpg');
  width: 100%;
  height: auto;
  border: 1px dashed red;
}

/*I'm assuming the padding I'm setting is a percentage of the .fourty
  div not the overall body. Granted, width is 100%.*/
.fourty{
  padding: 4% 8%;
  /* min-height: 40%; */
  height: 40%;
  width: 100%;
  border: 1px dashed green;
}

.sixty{
  padding: 4% 8%;
  /* min-height: 60%; */
  height: 60%;
  width: 100%;
  border: 1px dashed blue;
 }