JSFiddle - React, Tailwind, and code Playground

by DeadByElpy

HTML

<div id="container">
    <div class="pos lt"></div>
    <div class="pos rt hidden"></div>
    <div class="pos rb hidden"></div>
    <div class="pos lb hidden"></div>
</div>

CSS

#container {
  width:   1920px;
  height:  1080px;
  background: #cf0;
    position: absolute;
    top: 0;
left: 0;
    z-index: 1;
}

.pos {
    position: absolute;
    background: #0fc;
    width:   582px;
    height: 327px;
    z-index: 10;
}

.pos.hidden {display:none;}

.pos.lt {
  top: 84px;
  left: 84px;
}
.pos.rt {
  top: 84px;
  left: 1254px;
}
.pos.rb {
  top: 669px;
  left: 1254px;
}
.pos.lb {
  top: 669px;
  left: 84px;
}

JavaScript

(function () {
var pos = 0;
	players = document.querySelectorAll('div.pos');
    
    window.addEventListener('keydown', function () {
    	players[pos].classList.add('hidden');
        ++pos;
        if ( pos > 3 ) {
        	pos = 0;
        }
    	players[pos].classList.remove('hidden');
    })
})()