JSFiddle - React, Tailwind, and code Playground

HTML

<div class='block'>
    <div class='topLeft'></div>
    <div class='top'></div>
    <div class='topRight'></div>
    <div class='left'></div>
    <div class='right'></div>
    <div class='bottomLeft'></div>
    <div class='bottom'></div>
    <div class='bottomRight'></div>
    <div class='middle'>test<br />test and a bit longer line.<br />foo</div>
</div>

CSS

.block {
    position: relative;
    padding: 32px;
    max-width: 320px;
}

.block > .topLeft {
    position: absolute;
    top: 0;
    left: 0;
    width: 32px;
    height: 32px;
    background: #f60;
}
.block > .top {
    position: absolute;
    top: 0;
    left: 32px;
    right: 32px;
    width: auto;
    height: 32px;
    background: #6f6;
}
.block > .topRight {
    position: absolute;
    top: 0;
    right: 0;
    width: 32px;
    height: 32px;
    background: #f60;
}
.block > .left {
    position: absolute;
    top: 32px;
    bottom: 32px;
    left: 0;
    width: 32px;
    height: auto;
    background: #6f6;
}
.block > .right {
    position: absolute;
    top: 32px;
    bottom: 32px;
    right: 0;
    width: 32px;
    height: auto;
    background: #6f6;
}
.block > .bottomLeft {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 32px;
    height: 32px;
    background: #f60;
}
.block > .bottom {
    position: absolute;
    bottom: 0;
    left: 32px;
    right: 32px;
    width: auto;
    height: 32px;
    background: #6f6;
}
.block > .bottomRight {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 32px;
    height: 32px;
    background: #f60;
}

.block > .middle {
    background: #06d;
    padding: 4px;
}