JSFiddle - React, Tailwind, and code Playground

HTML

<div class="flex">
    <div class="head"><p>logo</p></div>
    <div class="content"><p>text</p></div>
    <div class="footer"><p>copyright</p></div>
</div>

CSS

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

.flex {
    min-height: 100%;
    background: red;
    
    display: -webkit-box;
	display: -moz-box;
	display: box;

	-webkit-box-orient: vertical;
	-moz-box-orient: vertical;
	box-orient: vertical;
}
.head {
    height: 250px;
}
.content {
    -webkit-box-flex: 1;
	-moz-box-flex: 1;
	box-flex: 1;
    background-color: #99ccff;
}
.footer {
    height: 100px;
    background-color: #336699;
}