JSFiddle - React, Tailwind, and code Playground

HTML

<span class="multi-control control-grayscale multi-control-10"></span>
	<span class="multi-control control-grayscale multi-control-09"></span>
	<span class="multi-control control-grayscale multi-control-08"></span>
	<span class="multi-control control-grayscale multi-control-07"></span>
	<span class="multi-control control-grayscale multi-control-06"></span>
	<span class="multi-control control-grayscale multi-control-05"></span>
	<span class="multi-control control-grayscale multi-control-04"></span>
	<span class="multi-control control-grayscale multi-control-03"></span>
	<span class="multi-control control-grayscale multi-control-02"></span>
	<span class="multi-control control-grayscale multi-control-01"></span>
	<span class="multi-control control-contrast multi-control-10"></span>
	<span class="multi-control control-contrast multi-control-09"></span>
	<span class="multi-control control-contrast multi-control-08"></span>
	<span class="multi-control control-contrast multi-control-07"></span>
	<span class="multi-control control-contrast multi-control-06"></span>
	<span class="multi-control control-contrast multi-control-05"></span>
	<span class="multi-control control-contrast multi-control-04"></span>
	<span class="multi-control control-contrast multi-control-03"></span>
	<span class="multi-control control-contrast multi-control-02"></span>
	<span class="multi-control control-contrast multi-control-01"></span>
	<span class="multi-control control-brightness multi-control-10"></span>
	<span class="multi-control control-brightness multi-control-09"></span>
	<span class="multi-control control-brightness multi-control-08"></span>
	<span class="multi-control control-brightness multi-control-07"></span>
	<span class="multi-control control-brightness multi-control-06"></span>
	<span class="multi-control control-brightness multi-control-05"></span>
	<span class="multi-control control-brightness multi-control-04"></span>
	<span class="multi-control control-brightness...

CSS

@-webkit-keyframes happy {
		50% {
			text-shadow: 0 1px 90px rgba(255,255,255,.5),
						 1px 0 90px rgba(255,255,255,.5),
						 1px 1px 90px rgba(255,255,255,.5),
						 -1px 0 90px rgba(255,255,255,.5),
						 0 -1px 90px rgba(255,255,255,.5),
						 -1px 1px 90px rgba(255,255,255,.5),
						 1px -1px 90px rgba(255,255,255,.5);
			color: rgba(255,255,255,1);
		}
	}
	* {
		margin: 0;
		padding: 0;
		font-family: Arial, sans-serif;
		font-size: 10px;
	}
	body {
		background-image: -webkit-gradient(linear, 0 0, 100% 0, from(#888), to(#000));
	}
	#content {
		position: absolute;
		width: 100%;
		height: 100%;
		background: #F23;
		/* -webkit-transition: all 300ms linear; */
	}
	h1 {
		margin-right: 20px;
		font-weight: normal;
		font-size: 10em;
		text-align: right;
		text-shadow: 0 1px 50px rgba(255,255,255,.5),
					 1px 0 50px rgba(255,255,255,.5),
					 1px 1px 50px rgba(255,255,255,.5),
					 -1px 0 50px rgba(255,255,255,.5),
					 0 -1px 50px rgba(255,255,255,.5),
					 -1px 1px 50px rgba(255,255,255,.5),
					 1px -1px 50px rgba(255,255,255,.5);
		color: rgba(255,255,255,0);
		-webkit-animation: 2s happy infinite;
	}
	#noel {
		position: absolute;
		top: 200px;
		left: 50%;
		width: 400px;
		height: 500px;
		margin-left: -100px;
	}
	.hat {
		position: absolute;
		top: 36px;
		left: 105px;
		width: 190px;
		height: 100px;
	}
	.hat .white,
	.hat .red {
		position: relative;
		z-index: 30;
		width: 190px;
	}
	.hat .white {
		top: -100px;
		height: 20px;
		background: #FFF;
		border-bottom: 10px solid #FFF;
		border-radius: 0 0 100% 100%;
	}
	.hat .red {
		height: 100px;
		border-top: 100px solid #F00;
		border-radius: 100% 100% 0 0;
	}
	.hat .back {
		position: absolute;
		top: 2px;
		left: -40px;
		width: 120px;
		height: 260px;
		border-radius: 100% 0 0 100%;
		border-left: 100px solid #E00;
	}
	.hat .pompom {
		position: absolute;
		z-index: 10;
		width: 30px;
		height: 30px;
		background: #FFF;
		border-radius: 100%;
	}
	.head {
		position:...