JSFiddle - React, Tailwind, and code Playground

by Ifnak

HTML

<div id="wrap">
  <h1>Marios World</h1>
  <div id="wrap_menu">
    <label for="size">Size Me: </label>
    <input type="number" step="1" min="0" id="size" value="1" />
  </div>
  <div id="wrap_world">
    <canvas id="m"></canvas>
  </div>
  <p><span class="foot">Mi</span></p>
</div>

CSS

@import url('http://fonts.googleapis.com/css?family=Kavoon');
@import url('http://fonts.googleapis.com/css?family=Tangerine');
@import url(http://fonts.googleapis.com/css?family=Condiment);
* {
  margin        : 0;
  padding       : 0;
  font-family   : Tangerine, Kavoon, 'Gotham Rounded A',
                  'Gotham Rounded B', arial, sans-serif;
}
html,body {
  background  : #e39b16;
  background  : #c78813;
  background  : #e98724;
  background  : #753910;
  background  : #c84c0c;
  background  : #b6450a;
  background    : #5c94d0;
  height        : 100%;
  background      : linear-gradient(#5c94d0, #185090);
}
#wrap {
  position      : relative;
  padding       : 10px 15px 20px 10px;
  margin        : 15px auto;
  border        : 2px solid #efefef;
  width         : 80%;
  color         : #fcfcfc;
  border-radius : 4px;
  box-shadow    : -1px 0 3px #efefef;
  background    : #b6450a;
}
#wrap_world {
  width         : 100%;
  overflow-x    : scroll;
  overflow-y    : hidden;
  border        : 2px solid #ccc;
}
#wrap_menu {
  padding       : 10px 0 10px 0;
  text-align    : right;
}
#m {
}
#size {
  position      : relative;
  cursor        : pointer;
  font-size     : 19pt;
  text-shadow   : -1px -1px 3px #ea6e21;
  padding       : 0 0 3px 5px;
  margin        : 8px 0 0 15px;
  box-shadow    : 0 0 3px #a23242;
  background    : #fc9838;
  color         : #c84c0c;
  width         : 60px;
  border-radius : 4px;
  border-style  : solid;
  font-weight   : bold;
}
label[for=size] {
  font-size     : 18pt;
  font-weight   : bold;
  text-shadow   : -1px -1px 5px #333;
  font-style    : italic;
  margin-left   : 20px;
  padding       : 2px;
  
}
h1 {
  text-align    : center;
  text-shadow   : -1px -1px 5px #333;
  border        : 3px outset;
  border-radius : 4px;
  margin        : 2px auto;
  padding-top   : 3px;
  width         : 300px;
  border-color  : #c7561b;
  font-family   : Vintage;
font-family: 'Shadows Into Light', cursive;
  font-family   : 'Condiment',...

JavaScript

(function () {
var D, C, c, S, s, 
    R, F, Z, X, 
    Ø, Å,
    K,
    L = 'length',
    Y = 'fillStyle',
    u = 'split',
    U = 'join',
    f = [
        '#000',    '#c84c0c', '#fc9838', '#00a800',
        '#80d010', '#fcbcb0', '#3cbcfc', '#fcfcfc'
    ]
;

/* ----------------------- data unpackeer and loader ------------------------...