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;
  background-color:red;
  opacity:0.5;
}