JSFiddle - React, Tailwind, and code Playground

HTML

<div id="uno"></div>
<div id="dos"></div>
<div id="hello"></div>

CSS

#uno {
  position: absolute;
  width: 100px;
  height: 100px;
  border-radius: 5px;
  background-color: blue;
  left: 50px;
  top: 50px;
}

#dos {
  position: absolute;
  width: 200px;
  height: 100px;
  border-radius: 25px;
  background-color: red;
  left: 300px;
  top: 100px;
}

#hello {
  position: fixed;
  width: 200px;
  height: 100px;
  left: 60px;
  top: 50px;
  box-shadow: 0px 0px 0px 2050px #000000bb;
  
  transition: all 2s ease;
}

JavaScript

const hello = document.getElementById('hello');
var target = 'blue';
var radius = '';
var left = '';
var width = '';
var y = '';

focus();
setInterval(() => focus(), 3000);

function focus() {
	if (target === 'blue') {
  	radius = '5px';
    left = '50px';
    width = '100px';
    y = '50px';
  } else {
  	radius = '25px';
    left = '300px';
    width = '200px';
    y = '100px';
  }
  hello.style.top = y;
  hello.style.left = left;
  hello.style.width = width;
hello.style.background =
                    `radial-gradient(farthest-side at bottom left, transparent 98%, #000000bb 100%) top right,
            radial-gradient(farthest-side at bottom right,transparent 98%, #000000bb 100%) top left,
            radial-gradient(farthest-side at top    left, transparent 98%, #000000bb 100%) bottom right,
            radial-gradient(farthest-side at top    right,transparent 98%, #000000bb 100%) bottom left`;
            hello.style.backgroundSize = `${radius} ${radius}`;
                hello.style.backgroundRepeat = 'no-repeat';
                
                target = (target === 'blue') ? 'red' : 'blue';
}