JSFiddle - React, Tailwind, and code Playground

HTML

<div id="envoltura"></div>
<div id="uno">DIV 1</div>
<div id="dos">DIV 2</div>
<div id="tres">DIV 3</div>
<div id="cuatro">DIV 4</div>
<div id="cinco">DIV 5</div>

CSS

body, html { height:100%; 
  margin:0; 
  padding:0;
  width:100%; 
  background-color:silver;
  text-align: center;
  }

#envoldura {
  border:1px solid black;
  width:99%;
  height:99%;    
  margin:auto;     
  text-align:center;
  font-size:300%;
}

#uno {
  border:1px solid black;
  width:49%;
  display:inline-block;     
  margin:auto;     
  height:49%;    
  background-color:red;
}

#dos {
  border:1px solid black;
  width:49%;
  display:inline-block;
  height:49%;    
  background-color:blue
}

#tres {
  border:1px solid black;
  width:49%;
  display:inline-block;
  height:49%;    
  background-color:green;
}

#cuatro {
  border:1px solid black;
  width:49%;
  display:inline-block;
  height:49%;    
  background-color:yellow;
}
  
#cinco{
  width: 200px;
  height: 200px;
  position: fixed;
  margin: -100px 0 0 -100px;
  background: cyan;
  top: 50%;
  left: 50%;
  border: 1px solid black;
}