JSFiddle - React, Tailwind, and code Playground

HTML

<span id="spanBlue"></span>
<span id="spanGreen"></span>
<span id="spanOrange"></span>
<span id="spanRed"><span></span></span>

CSS

#spanBlue {
    position: fixed;
    top: 0px;
    left: 0px;
    height: 100%;
    width: 10%;
    background-color: #4D9DB8;
    border-right: 10px solid #045B6F;
    z-index: 1;
}
#spanGreen {
    position: fixed;
    top: 0px;
    left: 0px;
    height: 10%;
    width: 100%;
    background-color: #A4AC79;
    border-bottom: 10px solid #34655F;
    z-index: 1;
}
#spanOrange {
    position: fixed;
    top: 0px;
    left: 0px;
    height: 10%;
    width: 10%;
    background-color: #FA9D26;
    border-right: 10px solid #045B6F;
    z-index: 2;
}
#spanRed {
    position: fixed;
    bottom: 0px;
    right: 0px;
    height: 90%;
    width: 90%;
    background-color: WHITE;
    z-index: 3;
}
#spanRed > span {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    border-top: 10px solid #B52024;
    border-left: 10px solid #B52024;
}