JSFiddle - React, Tailwind, and code Playground

HTML

<div class="x">
    <span class="tl">&nbsp;</span>
    <span class="tr">&nbsp;</span>
    <span class="bl">&nbsp;</span>
    <span class="br">&nbsp;</span>
    
    <span class="l">&nbsp;</span>
    <span class="r">&nbsp;</span>
    <span class="t">&nbsp;</span>
    <span class="b">&nbsp;</span>
    
    <div class="cont">
        test
    </div>
</div>

CSS

.x {
    position: relative;
    padding: 10px;
}

.x .tl, .x .tr, .x .bl, .x .br {
    position: absolute;
    width: 8px;
    height: 8px;
    border: red 1px solid;
    background: pink;
}

.x .tl {
    top: 0;
    left: 0;
}

.x .tr {
    top: 0;
    right: 0;
}

.x .bl {
    bottom: 0;
    left: 0;
}

.x .br {
    bottom: 0;
    right: 0;
}

.x .l, .x .r, .x .t, .x .b {
    position: absolute;
    background: lightgreen;
    border: green 1px solid;
}

.x .l, .x .r {
    top: 10px;
    bottom: 10px;
    width: 8px;
}

.x .t, .x .b {
    left: 10px;
    right: 10px;
    height: 8px;
}

.x .l {
    left: 0;
}

.x .r {
    right: 0;
}

.x .t {
    top: 0;
}

.x .b {
    bottom: 0;
}

.x .cont {
    padding: 5px;
    background: lightblue;
}