JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <p class="header">header</p>
    <p class="main">main content</p>
    <p class="footer">footer</p>
</body>

CSS

.header,
.footer {
  color:#E8FFD2;
  border:1px solid #ccc;
  text-align:center;
/*  height:100px;*/
  background:#756060;
}

.header,
.main,
.footer {
    width: 90%;
    padding: 10px;
    margin: auto;
}

.header { margin-bottom: 2rem; }
.footer {margin-top: 2rem; }