JSFiddle - React, Tailwind, and code Playground

HTML

<div id="top-left"></div>
<div id="top-right"></div>
<div id="bottom-left"></div>
<div id="bottom-right"></div>

CSS

#top-left {
position: absolute;
top: 0px;
left: 0px;
width: 50%;
height: 50%;
background: #000 url('http://placekitten.com/2000/1000') no-repeat;
-moz-background-size: cover;
background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
background-color: transparent;
/* background-attachment: fixed; */
}

#top-right {
position: absolute;
top: 0px;
left: 50%;
width: 50%;
height: 50%;
background-color: green;
}

#bottom-left {
position: absolute;
top: 50%;
left: 0%;
width: 50%;
height: 1000px;
background-color: purple;
}

#bottom-right {
position: absolute;
top: 50%;
left: 50%;
width: 50%;
height: 1000px;
background-color: yellow;
}