JSFiddle - React, Tailwind, and code Playground

HTML

<div class="panelWrapper">
			<div class="santa">
				<div class="face"></div>
				<div class="hat"></div>
				<div class="hatFur"></div>
				<div class="eyeLeft"></div>
				<div class="eyeRight"></div>
				<div class="beard_left"></div>
				<div class="beard_right"></div>
				<div class="nose"></div>
				<div class="mouth"></div>
			</div>
		</div>

CSS

html {
				height: 100%;
			}
			body {
				background-image: url('background.png');
				display: table;
				margin: 0;
				height: 100%;
				width: 100%;
				background-color: #eee;
			}
			.panelWrapper {
				display: table-cell;
				vertical-align: middle;
			}
			
			.face {
				background-color: #FFC4A7;
				border-radius: 60px 60px 60px 60px;
				height: 102px;
				left: 50px;
				position: absolute;
				top: 105px;
				width: 100px;
			}

			.santa {
				height: 300px;
				width: 200px;
				position: relative;
				margin: 50px auto 0;
				cursor: pointer;
			}

			.santa .hat {
				position: absolute;
				left: 50%;
				margin: 0 0 0 -50px;
				width: 0px;
				height: 0px;
				border-style: solid;
				border-width: 0 50px 110px 50px;
				border-color: transparent transparent #a40000 transparent;
				line-height: 0px;
				_border-color: #000000 #000000 #a40000 #000000;
				_filter: progid:DXImageTransform.Microsoft.Chroma(color='#000000');	
			}

			.santa .hat:after {
				content: '';
				position: absolute;
				width: 0px;
				height: 0px;
				border-style: solid;
				border-width: 40px 0 0 100px;
				border-color: transparent transparent transparent #a40000;
				
				-webkit-transform: rotate(15deg);
				-webkit-transform-origin: top left;
				
				-moz-transform: rotate(15deg);
				-moz-transform-origin: top left;
				
				-ms-transform: rotate(15deg);
				-ms-transform-origin: top left;
				
				-o-transform: rotate(15deg);
				-o-transform-origin: top left;
				
				transform: rotate(15deg);
				transform-origin: top left;
			}

			.santa .hat:before {
				content: '';
				position: absolute;
				width: 16px;
				height: 16px;
				background: #fff;
				left: 75px;
				top: 55px;
				-webkit-border-radius: 50%;
				-moz-border-radius: 50%;
				border-radius: 50%;
				z-index: 1;
			}

			.santa .hatFur {
				background: none repeat scroll 0 0 #FFFFFF;
				border-radius: 50px 50px 50px 50px;
				box-shadow: 0 6px 2px -6px #000000;
				height:...