JSFiddle - React, Tailwind, and code Playground

HTML

<body>
<div class="header">Header</div>
<div class="body"></div>
<div class="footer">Footer</div>
</body>

CSS

* {
	padding: 0;
	margin: 0;
}
html, body {
	height: 100%;
}
.header {
  background: #888;
}
.body {
  background: #fff;
}
.bottom {
  background: #ccc;
}
.footer {
  background: #888;
}

JavaScript

$(window).on("resize", function () {
    var a = $("body").outerHeight();
    var b = $(".header").outerHeight(true);
    var c = $(".footer").outerHeight(true);
    var d = $(".bottom").outerHeight(true); // mising
    $(".body").css("min-height", a - b - c - d);
  }).trigger("resize");