JSFiddle - React, Tailwind, and code Playground

HTML

<div class="trump-waiting">
	
	<div class="darkness"></div>
	
	<div class="wrapper">
		
		<div class="row row1">
			
			<div class="image"><img src="https://image.ibb.co/d7o5Ay/unknown.png"></div>
			
			<div class="text">
				<span class="player-nickname">Player #1</span>
				<span class="message">is choosing the trump suit...</span>
			</div>
			
		</div>
		
		<div class="row row2">
		
			<div class="spinner"><div></div></div>
			
		</div>
		
	</div>
	

</div><!-- .trump-waiting -->

CSS

.trump-waiting {
	
	font-size: 0;
	overflow: hidden;
}

.trump-waiting .darkness {
	position: fixed;
	top:0;
	left:0;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0.3);
	z-index: 3000;
}


.trump-waiting .wrapper {
	position: fixed;
	top: 50%;
	left: 50%;
	
	transform: translate(-50%,-50%);
	
	background-color: purple;
	
	
	z-index: 3001;
}


.trump-waiting .row1 {
	display: inline-block;
	height: 60px;
	
	background-color: yellow;
}

.trump-waiting .row1 .image {
	
	float: left;
	width: 60px;
	height: 60px;
	// background-color: rgba(255,255,255,0.7);
	background-color: #97deff;
	border: 2px solid #fff;
	border-radius: 50%;
	overflow: hidden;
	box-sizing: border-box;
}

.trump-waiting .row1 .image img {
	width: 56px;
	height: 56px;
}

.trump-waiting .row1 .text {
	
	float: left;
	
	line-height: 60px;
	background-color: blue;
	
}

.trump-waiting .row1 .text span.player-nickname {
	
	float: left;
	line-height: 60px;
	font-size: 28px;
	font-weight: 300;
	color: #fff;
	text-shadow: 2px 2px 1px #000;
	background-color: orange;
	
}

.trump-waiting .row1 .text span.message {
	
	float: left;
	margin-left: 10px;
	
	
	font-size: 20px;
	font-weight: 400;
	color: #000;
	background-color: green;
	
	
}

.trump-waiting .row2 {
	display: block;
	margin-top: 50px;
	height: 160px;
	// background-color: orange;
}



.trump-waiting .spinner {
	position: relative;
	margin: auto;
	width: 160px !important;
	height: 160px !important;
}

.trump-waiting .spinner div {
	position: absolute;
	width: inherit;
	height: inherit;
	top: 0px;
	left: 0px;
	border-radius: 50%;
	box-shadow: 0 4px 0 0 #fff;
	transform-origin: 80px 80px;
	animation: trumpWaitingSpinner 1.5s linear infinite;
}

@keyframes trumpWaitingSpinner {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	50% {
		-webkit-transform: rotate(180deg);
		transform: rotate(180deg);
	}
	100% {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}