JSFiddle - React, Tailwind, and code Playground

HTML

<div class="test">

</div>

CSS

.test{
  width:400px;
  height:280px;
  position:relative;
  background:url('https://avatars.mds.yandex.net/get-pdb/1920375/cb2ff4cc-2a71-4d18-b4f3-f5de7995168b/s1200?webp=false');
  background-size:cover;
}
.test:after{
  position:absolute;
  content:'';
  width:320px;
  height:200px;
  border:solid 40px rgba(255,255,255,.7);
}
.test:before{
  position:absolute;
  content:'';
  top:40px;
  left:40px;
  width:320px;
  height:200px;
  background:linear-gradient(45deg,rgba(255,255,255,.7) 10%,transparent 10%),linear-gradient(45deg,transparent 90%,rgba(255,255,255,.7) 90%);
}