JSFiddle - React, Tailwind, and code Playground

by rough cheap

HTML

<div class="outer bgimage">
<div class="sibs2"></div>
<div class="sibs1">
<p>
Box it!
</p>
</div>
</div>

CSS

.outer {
  position: relative;
  height: 100px;
}

.sibs1 {
  position: relative;
  width: 30%;
  height: 80%;
  background-color: blue;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.sibs1::before {
  position: absolute;
  content: "";
  top: 0;
  right: -8%;
  width: 8%;
  height: 100%;
  background-color: #0000ff77;
}

.sibs2 {
  position: absolute;
  width: 24%;
  height: 100%;
  background-color: #cdcdcd;
}

.sibs2::before {
  content: "";
  position: absolute;
  top: 0;
  width: 8%;
  height: 100%;
  right: -8%;
  background-color: #cdcdcd77;
}



.bgimage {
  background-image: url('https://wpdotorg.files.wordpress.com/2008/11/boat.jpg');
  background-size: cover;
  background-position: 50% 50%;
}