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 {
	display: flex;
  justify-content: center;
  align-items: center;
	font-size: 0;
	overflow: hidden;
  height: 100vh;
}

.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 {
  display:flex;
  justify-content: center;
  flex-direction:column;
 /*  align-items: center; */
  /* position: fixed; */
  /* top: 50%; */
  /* left: 50%; */
  /* transform: translate(-50%,-50%); */
	
	background-color: purple;
	
	
	z-index: 3001;
}


.trump-waiting .row1 {
	display: flex;
  flex-direction: row;
  /* display: inline-block; */
	/* height: 60px; */
	background-color: yellow;
}

.trump-waiting .row1 .image {
	flex-shrink: 0;
	/* 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 {
	
	display: flex;
  flex-direction: row;
	
	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: flex;
  justify-content: center;
  align-items: center;
  padding: 16px 0 16px 0;
	/* 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:...