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

body {
		background-color: black
        
	}
	* {
    box-sizing: border-box;
	}
	#stadium {
		margin-left: auto;
		margin-right: auto;
		position: absolute;
		z-index: -100;
        background-image: url(https://placehold.it/1920x1080);
		background-size:   contain;
		background-repeat: no-repeat;
		/*background-position: center center;   */ 

		max-width: 1920px;
        width: calc(100vh / 9 * 16);
		max-height: 1080px;
		height: 100vh;
	}

	#players {
		width: 100%;
        max-width: 940px;
        margin: 70vh auto 0 auto;
		/*border: 2px solid red;*/
		text-align: center;
		white-space: nowrap;
		font-size: 0;
	}

	.player {
		position: relative;
		display: inline-block;
		max-width: 65px;
        width: 10%;
		height: 0;
        padding-bottom: 8%;
		background-image:  url(https://placehold.it/90x120/0000ff);
		background-size:   cover;
		background-repeat: no-repeat;
    border: 3px solid rgba(255, 0, 0, 0.5);
    margin-left: -4px;
	}

.player:first-child {
margin-left: 0;    
}

.player:hover {
    backface-visibility: hidden;
    transform: translateY(-15px);
    transition: all .3s;
}
}