JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
	<div class="bottom_snow"></div>
	<div class="tree"></div>
	<div class="tree_bot"></div>
	<div class="ball red"></div>
	<div class="ball green"></div>
	<div class="ball blue"></div>
	<div class="ball red rsmall"></div>
	<div class="ball green gsmall"></div>
	<div class="ball blue bsmall"></div>
	<h1>С Новым Годом</h1>
	<div class="fall_snow"></div>
</div>

CSS

*{
 margin:0;
 padding:0;
}
body {
 background-color:#eee;
 color:#fff;
}
/* стили основной области */
.container {
 height: 500px;
 margin: 50px auto;
 overflow: hidden;
 position: relative;
 width: 800px;

 background-color: #0093d8;
 background: -moz-linear-gradient(top, #0093d8, #fff);
 background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #fff),color-stop(1, #0093d8));

 -moz-box-shadow: 0 10px 10px rgba(0,0,0,0.5);
 -webkit-box-shadow: 0 10px 10px rgba(0,0,0,0.5);
 box-shadow: 0 10px 10px rgba(0,0,0,0.5);
}

/* стили снега внизу */
.bottom_snow {
 position: absolute;
 z-index: 5;
 top: 400px;
 left: 50%;
 margin-left: -500px;
 width: 1000px;
 height: 1000px;
 background: #e2e2e2;

 border-radius: 1000px;
 -moz-border-radius: 1000px;
 -webkit-border-radius: 1000px;
}
.bottom_snow:before , .bottom_snow:after {
 background-color: #fff;
 content: "";
 height: 1000px;
 position: absolute;
 top: -25px;
 width: 1000px;

 border-radius: 1000px;
 -moz-border-radius: 1000px;
 -webkit-border-radius: 1000px;
}
.bottom_snow:before {
 left: 400px;
}
.bottom_snow:after {
 right: 400px;
}

/* стили надписи */
h1 {
 color: #FAFAFA;
 font: bold 80px 'Comic Sans MS',Arial;
 text-align: center;
 text-shadow: 2px 2px 1px rgba(0, 0, 0, 0.85), 4px 4px 0 #CFEAED;
 text-transform: uppercase;

 -webkit-user-select: none;
 -khtml-user-select: none;
 -moz-user-select: none;
 -o-user-select: none;
 user-select: none;
}

/* стили для елки */
.tree, .tree:before, .tree:after, .tree_bot, .tree_bot:before, .tree_bot:after {
 height: 0;
 position: absolute;
 width: 0;

 border-radius: 40px;
 -moz-border-radius: 40px;
 -webkit-border-radius: 40px;
}
.tree {
 border-left: 20px solid transparent;
 border-right: 20px solid transparent;
 border-bottom: 20px solid green;
 left: 390px;
 top: 135px;
}
.tree:before {
 content:'';
 border-left: 40px solid transparent;
 border-right: 40px solid transparent;
 border-bottom: 40px solid green;
 left: -40px;
 top: 15px;
}
.tree:after {
...