JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <title></title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width">
</head>
<body>

<div id="container">
  <div class="left">
    <div class="big"></div>
    <div class="small grey"></div>
    <div class="small orange"></div>
  </div>
  <div class="center">
    <div class="small dark space"></div>
    <div class="small black"></div>
    <div class="small white"></div>
    <div class="small dark"></div>
    <div class="small grey"></div>
    <div class="small blue"></div>
    <div class="small black"></div>
    <div class="small orange"></div>
  </div>
</div>

</body>
</html>

CSS

body {
  background: #e1d1c4;
  }
#container {
  margin: 0 auto;
  width: 900px;
  height: auto;
  }
#container .center {
  overflow: hidden;
  float: left;
  width: 600px;
  }
#container .left {
  overflow: hidden;
  float: left;
  width: 300px;
  height: auto;
  }
#container .big {
  width: 300px;
  height: 300px;
  background: #d99872;
  }
#container .small {
  float: left;
  width: 150px;
  height: 150px;
  }

#container .space { margin: 150px 450px 0px 0px; }

#container .grey { background: #546783; }
#container .orange { background: #cf4534; }
#container .black { background: #101010; }
#container .dark { background: #232323; }
#container .white { background: #ffffff; }
#container .blue { background: #000654; }