JSFiddle - React, Tailwind, and code Playground

HTML

<div id="handler" class="box">
  <div class="content">
    <div class="card"> </div>
    <div class="card"> </div>
  </div>
  <div class="rect-border"></div>
</div>

CSS

:root {
  --x: 150px;
  --y: 100px;
  --w: 300px;
  --h: 200px;
  --r: 10px;
}

body {
  margin: 0;
  overflow: hidden;
}

.box {
  width: 100vw;
  height: 100vw;
}

.card {
  width: 100px;
  height: 100px;
  background: #f34573;
}

.card ~ .card {
  position: absolute;
  top: calc(var(--y) + 50px);
  left: calc(var(--x) + 50px);
}

.card:hover {
  background: #35b0ab;
}

.rect-border {
  position: fixed;
  top: 0; left: 0;
  width: var(--w);
  height: var(--h);
  border-style: solid;
  border-color: rgba(0, 0, 0, 0.5);
  border-top-width: var(--y);
  border-right-width: calc(100vw - var(--x) - var(--w));
  border-bottom-width: calc(100vh - var(--y));
  border-left-width: var(--x);
}

JavaScript

const handler = document.querySelector('#handler')
const rect = handler.querySelector('.rect-border')

handler.addEventListener('mousemove', e => {
  const x = e.clientX
  const y = e.clientY

  if (x > 150 && x < 450 && y > 100 && y < 300) {
    rect.style.pointerEvents = 'none'
  } else {
    rect.style.pointerEvents = 'auto'
  }
}, false)