JSFiddle - React, Tailwind, and code Playground

HTML

<div id="header"></div>
			<div id="mid"></div>
	<div id="footer"></div>

CSS

#header{
	width: 100%;
	height: 150px;
	background-color: rgb(181,230,29);
}
#footer{
	width: 100%;
	height: 150px;
	background-color: rgb(153,217,234);
}
#mid{
    position: relative;
    top: -125px;
    left: calc(50% - 75px);
    float: left;
    width: 150px;
    height: 250px;
    background-color: rgb(200, 191, 231);
}