JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper">
			<div id="mitte">
				<div id="content">
mitte content
				</div>
			</div>
			<div id="rechts">
				<div id="uebersicht">
rechts uebersicht
				</div>
			</div>
			<div id="links">
				<div id="menue">
links menue
				</div>
			</div>
			<div id="unten">
				<div id="fusszeile">
unten fusszeile
				</div>
			</div>
		</div>

CSS

body {
  margin: 0;
  background-color: blue; 
}
#wrapper {
    min-width: 1224px;
    width: 100%;
    min-height: 500px;
    height: auto;
    margin-top: 5%;
}
#mitte {
	width: 50%;
	height: auto;
	background-color: white;
	margin-left: 25%;
	position: absolute; 
}
#content {
	width: 100%;
	height: 1000px; 
}
#rechts {
	width: 20%;
	height: auto;
	background-color: green;
	margin-left: 77.5%;
	position: absolute; 
}
#uebersicht {
	width: 100%;
	height: 500px; 
}
#links {
	width: 20%;
	height: auto;
	background-color: green;
	margin-left: 2.5%;
	position: absolute; 
}
#menue {
	width: 100%;
	height: 500px; 
}
#unten {
	width: 100%;
	height: auto;
	background-color: gray;
	bottom: 0px;
	position: absolute; 
}
#fusszeile {
	width: 100%;
	height: 200px; 
}