JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
		<div class="borda">
			<div class="arvore">
				<div class="estrela-brilho">
					<div class="estrela">
						<div></div>
					</div>
				</div>
				<div class="galho"></div>
				<div class="galho"></div>
				<div class="galho"></div>
				<div class="galho"></div>
				<div class="bola"></div>
				<div class="bola"></div>
				<div class="bola"></div>
				<div class="bola"></div>
				<div class="bola"></div>
				<div class="bola"></div>
				<div class="bola"></div>
				<div class="bola"></div>
			</div>

			<h1>Feliz Natal <span class="chapeu"><span></span><span></span><span></span></span></h1>
			<p>Desafio de CSS IMasters: Natal - por <a href="http://www.dmatoso.com">Douglas Matoso</a></p>

			<div class="neve"></div>
			<div class="neve"></div>
			<div class="neve"></div>
			<div class="neve"></div>
			<div class="neve"></div>
			<div class="neve"></div>
		</div>
	</div>

CSS

html, body {
			height: 100%;
			margin: 0;
			padding: 0;
		}
		.wrapper {
			height: 600px;
			overflow: hidden;
			background: -moz-linear-gradient(top,  rgba(135,224,253,1) 71%, rgba(255,255,255,1) 100%);
			background: -webkit-linear-gradient(top,  rgba(135,224,253,1) 71%,rgba(255,255,255,1) 100%);
			background: linear-gradient(to bottom,  rgba(135,224,253,1) 71%,rgba(255,255,255,1) 100%);
		}
		.borda {
			height: 500px;
			margin: 20px auto;
			padding: 20px;
			position: relative;
			width: 700px;
		}

		/* ÁRVORE */
		.arvore {
			margin: 0 auto;
			position: relative;
    		width: 280px;
		}
		.arvore .estrela-brilho {
			height: 70px;
		    margin: -30px auto -23px;
		    padding-top: 30px;
		    position: relative;
		    width: 100px;
		    z-index: 5;
			background: -moz-radial-gradient(center, ellipse cover,  rgba(252,247,199,1) 0%, rgba(252,247,199,0) 50%);
			background: -webkit-radial-gradient(center, ellipse cover,  rgba(252,247,199,1) 0%,rgba(252,247,199,0) 50%);
			background: radial-gradient(ellipse at center,  rgba(252,247,199,1) 0%,rgba(252,247,199,0) 50%);
		}
		.arvore .estrela,
		.arvore .estrela div {
			border-color: transparent transparent #FFFB87;
		    border-style: solid;
		    border-width: 0 20px 35px;
		    height: 0;
		    margin: 0 auto;
		    width: 0;
		}
		.arvore .estrela div {
			border-color: #FFFB87 transparent transparent;
		    border-width: 35px 20px 0;
		    left: -20px;
		    position: relative;
		    top: 12px;
		}
		@-moz-keyframes pisca 
		{
			0% {border-color: transparent;}
			100% {border-color: #fff;}
		}
		@-webkit-keyframes pisca 
		{
			0% {border-color: transparent;}
			100% {border-color: #fff;}
		}
		@keyframes pisca
		{
			0% {border-color: transparent;}
			100% {border-color: #fff;}
		}

		/* GALHOS */
		.arvore .galho {
			background-color: green;
			-webkit-border-radius: 0 0 100px 0;
    		border-radius: 0 0 100px 0;
    		border-left: 4px dotted #FFFFFF;
    		border-top: 4px dotted #FFFFFF;
		 ...