JSFiddle - React, Tailwind, and code Playground

by brigand

HTML

<div class="box">
  <div class="handle">
    <div class="net"></div>
  </div>
</div>

CSS

.box {
  background: limegreen;
  position: relative;
  width: 12em;
  height: 12em;
}

.handle {
  position: absolute;
  top: 100%;
  left: 100%;
  width: 1em;
  height: 1em;
  background: white;
  box-shadow: 0 0 0 2px #999;
}

.net {
  display: none;
  position: absolute;
  top: -100vh;
  left: -100vh;
  width: 200vh;
  height: 200vh;
  background: rgba(0, 0, 0, 0.2);
}

.net.active {
  display: block;
}

JavaScript

const handle = document.querySelector('.handle')
const net = document.querySelector('.net');

handle.addEventListener('mousedown', (event) => {
	event.preventDefault();
  net.classList.add('active');
})
handle.addEventListener('mouseup', (event) => {
  net.classList.remove('active');
})