JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
	<head>
		<title>Austrian Roleplay</title>
		<link href="css/main.css" type="text/css" rel="stylesheet" />
		<link rel="shortcut icon" href="/img/icons/favicon.png" type="image/png" />
		<link rel="icon" href="/img/icons/favicon.png" type="image/png" />
	</head>
	<body>
		<div id="main-wrapper" style="background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url( img/backgrounds/<?php echo rand( 1, 3 ); ?>.jpg );">
		
			<div id="time">
				<div id="info">
				<?php setlocale(LC_TIME, "de_DE@euro", "de_DE", "de", "ge", "german");?>
				<?php echo strftime("%A, %d. %B %Y - %H:%M",time());?>

				</div>
			</div>
			
			<div id="content">
			
				<div id="logo">Austrian Roleplay</div>
			
				
				<a href="forum/index.php"> <div class="link" id="forum"><span>Forum</span> </div> </a>
				<a href="samp://austrian-roleplay.at"> <div class="link" id="server"><span>Server</span> <label>Jetzt joinen!</label> </div> </a>
				<a href="ts3server://austrian-roleplay.at"><div class="link" id="teamspeak"> <span>Teamspeak</span> <label>Jetzt joinen!</label> </div> </a>
				<a href="http://ucp.austrian-roleplay.at"> <div class="link" id="control"> <span>Controlpanel</span> </div> </a>
				
			</div>
			
		</div>
	</body>
</html>

CSS

@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,300italic,400,400italic,600,600italic,700,700italic,800,800italic);
@import url(https://fonts.googleapis.com/css?family=Righteous);
@import url('https://fonts.googleapis.com/css?family=Titillium+Web:200,300,400,700');

html body{
	background-color: #333333;
	font-family: 'Open Sans', sans-serif;
}

#main-wrapper{
	width: 100%; height: 100%;
	position: absolute; left: 0; top: 0;
	background-size: cover;
	background:
		linear-gradient(
		  rgba(0, 0, 0, 0.7), 
		  rgba(0, 0, 0, 0.7)
		),
		url( ../img/background.jpg );
    -ms-user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

#main-wrapper #content{
	width: 650px; height: auto;
	overflow: hidden;
	margin: 50px auto; display: block;
}

/** Time **/
#main-wrapper #time{
	width: 300px; height: 150px;
	position: relative; margin-left: 10px;
	background-image: url( ../img/icons/time.png ); background-size: 60px 60px; background-repeat: no-repeat; background-position: 0 50%;
	overflow: hidden;
	position: fixed; bottom: 0; left: 50px;
}

#main-wrapper #time label{
	color: #FFFFFF; font-size: 0.8em; font-weight: 600; text-shadow: 0 0 1px #000000;
}

#main-wrapper #time div#info{
	position: absolute; left: 100px; top: 60px;
	color: #FFFFFF; font-size: 0.8em; font-weight: 600; text-shadow: 0 0 1px #000000;
	display: inline;
}

#main-wrapper #time div#info span{display: inline;}

/** Links **/
#main-wrapper #content #logo{
	width: 100%; min-height: 100px; height: auto;
	font-weight: 600; font-size: 3em; color: #FFBE72; text-align: center;
}

#main-wrapper #content .link{
	width: 300px; height: 150px;	
	position: relative; margin-bottom: 25px; margin-right: 15px; margin-left: 10px;
	background-color: #222222; background-repeat: no-repeat; background-position: 50% 50%;
	box-shadow: 0 0 1px 1px rgba( 0, 0, 0, 0.3 );
	font-size: 0.8em; 
	float: left; cursor: pointer;
	transition: background-size...