JSFiddle - React, Tailwind, and code Playground

HTML

<body>
<div id="bg1" class="div bg">top</div>
<div id="content" class="div">
    help me. seriously.
</div>
<div id="bg2" class="div bg">bottom</div>
</body>

CSS

html,
body {
    width:100%;
    height:100%;
    margin:0;
    padding:0;
}
.div {
box-sizing:border-box; /* Counts padding and border in the height */
margin:0 auto;
border:1px solid black;
text-align: center;
}
.bg {
width:315px;
height:23px;
}
#content {
width:450px; 
height:calc(100vh - 46px); /* Calculates height as 100% of viewport height minus 46px */
}