JSFiddle - React, Tailwind, and code Playground

by stacigh

HTML

<div class="border-top"></div>
<div class="border-right"></div>
<div class="border-bottom"></div>
<div class="border-left"></div>

CSS

* {
    margin: 0;
    padding: 0;
}
body {
    background-image:url('http://placekitten.com/g/1024/768');
    background-repeat: no-repeat;
}
.border-top, .border-right, .border-bottom, .border-left {
    position: fixed;
    background-color: white;
    z-index: 3;
}
.border-top, .border-bottom {
    width: 100%;
    height: 30%;
}
.border-right, .border-left {
    height: 100%;
    width: 30%;
}
.border-top {
    top: 0;
}
.border-bottom {
    bottom: 0;
}
.border-right {
    right: 0;
}
.border-left {
    left: 0;
}