JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
<title>test</title>
</head>
<body>
  <main>
    <div class="content">
    </div>
  </main>
  <footer>
  </footer>
</body>
</html>

CSS

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background: white;
}

main {
  width: 100%;
  min-height: calc(100% - 60px);
  position: relative;
  background: whitesmoke;
}

.content {
  padding: 60px 0 0 0;
  min-height: 60px;
  width: 100%;
  background: gray;
}

footer {
  width: 100%;
  height: 60px;
  background: orange;
}