JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper">
	
		<div id="content">
	
			<div id="parent" class="clearfix">
			
				<div id="image1">								
				</div>
				<div id="image2">								
				</div>
				<div id="image3">								
				</div>
				<div id="image4">								
				</div>
			
			</div>
		
		</div>
	
	</div>

CSS

#wrapper, #wrapper *{box-sizing:border-box;}
#wrapper {
	background:pink; 
	border:5px red solid;
  width:100vw;
  height:100vh;
	}

#container {
	background:fuchsia; 
	border:5px purple solid;
	}
			
#content {
	background:aqua; 
	border:5px blue solid;
}
			
#parent {
	background:lime; 
  border:5px green solid; 
	}
  
#container, #content, #parent{width:100%;height:100%;}
#image1, #image2, #image3, #image4 {
  border:5px orange solid;
	float:left;
  width:50%;
  height:50%;
	/* set and center a background image to the div */
	background-image: url("http://dev.bowdenweb.com/tools/i/pixelgrid.png");
	background-position: center;
  }  
  
.clearfix:after {
	  content: "";
	  display: table;
	  clear: both;
	}