JSFiddle - React, Tailwind, and code Playground

HTML

<div id="stadium">
		<div id="players">
			<div id="1" class="player"></div>
			<div id="2" class="player"></div>
			<div id="3" class="player"></div>
			<div id="4" class="player"></div>
			<div id="5" class="player"></div>
			<div id="6" class="player"></div>
			<div id="7" class="player"></div>
			<div id="8" class="player"></div>
			<div id="9" class="player"></div>
			<div id="10" class="player"></div>
		</div>
	</div>

CSS

html{
	  height: 100%;
	}

	body {
		background-color: black;

			
		min-height: 100%;
		height: 100%;
		overflow-y: hidden;

	}
	* {
		-webkit-touch-callout: none;
		-webkit-user-select: none;
		-khtml-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
	}
	#stadium {
		margin-left: auto;
		margin-right: auto;
		
		z-index: -100;
        background-image: url(https://placehold.it/1920x1080);
		background-size:   contain;
		background-repeat: no-repeat;
		/*background-position: center center;   */ 

		width: 1920px;
		height: 1080px;
		
	}

	#players {
		position: absolute;
		width: 945px;
		height: 140px;
		background-color: rgba(255, 0, 0, 0.5);
		/*border: 2px solid red;*/
		text-align: center;
		white-space: nowrap;
		font-size: 0;
	}

	.player {
		position: relative;
		display: inline-block;
		width: 90px;
		height: 120px;
		background-image:  url(https://placehold.it/90x120/0000ff);
		background-size:   contain;
		background-repeat: no-repeat;
	}

JavaScript

$(document).ready(function() 
	{
		setSizes();
	});


	$(window).resize(function() 
	{
		setSizes();
	});

	var widthMultiplier;
	var heightMultiplier;

	var normalWidth = 1920;
	var normalHeight = 1080;
	var offsets;
	function setSizes()
	{
		widthMultiplier = ($(window).height()/9*16) / normalWidth;
		heightMultiplier = $(window).height() / normalHeight;

		//Background Image
		$('#stadium').height($(window).height());
		$('#stadium').width($(window).height()/9*16);
		
		offsets = $('#stadium').offset();
		
		//cardSpace
		$("#players").width(946 * widthMultiplier);
		$("#players").height(130 * heightMultiplier);
		
		$("#players").css("left", (((1920 * widthMultiplier) * 29.8 / 100) + offsets.left) + "px");
		$("#players").css("top", (((1080 * heightMultiplier) * 77.9 / 100) + offsets.top) + "px");
		
		
		//cardHand
		$(".player").width(86 * widthMultiplier);
		$(".player").height(115 * heightMultiplier);
		$(".player").css("margin", (5.5 * heightMultiplier) + "px " + (4 * widthMultiplier) + "px " + (4 * heightMultiplier) + "px " + (4 * widthMultiplier) + "px");
		
		var lefttemp;
		$(".player").mouseover(function()
		{
			console.log("UP: " + this.id);
			$(this).css({marginTop: '-=15px'});
		});
		$(".player").mouseout(function()
		{
			console.log("DOWN: " + this.id);
			$(this).css({marginTop: '+=15px'});
		});
	}