JSFiddle - React, Tailwind, and code Playground

by Maxim Gladkov

HTML

<body>
	<div id="background">
			<div id="HeaderGrey">
            	<div id="HeaderLogo">
                    <img src="http://www.coldhearteduk.com/Images/CHBadgeLogo.png" class=""/>
                </div>
                <div id="Title">
                Cold Hearted UK
                </div>
            </div>
            <div id="HeaderShaderTop">
            </div>
            <div id="HeaderShaderBottom">
            </div>
    </div>
    <div id="footer">
    </div>
</body>

CSS

body {
	margin: 0;
	padding: 0;
 }
  @font-face { font-family: Danube; src: url('../DANUBE__.TTF'); } 
  @font-face { font-family: Danube; font-weight: bold; src: url('../DANUB__.TTF');}
 
html, body, #background { height: 100%; }
body > #background { height: auto; min-height: 100%; }
 
 #background 
{ 
	 left: 0px; 
	 top: 0px; 
	 position: relative; 
	 background-color: #303030;
	 padding-top: -51px;
	} 
 #HeaderGrey
{
	background-color: #676767;
	height: 94px;
	width: 100%;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin-top: 0px;
	position: relative;
}
 #HeaderShaderTop
{
	background-color: #0e453d;
	height: 2px;
	width: 100%;
	position: relative;
}
 #HeaderShaderBottom
{
	background-color: #009d89;
	height: 2px;
	width: 100%;
	position: relative;
}
 #HeaderLogo{
	 margin-top: 5px;
	 margin-left: 28px;
	 height: 85px;
	 width: 86px;
	 position: absolute;
    -webkit-transition: 0.5s;
    -ms-transition: 0.5s;
    transition: 0.5s;
    -webkit-transform: scale(1.0);
    -ms-transform: scale(1.0);
    transform: scale(1.0);
 }
 #Title{
	font-family: Danube;
	font-size: 50px;
	color: #c6c6c6;
	text-align: right;
	float: right;
	margin-right: 16px;
	margin-top: 7px;
	padding-top: 0;
 }
 #footer{
	 background-color: #1f1f1f;
	 height: 51px;
	 width: 100%;
	 clear: both;
	 position: relative;
	 z-index: 10;
	 margin-top: -51px;
 }
 
 @-webkit-keyframes pulse0 {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@keyframes pulse0 {
  0% {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }

  100% {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }
}

.pulse0 {
  -webkit-animation-name: pulse2;
  animation-name: pulse2;
}

@-webkit-keyframes pulse2 {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  100% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
 ...