JSFiddle - React, Tailwind, and code Playground

HTML

<span class="loading"></span>

<div class="main-window">
    <div class="window">
        <div class="border">
            <div class="inside-border">
                <div class="doorhandle"></div>
            </div>
        </div>
        <div id="outside">
            <canvas id="canvas" height="300px" width="600px"></canvas>
            <div class="rime"></div>
        </div>
        <div class="torse left-torse"></div>
        <div class="torse right-torse"></div>
        <div class="wrapper-postal">
            <div class="postal">
                <div class="wrapper">
                    <div class="inside-postal">
                        <p>Поздравляю!</p>
                        <p class="second-p">С Новым</p>
                        <p class="year">&bull; 2014 &bull;</p>
                        <div class="ribbon">
                            <div class="ribbon-stitches-top"></div> <strong class="ribbon-content"><h1>Годом!</h1></strong>

                            <div class="ribbon-stitches-bottom"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="congratulation">
                <div class="wrapper-congratulation">
                    <p>С Новым годом поздравляем,
                        <br />Счастья, радости желаем!
                        <br />Всем, кто холост - пожениться,
                        <br />Всем, кто в ссоре - помириться,
                        <br />Про обиды позабыть,
                        <br />Всем, кто болен - стать здоровым
                        <br />Расцвести, помолодеть.
                        <br />Всем, кто тощий - стать потолще
                        <br />Слишком толстым - похудеть.
                        <br />Слишком умным - стать попроще,
                        <br />Недалеким - поумнеть.
                        <br />Всем седым - чтоб потемнели,
                        <br />Чтоб у лысых волоса
                        <br />на...

CSS

/* reset */
 a, abbr, acronym, address, applet, article, aside, audio, b, blockquote, big, body, center, canvas, caption, cite, code, command, datalist, dd, del, details, dfn, dl, div, dt, em, embed, fieldset, figcaption, figure, font, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, html, i, iframe, img, ins, kbd, keygen, label, legend, li, meter, nav, object, ol, output, p, pre, progress, q, s, samp, section, small, span, source, strike, strong, sub, sup, table, tbody, tfoot, thead, th, tr, tdvideo, tt, u, ul, var, input {
    margin:0;
    padding:0;
}
blockquote, q {
    quotes:none
}
table, table td {
    padding:0;
    border:none;
    border-collapse:collapse
}
a {
    outline:none;
    cursor: pointer;
}
img {
    border: none;
}
li {
    list-style: none;
}
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section, summary {
    display: block;
}
/* END reset */
 html, body {
    position: relative;
    height: 100%;
}
body {
    background: -moz-linear-gradient(top, #50344e 0%, #754654 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #00c5f1), color-stop(100%, #754654));
    background: -webkit-linear-gradient(top, #50344e 0%, #754654 100%);
    background: -o-linear-gradient(top, #50344e 0%, #754654 100%);
    background: -ms-linear-gradient(top, #50344e 0%, #754654 100%);
    background: linear-gradient(to bottom, #50344e 0%, #754654 100%);
    background-attachment: fixed;
    min-width: 1000px;
}
/*================================*/
 .main-window {
    position: relative;
    height: 100%;
    min-height: 800px;
    background: url("http://chitki.ru/pages/images/bg.png") repeat;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    padding: 80px 20px 0;
    overflow: hidden;
    opacity: 0;
    -webkit-transition: all 0.6s ease-in-out;
    -moz-transition: all 0.6s ease-in-out;
    -o-transition: all 0.6s ease-in-out;
    transition: all 0.6s ease-in-out;
}
.visible {
   ...

JavaScript

WebFontConfig = {
    google: {
        families: ['Open+Sans:400italic,400,700,300:latin,cyrillic',
            'Marck+Script::latin,cyrillic']
    }
};
(function () {
    var wf = document.createElement('script');
    wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
        '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
    wf.type = 'text/javascript';
    wf.async = 'true';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(wf, s);
})();

$.fn.torse = function () {

    $this = $(this);

    var leftTorse = $(".left-torse", $this);
    var rightTorse = $(".right-torse", $this);

    var countBall = function () {
        var heightTorse = $this.innerHeight();

        return parseInt(heightTorse / 160);
    };

    var filling = function () {

        var redBall = $("<div>").attr("class", "item-torse").append($("<div>").attr("class", "ball red-ball"));
        var purpleBall = $("<div>").attr("class", "item-torse").append($("<div>").attr("class", "ball purple-ball"));

        var count = countBall();

        for (var i = 0; i <= count; i++) {
            leftTorse.append(purpleBall.clone()).append(redBall.clone());
            rightTorse.append(purpleBall.clone()).append(redBall.clone());
        }
    };

    $(window).resize(function () {
        filling();
    });

    filling();

};

(function () {

    // Start Animation only if browser support <canvas>
    if (document.createElement('canvas').getContext) {
        if (document.readyState === 'complete') Snow();
        else window.addEventListener('DOMContentLoaded', Snow, false);
    }

    var deg = Math.PI / 180; // For converting degrees to radians
    var sqrt3_2 = Math.sqrt(3) / 2; // Height of an equilateral triangle
    var flakes = []; // Things that are dropping
    var scrollspeed = 50; // How often we animate things
    var snowspeed = 1000; // How often we add a new snowflake
    var maxflakes = 100; // Max number of flakes...