JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    
    <div class="wrapper">
    
    <div class='logo' >
			<svg id="svgMain" preserveAspectRatio="xMidYMin meet" viewBox="0 -100 430.403 200" onload="function()">
				<g id="Layer_5">

	<path d="M113.706,52.412h11.866c3.633,0,8.106-1.82,8.106-7.66c0-6.096-3.697-7.655-7.979-7.655h-11.993V52.412z M105.594,30.486

		h20.437c13.229,0,15.754,8.558,15.754,14.335c0,5.707-2.525,14.265-15.754,14.208h-12.324v17.765h-8.112L105.594,30.486

		L105.594,30.486z"/>

	<path d="M164.854,59.996c-2.271,1.495-5.835,1.432-9.078,2.017c-3.183,0.516-6.039,1.68-6.039,5.574

		c0,3.316,4.218,4.283,6.808,4.283c3.245,0,8.31-1.688,8.31-6.357L164.854,59.996L164.854,59.996z M172.247,69.337

		c0,1.819,0.388,2.533,1.75,2.533c0.451,0,1.043,0,1.813-0.128v5.123c-1.095,0.388-3.437,0.846-4.671,0.846

		c-2.978,0-5.115-1.044-5.7-4.085c-2.928,2.852-7.661,4.085-11.619,4.085c-6.03,0-11.478-3.245-11.478-9.799

		c0-8.367,6.681-9.728,12.91-10.441c5.312-0.973,10.053-0.388,10.053-4.733c0-3.831-3.951-4.543-6.942-4.543

		c-4.147,0-7.062,1.687-7.394,5.319h-7.393c0.521-8.627,7.851-11.16,15.245-11.16c6.547,0,13.425,2.66,13.425,9.729L172.247,69.337

		L172.247,69.337z"/>

	<path d="M196.271,48.193c-6.229,0-9.403,4.734-9.403,11.873c0,6.744,3.437,11.804,9.403,11.804c6.745,0,9.271-5.97,9.271-11.804

		C205.541,53.964,202.366,48.193,196.271,48.193 M179.729,43.262h7.006v4.543h0.133c2.074-3.83,6.096-5.453,10.371-5.453

		c10.574,0,15.703,8.042,15.703,17.84c0,9.017-4.543,17.518-14.47,17.518c-4.275,0-8.881-1.561-11.223-5.263h-0.128v16.739h-7.393

		L179.729,43.262L179.729,43.262z"/>

	<path d="M218.489,43.262h6.948v6.49h0.12c0.847-3.57,5.256-7.4,9.799-7.4c1.686,0,2.143,0.134,2.787,0.197v7.132

		c-1.037-0.126-2.131-0.324-3.176-0.324c-5.059,0-9.086,4.085-9.086,11.484v15.952h-7.394L218.489,43.262L218.489,43.262z"/>

	<path d="M244.047,43.262h7.395v33.532h-7.395V43.262z M244.047,30.486h7.395v7.005h-7.395V30.486z"/>

	<polygon points="259.654,30.544 267.045,30.544 267.045,56.885 280.415,43.326 289.495,43.326...

CSS

html, body 	{margin:0;border:0;padding:0; height:100%; background-color:#eee;
				}
html{overflow-x:hidden;}
body
{ /*
background-image:url('Ressources/paprika_w.svg');
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center; */
}
table
{
margin: 0px auto;
}
td
{
align:center;
padding:10px;
}

#button{
	position:relative;
	width:60px;
	float:left;
	}

#behance, #twitter, #facebook{
	position:absolute;
  left:8px;
	height:40px;
	width:40px;}
#behance path, #twitter path, #facebook path{fill: rgb(242,108,79);  
-webkit-transition: fill 1s ease-in-out;
  -moz-transition: fill 1s ease-in-out;
  -o-transition: fill 1s ease-in-out;
  transition: fill 1s ease-in-out;
  }

#facebook path:hover,#behance path:hover,#twitter path:hover{fill: rgb(255,255,79); 
-webkit-transition: fill 1s ease-in-out;
  -moz-transition: fill 1s ease-in-out;
  -o-transition: fill 1s ease-in-out;
  transition: fill 1s ease-in-out;
}

/*
#button img.top:hover{opacity:0;}
#button img.bottom {visibility:hidden;}
#button img.bottom:hover{visibility:visible;}*/

.wrapper {
	width:100%;
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -6em;
}
.footer, .push {
height: 1em;
}
.footer{vertical-align:bottom;margin: 0 auto; margin-bottom:0px;}

.logo{
	/*position: fixed;
	top: 40%;
	left: 25%;*/
position: absolute;
    top:-68px;
    bottom: 0;
    left: 0;
    right: 0;

    margin: auto;
	width: 430px;
	height: 250px;
	
	
	/*overflow: hidden;
	animation: logo 800ms infinite;
	-moz-animation: logo 800ms infinite;
	-webkit-animation: logo 800ms infinite;*/
}

.logo g{
	fill: rgb(242,108,79); 
}
.logo polygon:hover, .logo path:hover{
	fill: rgb(255,255,79); -webkit-transition: fill 1s ease-in-out;
  -moz-transition: fill 0.5s ease-in-out;
  -o-transition: fill 0.5s ease-in-out;
  transition: fill 0.5s ease-in-out;
}

.logo polygon, .logo path{
	 -webkit-transition: fill 1s ease-in-out;
  -moz-transition: fill 1s ease-in-out;
  -o-transition: fill 1s...