JSFiddle - React, Tailwind, and code Playground

HTML

<div class="box">
  <div class="content">
    <textarea class="card"></textarea>
    <textarea class="card"></textarea>
  </div>
  <div class="overlay">
    <div tabindex="0" class="spoltlight">
    </div>
  </div>
</div>

CSS

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

body {
  margin: 0;
  overflow: hidden;
}

.box {
  position: relative;
  width: 600px;
  height: 400px;
  margin-bottom: 10px;
  overflow: hidden;
  background: #fff;
}

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


.overlay {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: 99999;
  background-color: rgba(0, 0, 0, 0.5);
  mix-blend-mode: hard-light;
  pointer-events: auto;
}

.spoltlight {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--w);
  height: var(--h);
  background-color: gray;
}

.overlay:focus-within {
  pointer-events: none;
}

JavaScript

document.querySelectorAll('.card').forEach((card, index) => {
  card.onclick = alert.bind(window, index)
})