JSFiddle - React, Tailwind, and code Playground

by steve

HTML

<div id="example1">
  <div id="example2">
    Page content: can set height explicitly or height can vary with content. 
      <br /><br />
    Note that the height of #example1 is auto-adjusted to fit the content.
  </div>
  <div id="example3">
    Page footer: same width, 17px margin from #example2. 
  </div>
</div>

CSS

#example1{
  background:yellow;
}

#example2{
  background:green;
  height:153px;
  margin:0 auto;
  width:305px;
}

#example3{
  background:red;
  height:80px;
  margin-left:auto;
  margin-right:auto;
  margin-top:17px;
  width:305px;
}