JSFiddle - React, Tailwind, and code Playground

HTML

<div class="box">
  <span class="box-border"></span>
  <span class="box-border"></span>
  <span class="box-border"></span>
  <span class="box-border"></span>
  <span class="box-border"></span>
  <span class="box-border"></span>
</div>

SCSS

.box {
  width: 100px;
  height: 100px;
  color: #000;
  position: relative;
}

.box-border {
  position: absolute;
  background-color: #9c9c9c;
}

.box-border:first-child,
.box-border:last-child {
  width: 2px;
  height: 100%;
}

.box-border:first-child {
  left: 0;
}

.box-border:last-child {
  right: 0;
}

.box-border:nth-child(2),
.box-border:nth-child(3) {
  top: 0;
}

.box-border:nth-child(2),
.box-border:nth-child(3),
.box-border:nth-child(4),
.box-border:nth-child(5) {
  width: 40px;
  height: 2px;
}

.box-border:nth-child(2),
.box-border:nth-child(4) {
  left: 0;
}

.box-border:nth-child(3),
.box-border:nth-child(5) {
  right: 0;
}

.box-border:nth-child(4),
.box-border:nth-child(5) {
  bottom: 0;
}