JSFiddle - React, Tailwind, and code Playground

HTML

<div class="bg-green">
</div>
<div class="content">
this is the "body" of my page (kind of a wrapper) it needs to be like this (with negative margin top)
</div>

<footer>this is the footer</footer>

CSS

.bg-green{
  width:100%;
  height:100px;
  background-color:green;
}

.content{
  width:80%;
  height:300px;
  margin:-50px auto;
  background-color:gold;
  text-align:center;
  padding-top:100px;
}

footer{
  width:100%;
  height:65px;
  margin-top: -65px;
  background-color:red;
  opacity:0.5;
  position: absolute;
  bottom: 0
}
body {
  margin: 0;
  min-height: 100%;
  padding-bottom: 100px;
  position: relative;
  box-sizing: border-box;
}
html {
  height: 100%;
}