JSFiddle - React, Tailwind, and code Playground

HTML

<div class="coverImg" style="background-image:url(https://cdn.creativelive.com/fit/https%3A%2F%2Fcdn.creativelive.com%2Fagc%2Fcourses%2F5158-1.jpg/640);">
</div>
  
<div class="body-Container">

  <div class="content">
    <div class='section'>
    </div>
    <div class='section'>
    </div>
    <div class='section'>
    </div>
    <div class='section'>
    </div>
    <div class='section'>
    </div>
    <div class='section'>
    </div>
    <div class='section'>
    </div>
    <div class='section'>
    </div>
    <div class='section'>
    </div>
    <div class='section'>
    </div>
    <div class='section'>
    </div>
    <div class='section'>
    </div>
    <div class='section'>
    </div>
    <div class='section'>
    </div>
    <div class='section'>
    </div>

</div>


</div>

CSS

.body-Container {
  position: relative;
  position:fixed;
  width: 100%;
  height: 99vh;
  margin: 0;
  padding: 0;
  border: 3px solid red;
}

.coverImg {
  width: 90%;
  height: 150vh;
  margin: 0 auto;
  border: 3px solid black;
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0;
  margin-bottom: 100vh;
  z-index: 2;
}

.content {
  width: 90%;
  height: 2500px;
  margin: 0 auto;
  position: absolute;
  top: 20px;
  bottom: 0px;
  left: 0px;
  right: 0;
  z-index: 1;
  background-color: skyblue;
}

.section {
  display:block;
  position:relative;
  height: 150px;
  outline: 5px solid #000;
  margin: 15px 30px;
}