JSFiddle - React, Tailwind, and code Playground

by SoSoDef

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Unbenanntes Dokument</title>
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen">




<h1>Motorcycle Center Europe S.L<br>
Crt/ Nacional V , Km.400 Nave.1 06009 Badajoz(Spain)<br>
Tel:+34 924 278 167<br>
[email protected] - www.motocentereurope.com<br>
http://m.facebook.com/motorcyclecentereurope 
</h1>

<div id="mittig">
<a href="http://www.espn.com">
<img id="img_mit" src="tienda.png" /></a>
</div>


<div id="hol">
<a href="http://www.nba.com">
<img id="img_hol" src="hol.png" /></a>
</div>

<div id="por">
<a href="http://www.nba.com">
<img id="img_por" src="por.png" /></a>
</div>

<div id="ch">
<a href="http://www.nba.com">
<img id="img_ch" src="ch.png" /></a>
</div>

<div id="es">
<a href="http://www.nba.com">
<img id="img_es" src="es.png" /></a>
</div>

<div id="ale">
<a href="http://www.nba.com">
<img id="img_ale" src="ale.png" /></a>
</div>

<div id="ita">
<a href="http://www.nba.com">
<img id="img_ita" src="ita.png" /></a>
</div>

<div id="fr">
<a href="http://www.nba.com">
<img id="img_fr" src="fr.png" /></a>
</div>

<div id="uk">
<a href="http://www.nba.com">
<img id="img_uk" src="uk.png" /></a>
</div>

</head>





<body>
</body>
</html>

CSS

body, span{
	margin:auto;
	padding:auto;
}

body{
		background: url(../bg.jpg) no-repeat center center fixed #292929;
		-webkit-background-size: cover;
		-moz-background-size: cover;
		-o-background-size: cover;
		background-size: cover;
}

h1 {
		position: absolute;
		text-align: center;
		font-size: 10px;
		top: 70%;
		left: 58%;
		font-family: 'Open Sans', sans-serif;
		font-weight: light;
 } 


#mittig{
	position:absolute;
	top:200px;
	left:0%;
	width: 100%;
	text-align:center;	
}

#img_mit{


}

#img_mit:hover{
	-webkit-filter: blur(4px);
}



#ch{

	position:absolute;
	top:89%;
	left:36%;
	width: 0%;
	text-align:center;	

}


#img_ch{

  	-moz-transition: all 0.5s ease;
  	-ms-transition: all 0.5s ease;
  	-o-transition: all 0.5s ease;
  	-webkit-transition: all 0.5s ease;
}



#img_ch:hover{

	-moz-transform: rotate(360deg);
	-ms-transform: rotate(360deg);
	-o-transform: rotate(360deg);
	-webkit-transform: rotate(360deg);
	transform: rotate(360deg);
}






#fr{

	position:absolute;
	top:89%;
	left:40%;
	width: 0%;
	text-align:center;	

}


#img_fr{

  	-moz-transition: all 0.5s ease;
  	-ms-transition: all 0.5s ease;
  	-o-transition: all 0.5s ease;
  	-webkit-transition: all 0.5s ease;
}



#img_fr:hover{

	-moz-transform: rotate(360deg);
	-ms-transform: rotate(360deg);
	-o-transform: rotate(360deg);
	-webkit-transform: rotate(360deg);
	transform: rotate(360deg);
}




#es{

	position:absolute;
	top:89%;
	left:44%;
	width: 0%;
	text-align:center;	

}


#img_es{

  	-moz-transition: all 0.5s ease;
  	-ms-transition: all 0.5s ease;
  	-o-transition: all 0.5s ease;
  	-webkit-transition: all 0.5s ease;
}



#img_es:hover{

	-moz-transform: rotate(360deg);
	-ms-transform: rotate(360deg);
	-o-transform: rotate(360deg);
	-webkit-transform: rotate(360deg);
	transform: rotate(360deg);
}



#hol{

	position:absolute;
	top:89%;
	left:48%;
	text-align:center;	
}


#img_hol{

  	-moz-transition: all 0.5s ease;
  	-ms-transition: all 0.5s ease;
  	-o-transition: all...