JSFiddle - React, Tailwind, and code Playground
HTML
<div class="setZ">
<div class="set">
<div class="tl y"></div>
<div class="tc h"></div>
<div class="tr y"></div>
<div class="rc v"></div>
<div class="rb y"></div>
<div class="bc h"></div>
<div class="bl y"></div>
<div class="lc v"></div>
<div class="ccc"></div>
</div>
<div class="dat">
</div>
</div>
CSS
.setZ { /* XXX block styles v.Z (not directly stylize) */
display: block;
position: relative;
z-index: 50;
padding: 4px;
}
.setZ > .set {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 60;
}
.setZ > .set div {
position: absolute;
}
.setZ > .set .y {
background: url("../img/setzbr.png") no-repeat;
}
.setZ > .set .h {
background: url("../img/setzbv.png") repeat-x;
}
.setZ > .set .v {
background: url("../img/setzbh.png") repeat-y;
}
.setZ > .set .tl {
top: 0;
left: 0;
height: 60px;
width: 60px;
background-position: 0 0 !important;
}
.setZ > .set .tc {
top: 0;
right: 60px;
left: 60px;
height: 60px;
background-position: 0 -60px !important;
}
.setZ > .set .tr {
top: 0;
right: 0;
width: 60px;
height: 60px;
background-position: -60px 0 !important;
}
.setZ > .set .rc {
top: 60px;
right: 0;
bottom: 60px;
width: 60px;
background-position: 0 0 !important;
}
.setZ > .set .rb {
right: 0;
bottom: 0;
width: 60px;
height: 60px;
background-position: -60px -60px !important;
}
.setZ > .set .bc {
right: 60px;
bottom: 0;
left: 60px;
height: 60px;
background-position: 0 0 !important;
}
.setZ > .set .bl {
bottom: 0;
left: 0;
width: 60px;
height: 60px;
background-position: 0 -60px !important;
}
.setZ > .set .lc {
bottom: 60px;
left: 0;
top: 60px;
width: 60px;
background-position: -60px 0 !important;
}
.setZ > .set .ccc {
top: 60px;
right: 60px;
bottom: 60px;
left: 60px;
background: url("../img/setzbg.png");
}
.setZ > .dat {
position: relative;
z-index: 70;
min-height: 40px;
min-width: 40px;
padding: 1px 0 0 0;
} /* end ~ block styles v.Z */