JSFiddle - React, Tailwind, and code Playground

HTML

<html>
  <body>
    
    <div class="layout">
      <div class="col-left"></div>
      <div class="col-top-center"></div>
      <div class="col-top-right"></div>
      <div class="col-bottom-center"></div>
      <div class="col-bottom-right"></div>
    </div>
    
  </body>
</html>

CSS

* { 
	margin: 0;
	padding: 0;
	}
	
	html { 
		height: 100%;
		}
		
		body { 
			height: 100%;
			}
			
			/* layout */			
			.layout { 
				position: relative;
				height: 100%;
				}
			
				.col-left,
				.col-top-center,
				.col-top-right,
				.col-bottom-center,
				.col-bottom-right { 
					position: absolute;
					height: 50%;
					}
				
				.col-left { 
					left: 0;
					top: 0;
					width: 40%;
					height: 100%;
					
					background: #f00;
					}
				.col-top-center { 
					left: 40%;
					top: 0;
					width: 30%;
					
					background: #0f0;
					}
				.col-top-right { 
					top: 0;
					right: 0;
					width: 30%;
					
					background: #00f;
					}
				.col-bottom-center { 
					left: 40%;
					bottom: 0;
					width: 30%;
					
					background: #ff0;
					}
				.col-bottom-right { 
					right: 0;
					bottom: 0;
					width: 30%;
					
					background: #f0f;
					}