JSFiddle - React, Tailwind, and code Playground

by Muhammad Nugroho

HTML

<head>
	<title>Hipster Dog — Shiny Demos</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<link rel="stylesheet" href="styles/screen.css">
	<link rel="stylesheet" href="/styles/panel.css">
</head>
<body>
	<div id="countryside">
		<input type="button" id="start" value="Start!" name="joyButton" style="display:none;">
		<input type="button" id="sound" value="Toggle Sound" name="sound">
		<div id="old_bicycle">
			<div id="bicycle_frame"></div>
			<div id="big_wheel"></div>
			<div id="small_wheel"></div>
		</div>
		<div id="doggie"></div>
		<audio loop id="music">
			<source src="http://media.shinydemos.com/hipster-dog/polka.mp3" type="audio/mpeg">
			<source src="http://media.shinydemos.com/hipster-dog/polka.ogg" type="audio/ogg">
		</audio>
		<audio id="effect">
			<source src="http://media.shinydemos.com/hipster-dog/effect.mp3" type="audio/mpeg">
			<source src="http://media.shinydemos.com/hipster-dog/effect.ogg" type="audio/ogg">
		</audio>
	</div>
	<!-- 
		Countryside near Amberley picture by Jim Mead http://www.flickr.com/photos/jimmead/4935440241/ 
		Toast Shoe picture by Mike Oliva http://www.flickr.com/photos/mikeyoliva/3968292186/
		Pixel Peeker Polka melody by Kevin McLeod http://incompetech.com/m/c/royalty-free/index.html?keywords=pixel
	-->
	<script src="/scripts/modernizr.js"></script>
	<script src="/scripts/panel.js"></script>
	<script src="scripts/options.js"></script>
	<script src="scripts/script.js"></script>
<script>
var $ = function(d) { return document.getElementById(d); },
    $$ = function(d) { return document.querySelectorAll(d); },
    prefixes = ['', '-o-', '-webkit-', '-moz-', '-ms-'],
    setStyles = function(dom, options, usePrefix) {
      var style = dom.style;
      for (var opt in options) {
        for (var i = 0, l = usePrefix ? prefixes.length : 1; i < l; ++i) {
          style.setProperty(prefixes[i] + opt, options[opt], '');
        }
      }
    },
    flushStyles = function(dom, properties,...

CSS

html, body {
  margin: 0;
  padding: 0;
  background-color: black;
}

#sound {
    position: absolute;
    right: 10px;
}

@-webkit-keyframes willy {0% {
    -webkit-transform: rotate(0deg);
  }
  10% {
    -webkit-transform: rotate(-10deg);
  }
  30% {
    -webkit-transform: rotate(-20deg);
  }
  80% {
    -webkit-transform: rotate(-21deg);
  }
  100% {
    -webkit-transform: rotate(0deg);
  }
}

@-webkit-keyframes swirl {0% {
    -webkit-transform: rotate(0deg);
  }
  50% {
    -webkit-transform: translate(0, -200px) rotate(-180deg);
  }
  100% {
    -webkit-transform: translate(0, 0px) rotate(-360deg);
  }
}

@-o-keyframes willy {0% {
    -o-transform: rotate(0deg);
  }
  10% {
    -o-transform: rotate(-10deg);
  }
  30% {
    -o-transform: rotate(-20deg);
  }
  80% {
    -o-transform: rotate(-21deg);
  }
  100% {
    -o-transform: rotate(0deg);
  }
}

@-o-keyframes swirl {0% {
    -o-transform: rotate(0deg);
  }
  50% {
    -o-transform: translate(0,-200px) rotate(-180deg);
  }
  100% {
    -o-transform: translate(0,0px) rotate(0deg);
  }
}

@-moz-keyframes willy {0% {
    -moz-transform: rotate(0deg);
  }
  10% {
    -moz-transform: rotate(-10deg);
  }
  30% {
    -moz-transform: rotate(-20deg);
  }
  80% {
    -moz-transform: rotate(-21deg);
  }
  100% {
    -moz-transform: rotate(0deg);
  }
}

@-moz-keyframes swirl {0% {
    -moz-transform: rotate(0deg);
  }
  50% {
    -moz-transform: translate(0,-200px) rotate(-180deg);
  }
  100% {
    -moz-transform: translate(0,0px) rotate(0deg);
  }
}

@keyframes willy {0% {
    transform: rotate(0deg);
  }
  10% {
    transform: rotate(-10deg);
  }
  30% {
    transform: rotate(-20deg);
  }
  80% {
    transform: rotate(-21deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

@keyframes swirl {0% {
    transform: rotate(0deg);
  }
  50% {
    transform: translate(0, -200px) rotate(-180deg);
  }
  100% {
    transform: translate(0, 0px) rotate(-360deg);
  }
}

@-webkit-keyframes wheel {
  0% {
    -webkit-transform:...