JSFiddle - React, Tailwind, and code Playground

by levchenko_d

HTML

<script src="https://rawgit.com/goldfire/howler.js/master/howler.js"></script>
<div class="loading">
<svg version="1.1" id="filled" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="658.5 205.5 128 128" enable-background="new 658.5 205.5 128 128" xml:space="preserve">
	<g>
		<path fill="#FFFFFF" d="M751.9,284.3c0.8,0.1,1.5,0.1,2.3,0.1c9.1,0,19-3.3,19-8c0,0-28.2-1.4-28.6-22.3c8.4-0.8,14.8-7.9,14.8-7.9
			s-26.5-5.4-26.3-19.5h-0.8c0-0.2,0-0.3,0-0.5c0,0,14.3,1.9,14.3-6.1c-0.9,0.7-24.1-9.6-23.9-14.8c0,5.4-23.5,15.5-24.1,14.8
			c0,8,14.1,6.1,14.1,6.1c0,0.2,0,0.3,0,0.5h-0.5c0,14.3-26.5,19.5-26.5,19.5s6.3,6.9,14.3,7.9c-0.3,21-28.4,22.4-28.4,22.4
			c0,4.7,10.1,8,19,8c0.8,0,1.7-0.1,2.5-0.2c-1.3,17.1-29.3,23.4-29.3,23.4c0,11,26.5,13.8,26.5,13.8c11.2,0,19.4-2.2,24.8-4.3
			c-2.8,13.2-15.4,14.3-15.4,14.3v1.9h45.2v-1.9c0,0-12.4-1.1-15.2-14.3c5.4,2.1,13.6,4.3,24.8,4.3c0,0,26.5-3,26.5-13.8
			C781.2,307.7,753.2,301.4,751.9,284.3z"/>
		<path fill="#FF443C" d="M745.1,331.6c0,0-1.9-0.2-4.3-1.1l-3,3h7.3V331.6z"/>
		<path fill="#FF443C" d="M768.2,303l-18.4,18.4c1.5,0.1,3.2,0.1,4.8,0.1c0,0,3.4-0.4,7.7-1.4l13.9-13.9
			C774,305.5,771.1,304.5,768.2,303z"/>
		<path fill="#FF443C" d="M727.8,333.5l6.9-6.9c-1.7-1.7-3.3-4-4.3-7.1l-14,14H727.8z"/>
		<path fill="#FF443C" d="M768.2,281.8c2.9-1.3,4.8-3,5-5L768.2,281.8z"/>
		<path fill="#FF443C" d="M756,294l-24,24c2.5,0.9,5.5,1.7,9,2.3l21-21C759.7,297.8,757.7,296.1,756,294z"/>
		<path fill="#FF443C" d="M709.7,319.1c2.1-0.6,3.9-1.2,5.5-1.8c-2.8,13.2-15.4,14.3-15.4,14.3v1.9h6.8l45.9-45.9
			c-0.3-1-0.5-2.1-0.6-3.2c0.8,0.1,1.5,0.1,2.3,0.1c0.5,0,0.9,0,1.4,0l9.3-9.3c-2.6-0.7-5.5-1.6-8.3-3L709.7,319.1z"/>
		<path fill="#FF443C" d="M746.1,261.5L686.6,321c2.3,0.4,3.9,0.6,3.9,0.6c2.6,0,5-0.1,7.2-0.3l53.1-53.1
			C748.8,266.3,747.2,264.1,746.1,261.5z"/>
		<path fill="#FF443C" d="M670.4,315.9c2.4,1.3,5.3,2.4,8.1,3.2l74.6-74.6c-2.4-0.8-5.3-1.9-8-3.3L670.4,315.9z"/>
		<path fill="#FF443C"...

CSS

@import url(http://fonts.googleapis.com/css?family=Bangers);

*{
    outline: none;
}

body, html {
    min-width: 500px;
    min-height: 100vh;
    overflow: hidden;
    background: #424269;
    /* Old browsers */
    background: -moz-radial-gradient(center, ellipse cover, #424269 0%, #32324f 100%);
    /* FF3.6+ */
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #424269), color-stop(100%, #32324f));
    /* Chrome,Safari4+ */
    background: -webkit-radial-gradient(center, ellipse cover, #424269 0%, #32324f 100%);
    /* Chrome10+,Safari5.1+ */
    background: -o-radial-gradient(center, ellipse cover, #424269 0%, #32324f 100%);
    /* Opera 12+ */
    background: -ms-radial-gradient(center, ellipse cover, #424269 0%, #32324f 100%);
    /* IE10+ */
    background: radial-gradient(ellipse at center, #424269 0%, #32324f 100%);
    /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#424269', endColorstr='#32324f', GradientType=1);
    /* IE6-9 fallback on horizontal gradient */
}

.content{
    display: none;
}

.loading{
    width: 163px;
    height: 128px;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    margin: auto;
}

.loading * {
    top: 0;
    width: 128px;
    height: 128px;
}

.loading_empty {
    overflow: hidden;
    height: 128px;
    position: absolute;
    width: 128px;
}

.loading_percentage{
    font-family: 'Bangers', sans-serif;
    color: white;
    text-align: center;
    font-size: 18pt;
    height: 25px;
    position: absolute;
    top: 138px;
    left: 0;
}

/*composition*/

.comp {
    position: absolute;
    height: 60vh;
    min-height: 210px;
    width: 533px;
    top: 0;
    left: 0;
    padding: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}

#snow {
    display: none;
}

.comp svg {
    position: absolute;
    bottom: 180px;
    width: 400px;
    left: 0;
    right: 0;
    margin: auto;
}

#tree svg {
    display: block;
...

JavaScript

/*
Howler - https://rawgit.com/goldfire/howler.js/master/howler.js
1x - octave up
0x - octave down
xs - sharp note
*/

var Piano = (function(customSong){
    
    var song = customSong || ["d", "b", "a", "g", "d", "d", "d", "d", "b", "a", "g", "e", "e", "1c", "b", "a", "fs", "1d", "1d", "1c", "a", "b", "d", "b", "a", "g", "d", "d", "d", "b", "a", "g", "e", "e", "e", "1c", "b", "a", "1d", "1d", "1d", "1d", "1e", "1d", "1c", "a", "g", "b", "b", "b", "b", "b", "b", "b", "1d", "g", "a", "b", "1c", "1c", "1c", "1c", "1c", "b", "b", "b", "b", "b", "a", "a", "b", "a", "1d", "b", "b", "b", "b", "b", "b", "b", "1d", "g", "a", "b", "1c", "1c", "1c", "1c", "1c", "b", "b", "b", "b", "1d", "1d", "1c", "a", "g", "d", "b", "a", "g", "d", "d", "d", "d", "b", "a", "g", "e", "e", "1c", "b", "a", "fs", "1d", "1d", "1c", "a", "b", "d", "b", "a", "g", "d", "d", "d", "b", "a", "g", "e", "e", "e", "1c", "b", "a", "1d", "1d", "1d", "1d", "1e", "1d", "1c", "a", "g", "b", "b", "b", "b", "b", "b", "b", "1d", "g", "a", "b", "1c", "1c", "1c", "1c", "1c", "b", "b", "b", "b", "b", "a", "a", "b", "a", "1d", "b", "b", "b", "b", "b", "b", "b", "1d", "g", "a", "b", "1c", "1c", "1c", "1c", "1c", "b", "b", "b", "b", "1d", "1d", "1c", "a", "g", "e", "1cs", "b", "a", "e", "e", "e", "e", "1cs", "b", "a", "f", "f", "1d", "1cs", "b", "g", "1e", "1e", "1d", "b", "1cs", "e", "1cs", "b", "a", "e", "e", "e", "1cs", "b", "a", "f", "f", "f", "1d", "1cs", "b", "1e", "1e", "1e", "1e", "fs", "1e", "1d", "b", "a"];

    var notes = {

        '0f': new Howl({
            urls: ['http://arbgame.8nio.com/sounds/piano/0f.wav'],
            onload : function(){loading(100/Object.size(notes));}
        }),
            '0fs': new Howl({
            urls: ['http://arbgame.8nio.com/sounds/piano/0fs.wav'],
            onload : function(){loading(100/Object.size(notes));}
        }),
            '0g': new Howl({
            urls: ['http://arbgame.8nio.com/sounds/piano/0g.wav'],
            onload :...