JSFiddle - React, Tailwind, and code Playground

HTML

<div class="box box1x1">
      hello
      </div>      
      <div class="box box1x1">
      hello
      </div>  
      <div class="box box2x2">
      sup
      </div> 
      <div class="box box1x1">
      hello
      </div> 
      <div class="box box1x2">
      hello
      </div>
      <div class="box box1x1">
      hello
      </div> 
      <div class="box box2x1">
      hi
      </div>
      <div class="box box2x2">
      sup
      </div>

CSS

.box {
  float: left;
  /*display: inline-block;*/
  box-sizing: border-box;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;

  border: solid;
  border-color: white;

  padding: 5px;
}

.box1x1 {
  height: 200px;
  width: 200px;
  
  color: white;
  background-color: red;
}

.box2x1 {
  height: 200px;
  width: 400px;

  color: white;
  background-color: blue;
}

.box2x2 {
  height: 400px;
  width: 400px;
  
  color: white;
  background-color: green;
}

.box1x2 {
  height: 400px;
  width: 200px;

  color: white;
  background-color: orange;
}