JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<!doctype html>
	<title>map</title>

<body onload="initMap()">
	<div class="content">
		<div class="top_block block_1">
			<div class="content">
			Header:
			</div>
		</div>
		<div class="background block_3">
		</div>
		<div class="right_block block_3">
			<div class="content">
			Right:
			</div>
		</div>
		<div class="background block_4">
		</div>
		<div class="center_block block_4">
			<div class="content">
			Content:
			<div id="map_canvas"></div>
			</div>
		</div>
		<div class="bottom_block block_2">
			<div class="content">
			Footer:
			</div>
		</div>
	</div>

</body>

CSS

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

.content {
	min-height: 100%;
	position: relative;
	overflow: auto;
	z-index: 0; 
}

.background {
	position: absolute;
	z-index: -1;
	top: 0;
	bottom: 0;
	margin: 0;
	padding: 0;
}

.top_block {
	width: 100%;
	display: block; 
}

.bottom_block {
	position: absolute;
	width: 100%;
	display: block;
	bottom: 0; 
}

.left_block {
	display: block;
	float: left; 
}

.right_block {
	display: block;
	float: right; 
}

.center_block {
	display: block;
	width: auto; 
}

.block_1 {
	width: 100%;
	height: 70px;
	background-color: #9999ff;
}

.background.block_3 {
	height: auto !important;
	padding-bottom: 0;
	right: 0;
	width: 344px;
	background-color: #999966;
	margin-top: 70px;
	margin-bottom: 70px; 
}

.block_3 {
	height: auto;
	width: 344px;
	padding-bottom: 70px;
}

.background.block_4 {
	height: auto !important;
	padding-bottom: 0;
	left: 0;
	right: 0;
	background-color: #66ffab;
	margin-top: 70px;
	margin-bottom: 70px;
	margin-right: 344px; 
}

.block_4 {
	width: auto;
	height: auto;
	padding-bottom: 70px;
}

.block_2 {
	width: 100%;
	height: 70px;
	background-color: #999999;
}

#map_canvas {
    width: 100px;
    height: 100px;
}

JavaScript

var map;
                function initMap() {
                    map = new google.maps.Map(document.getElementById('map_canvas'), {
                    center: {lat: -34.397, lng: 150.644},
                    zoom: 8
                    });
                }