JSFiddle - React, Tailwind, and code Playground

HTML

<div class="block">
  <div class="block__squares">
    <div class="block__square"></div>
    <div class="block__square"></div>
  </div>
  <div class="block__squares block__squares--right">
    <div class="block__square"></div>
    <div class="block__square"></div>
  </div>
</div>

CSS

*{
  box-sizing: border-box;
}

body {
  padding: 2rem;
}

.block {
  background-color: orange;
  max-width: 400px;
  margin: 0 auto;
  min-height: 200px;
  position: relative;
}

.block::before,
.block::after {
  content: '';
  position: absolute;
  width: 50px;
  height: 50px;
  border: 2px solid #fff;
  box-sizing: border-box;
  transition: .3s ease-in;
}

.block:hover::before,
.block:hover::after{
  width: calc(100% - 20px);
  height: calc(100% - 20px);
}

.block::before {
  top: 10px;
  left: 10px;
  border-right: none;
  border-bottom: none;
}

.block::after {
  bottom: 10px;
  right: 10px;
  border-left: none;
  border-top: none;
}

.block__squares {
  display: inline-block;
  position: absolute;
  bottom: -5px;
  left: -5px;
  pointer-events: none;
}

.block__square {
  width: 30px;
  height: 30px;
  background-color: #ccc;
}

.block__square:nth-child(n+2) {
  margin-left: 100%;
}

.block__squares--right {
  bottom: auto;
  left: auto;
  top: -5px;
  right: -5px;
}

.block__squares--right .block__square:nth-last-child(n+2) {
  margin-left: -100%;
}

.block__squares--right .block__square:nth-child(n+2) {
  margin-left: 0;
}