JSFiddle - React, Tailwind, and code Playground

HTML

<header>
  HEADER
</header>

<div id="slider" class="container-fluid">
SLIDER
</div>

<div id="main_container" class="container">
</div>

<footer>
  FOOTER
</footer>

CSS

html, body {
  height: 100%;
}

body {

}

#slider {
  margin-top: 51px;
  background-color: #efefef;
  z-index: 2;
  height: 400px;
}

#main_container {
  box-shadow: 0px 0px 10px 5px #aeaeae;
  height: 100%;
  z-index: 1;
}

footer {
  z-index: 3;
  width: 100%;
  height: 60px;
  background-color: #f5f5f5;
}