JSFiddle - React, Tailwind, and code Playground

by Denis Tverdokhlebov

HTML

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <title>Document</title>
  </head>

  <body>
    <div class="wrapper">
      <header class="header">Header</header>
      <main class="main">Main BOX</main>
      <footer class="footer">Footer</footer>
    </div>
  </body>

</html>

CSS

* {
  padding: 0;
  margin: 0;
  border: 0;
  box-sizing: border-box;
}
body, html {
  line-height: 1;
  font-size: 24px;
  background-color: #333;
  color: #fff;
  height: 100%;
}
.wrapper {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}
.header {
  background-color: #794f45;
  text-align: center;
}
.main {
  padding: 30px;
  flex: 1 1 auto;
}
.footer {
  text-align: center;
  background-color: #77608d;
}