JSFiddle - React, Tailwind, and code Playground

by envira

HTML

<!--Some code was taken from
	http://matthew.wagerfield.com/parallax
	http://tympanus.net/codrops/2013/12/24/merry-christmas-with-a-bursting-gift-box/

	License
	http://creativecommons.org/licenses/by-nc-sa/4.0/
	-->
<link href='http://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'>

<body>
	<header>
		<div class="can"> <canvas id="snowfall"></canvas></div>
		</header>	
		<nav>
			<div id="merrywrap" class="merrywrap">
			<div class="giftbox"></div></div>
				<div class="song">	
				<img src="https://lh6.googleusercontent.com/-Pv2Qe3P7aiI/VFDref9o8FI/AAAAAAAADnY/Q6Uz-VITFqE/s35-no/song.png" alt="Play Button" onclick="StartOrStop('music/songs.mp3')">
				<audio id="song_a"></audio>
				</div>
		</nav>
	<section>	
		<h1>Happy Holiday</h1>
		<div id="container" class="container">
			<ul id="scene" class="scene">
				<li class="layer" id="im"data-depth="1.00"><img src="https://lh6.googleusercontent.com/yPorobiMR-qjKyg8JHJYDiqwwwMO3Z2_VUvCayMyTw=w973-h384-no"></li>
				<li class="layer" id="im1" data-depth="1.00"><img src="https://lh6.googleusercontent.com/yPorobiMR-qjKyg8JHJYDiqwwwMO3Z2_VUvCayMyTw=w973-h384-no"></li>
				<li class="layer" id="im2" data-depth="1.00"><img src="https://lh6.googleusercontent.com/yPorobiMR-qjKyg8JHJYDiqwwwMO3Z2_VUvCayMyTw=w973-h384-no"></li>
				<li class="layer" id="im3" data-depth="1.00"><img src="https://lh6.googleusercontent.com/yPorobiMR-qjKyg8JHJYDiqwwwMO3Z2_VUvCayMyTw=w973-h384-no"></li>
				<li class="layer" id="im4" data-depth="1.00"><img src="https://lh6.googleusercontent.com/yPorobiMR-qjKyg8JHJYDiqwwwMO3Z2_VUvCayMyTw=w973-h384-no"></li>
				<li class="layer" id="im5" data-depth="1.00"><img src="https://lh6.googleusercontent.com/yPorobiMR-qjKyg8JHJYDiqwwwMO3Z2_VUvCayMyTw=w973-h384-no"></li>
				<li class="layer" id="im6" data-depth="1.00"><img src="https://lh6.googleusercontent.com/yPorobiMR-qjKyg8JHJYDiqwwwMO3Z2_VUvCayMyTw=w973-h384-no"></li>
			</ul>
		</div>
	</section>

</body>

CSS

body {
  font-size: 18px;
  background-color: #e74c3c;
  height: 100%;
  margin: 0;
  overflow: hidden;
}

h1 {
  margin: 120px 20px 0 0;
  color: white;
  font-size: 42pt;
  font-family: "Pacifico";
  text-align: center;
}

.layer {
  width: 100%;
  height: 100%;
}

ul img {
  display: block;
  margin: 0;
 
}

.container {
  position: absolute;
  margin: auto;
  bottom: 0;
}

.scene {
  padding: 0;
  margin: 0;
}

.giftbox {
  width: 35px;
  height: 35px;
  position: absolute;
  z-index: 1;
  cursor: pointer;
  top: 150px;
  left: 15px;
  background-image: url(https://lh4.googleusercontent.com/-tJs9cts4fHQ/VFDreQq-FNI/AAAAAAAADnc/OFB3lXCD5D4/s695-no/snowflake.png);
  background-size: 100%;
}

.giftbox::after {
  content: '';
  position: absolute;
  color: #fff;
  width: 100%;
  font-size: 24px;
  z-index: 1;
}

#snowfall {
  z-index: 1;
  position: absolute;
}

#im {
  padding-right: 970px;
}

#im1 {
  padding-left: 970px;
  position: absolute;
  z-index: 1;
}

#im2 {
  padding-left: 1940px;
  position: absolute;
  z-index: 1;
}

#im3 {
  padding-left: 2910px;
  position: absolute;
  z-index: 1;
}

#im4 {
  padding-left: 3880px;
  position: absolute;
  z-index: 1;
}

#im5 {
  padding-left: 4850px;
  position: absolute;
  z-index: 1;
}

#im6 {
  padding-left: 5820px;
  position: absolute;
  z-index: 1;
}

.scene {
  margin: 185px 0 0 0;
}

.can {
  padding: 1px;
}

.song img {
  position: absolute;
  z-index: 1;
  cursor: pointer;
  top: 203px;
  left: 13px;
}

@media screen and (max-width: 502px) {
  
  .giftbox {
  top: 20px;
  left: 20px;
 }    
  
  .song img {
  top: 20px;
  left: 62px;
}
  
}

JavaScript

//============================================================
//
// The MIT License
//
// Copyright (C) 2014 Matthew Wagerfield - @wagerfield
//
// Permission is hereby granted, free of charge, to any
// person obtaining a copy of this software and associated
// documentation files (the "Software"), to deal in the
// Software without restriction, including without limitation
// the rights to use, copy, modify, merge, publish, distribute,
// sublicense, and/or sell copies of the Software, and to
// permit persons to whom the Software is furnished to do
// so, subject to the following conditions:
//
// The above copyright notice and this permission notice
// shall be included in all copies or substantial portions
// of the Software.
//
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY
// OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT
// LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
// FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO
// EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE
// FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
// AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE
// OR OTHER DEALINGS IN THE SOFTWARE.
//
//============================================================

/**
 * Parallax.js
 * @author Matthew Wagerfield - @wagerfield
 * @description Creates a parallax effect between an array of layers,
 *              driving the motion from the gyroscope output of a smartdevice.
 *              If no gyroscope is available, the cursor position is used.
 */
;(function(window, document, undefined) {

  // Strict Mode
  'use strict';

  // Constants
  var NAME = 'Parallax';
  var MAGIC_NUMBER = 30;
  var DEFAULTS = {
    relativeInput: false,
    clipRelativeInput: false,
    calibrationThreshold: 100,
    calibrationDelay: 500,
    supportDelay: 500,
    calibrateX: false,
    calibrateY: true,
    invertX: true,
    invertY: true,
    limitX: false,
   ...