JSFiddle - React, Tailwind, and code Playground

by wilsassam

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>index</title>
</head>
<body class="Site">
    <!-- Header -->
<header>
  header
</header>
<!-- Main  Body  -->
<main class="Site-content">
body content
</main>

<!-- Footer -->
<footer>
footer
</footer>

</body>
</html>

CSS

html {
  height: 100%;
}

.Site {
  display: flex;
  flex-direction: column;
  height: 100%; 
  margin: 0
} 
.Site-content {
  flex: 1 auto;
}

footer {
  height: 90px;
  width: 100%;
  background: red;
}

/* html {
  height: 100%;
}
body {
  display: flex;
  flex-direction: column;
  height: 100%;
  margin: 0
} 
.container {
  flex: 1;
}

footer {
  height: 90px;
  width: 100%;
  background: red;
} */