JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
  <div class="logo"></div>
  <div class="blocks">
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
  </div>
</div>

CSS

* {
  margin: 0;
  padding: 0;
}

.wrapper {
  position: relative;
  display: block;
  width: 600px;
  height: 300px;
  background-color: #fff;
}

.blocks {
  width: 100%;
  height: 100%;
  display: flex;
  flex-flow: row wrap;
}

.block {
  width: 50%;
  height: 50%;
}

.block:nth-of-type(1) {
  background-color: red;
}

.block:nth-of-type(2) {
  background-color: green;
}

.block:nth-of-type(3) {
  background-color: blue;
}

.block:nth-of-type(4) {
  background-color: yellow;
}

.logo {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 50px;
  height: 50px;
  background-color: black;
}