JSFiddle - React, Tailwind, and code Playground

by Alex Deider

HTML

<div class="a t b l r">c&nbsp;</div>
<div class="a t l r">t&nbsp;</div>
<div class="a b l r">b&nbsp;</div>
<div class="a l t b">l&nbsp;</div>
<div class="a r t b">r&nbsp;</div>

<div class="a t l">tl&nbsp;</div>
<div class="a t r">tr&nbsp;</div>
<div class="a b l">bl&nbsp;</div>
<div class="a b r">br&nbsp;</div>

<div class="a o">&nbsp;</div>

CSS

/*5 26.65 5 26.65 5 26.65 5*/
.a{
    position: absolute;
    margin: auto;
    width: 26.65%; height: 26.65%;
    background: #ccc;
}
.t {top: 5%}
.b {bottom: 5%}
.l {left: 5%}
.r {right: 5%}

.o {
    top: 0; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    width: 70%;
    height: 70%;
    background: none;
    border: solid 1px red;
}