JSFiddle - React, Tailwind, and code Playground

by mbread

HTML

<div class="div div1">
</div>
<div class="div div2">
</div>
<div class="div div3">
</div>
<div class="div div4">
</div>

CSS

.div {
    position: absolute;
    border: 1px solid black;
    height: 50%;
    width: 50%;
}

.div1{
    top: 0;
    right: 50%;
    bottom: 50%;
    left: 0;
    background: url(http://www.explainxkcd.com/wiki/skins/common/images/explainxkcd.png) 0 0 100%;
    background-image: url(http://www.explainxkcd.com/wiki/skins/common/images/explainxkcd.png);
    background-size: cover;
}

.div2 {
    top: 0;
    right: 0;
    bottom: 50%;
    left: 50%;
}

.div3 {
    top: 50%;
    right: 50%;
    bottom: 100%;
    left: 0;
    height: 50%;
}

.div4 {
    top: 50%;
    left: 50%;
}