JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
		<div id="head">
			<head>
				<title>4</title>
				<link rel="stylesheet" href="4.css" type="text/css" media="all">
				<meta charset="UTF-8" />
				<meta name="viewport" content="width=device-width, initial-scale=1.0">
			</head>
		</div>
		
	<div id="container">
	
		<div id="header">
			
			<div id="topnavigation">
				<ul>
					<li class="topnavigationbutton">
						<a href="#">Blog</a>
					</li>
					<li class="topnavigationbutton">
						<a href="#">Map</a>
					</li>
					<li class="topnavigationbutton">
						<a href="#">About</a>
					</li>
				</ul>
			</div>	
			
		</div>
		
		<div id="welcomebanner">
			
			<div id="aboutme">
			</div>
			
		</div>
		
		<div id="recententriessection">
			
			<div id="recententriessection_text">
				<h2>Recent Entries</h2>
			</div>
			
		</div>
		
		<div id="body">

			<div id="recententries">
				<div class="homepagepost">1</div>
				<div class="homepagepost">2</div>
				<div class="homepagepost">3</div>
			</div>
			
		</div>
		
		<div id="footer">
			
			<div id="footercopyright">
				<h2>Copyright &copy; 2017</h2>
			</div>
			
		</div>
		
	</div>
	
</html>

CSS

* {
	margin: 0 auto;
	padding: 0;
	box-sizing: border-box;
}

#container {
	width: calc(100vw); max-width: 4000px;
	
	background: #EEE9E8;
}
	
	#header {
		width: inherit; max-width: inherit;
		height: calc(5vh); max-height: 112.5px;
	}
		#topnavigation {
			width: inherit; max-width: inherit;
			height: inherit; max-height: inherit;
			
			background: #512A09;
			
			position: fixed;
			z-index: 100;
			
			font-size: 18px;
			
			display: flex;
			justify-content: center;
		}
			#topnavigation ul {
				height: inherit; max-height: inherit;
				
				list-style-type: none;
				
				overflow: hidden;
			}
			#topnavigation li {
				height: inherit; max-height: inherit;
				
				float: left;
				
				vertical-align: middle;
			}
			#topnavigation li a {
				height: inherit; max-height: inherit;
				width: calc(20vh); max-width: 800px;
				
				display: table-cell;
				vertical-align: middle;
				
				color: white;
				text-align: center;
				text-decoration: none;
				text-transform: uppercase;
				
				font-size: 2vh;
			}
			#topnavigation li a:hover {
				background: green;
			}
	
	#welcomebanner {
		width: calc(100vw); max-width: 4000px;
		height: calc(70vh); max-height: 1575px;
					
		background: teal;
		
		position: relative;
		z-index: 10;
	}
		#aboutme {
			width: calc(50vw); max-width: 2000px;
			height: calc(30vh); max-height: 675px;
						
			background: blue;
			
			position: relative;
			top: 70%;
			z-index: 50;
		}
	
	#recententriessection {
		width: calc(25vw); max-width: 1000px;
		height: calc(6vh); max-height: 135px;
			
		background: red;
			
		margin-top: 7.5%;
			
		text-align: center;
		text-transform: uppercase;
	}
		#recententriessection_text {
			position: relative;
			top: 50%;
			transform: translateY(-50%);
		}
		
	#body {
		width: calc(100vw); max-width: 4000px;

		margin-top: 2%;
		margin-bottom: 1%;
	}
		.homepagepost {
			width: calc(70vw); max-width: 2800px;
			height: 100px;
			
			background: green;
			margin: 2%...