JSFiddle - React, Tailwind, and code Playground

by Brandon

HTML

<div></div>
<div></div>
<div></div>
<div></div>

CSS

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

html, body {
    height: 100%;
    width: 100%;
}

div {
    width: 50%;
    height: 50%;
    float: left;
}

div:nth-of-type(1) {
    background: #ccc;
}

div:nth-of-type(2) {
    background: #bbb;
    border-left: 1px solid #f00;
}

div:nth-of-type(3) {
    background: #aaa;
    border-top: 1px solid #f00;
}

div:nth-of-type(4) {
    background: #ddd;
    border-top: 1px solid #f00;
    border-left: 1px solid #f00;
}