JSFiddle - React, Tailwind, and code Playground

by cheack

HTML

<!-- jquery.min.js -->
<script src="http://jsrun.it/assets/d/W/T/F/dWTFa"></script>

<!-- jquery.velocity.min.js -->
<script src="http://jsrun.it/assets/8/o/L/k/8oLk8"></script>

<!-- live_pen_remember_scroll.js -->
<script src="http://jsrun.it/assets/2/4/o/d/24odx"></script>

<div id="outer-wrapper">
    <div id="wrapper">
        <div id="blocks" />
    </div>
    <div id="ui">
        <label for="animation-in">
            animation out
            <select id="animation-in" name="animation-in">
                <option value="center">center</option>
                <option value="explode">explode</option>
                <option value="top">beam</option>
            </select>
        </label>
        <label for="animation-out">
            animation in
            <select id="animation-out" name="animation-out">
                <option value="center">center</option>
                <option value="explode">implode</option>
                <option value="top">beam</option>
            </select>
        </label>				
        <button id="play">▶</button>
    </div>
</div>

CSS

body {
	background-image: url(http://jsrun.it/assets/w/i/3/R/wi3Rs.png);
	font-family: sans-serif;
	color: #666;
	font-size: 12px;
	background-position: 9px 0px;
}

button,
select {
	font-family: sans-serif;
}

#outer-wrapper {
	width: 100%;
	height: 100%;
	overflow: hidden;
	position: absolute;
	top: 0;
	left: 0;
}

#wrapper {
	overflow: hidden;
	width: 100%;
	height: 100%;
}

#wrapper::before {
	content: 'loading...';
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	width: 200px;
	height: 40px;
	line-height: 40px;
	margin-left: -100px;
	margin-top: -20px;
	color: #333;
	text-align: center;
	transition: all 0.3s;
	opacity: 0;
}

#wrapper.is-loading::before {
	opacity: 1;
}

#blocks {
	position: absolute;
	z-index: 1;
	width: 680px;
	height: 470px;
	transition-property: transform, -webkit-transform;
	transition-duration: 0.2s;
	transition-timing-function: ease-out;
}

#ui {
	position: relative;
	z-index: 10;
	padding: 10px;
}

	#ui select
	{
		margin-right: 30px;
	}

.block {
	width: 28px;
	height: 28px;
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	opacity: 1;
	background-image: url(http://jsrun.it/assets/1/w/V/d/1wVdp.png);
	background-repeat: no-repeat;
	-webkit-transform: translateX(-370px) translateY(-92px);
	transform: translateX(-370px) translateY(-92px);
}

.block.is-hidden {
	display: none;
}

.block.is-transparent {
	opacity: 0;
}

.block.is-transitioning {
	transition: all 0.5s;
}

.color-red {
	background-position: 0 -112px;
}
	
.color-green {
	background-position: 0 -56px;
}

.color-pink {
	background-position: 0 -84px;
}

.color-blue {
	background-position: 0 0;
}

.color-brown {
	background-position: 0 -225px;
}

.color-white {
	background-position: 0 -196px;
}

.color-yellow {
	background-position: 0 -140px;
}

.color-orange {
	background-position: 0 -28px;
}

.color-transparent {
	background-position: -28px -168px;
}

#snorpey {
  position: absolute;
  z-index: 3;
  left: 10px;
  bottom: 0px;
}

#snorpey a {
...

JavaScript

// forked from snorpey's "Block Animation Demo" http://codepen.io/snorpey/pen/wpKLl


var DOT_SIZE = 16;
var X_START_POS = 450;
var Y_START_POS = 200;
var Z_START_POS = 0;

// ‥‥‥‥‥‥‥‥‥‥‥‥‥□□□
// ‥‥‥‥‥‥〓〓〓〓〓‥‥□□□
// ‥‥‥‥‥〓〓〓〓〓〓〓〓〓□□
// ‥‥‥‥‥■■■□□■□‥■■■
// ‥‥‥‥■□■□□□■□□■■■
// ‥‥‥‥■□■■□□□■□□□■
// ‥‥‥‥■■□□□□■■■■■‥
// ‥‥‥‥‥‥□□□□□□□■‥‥
// ‥‥■■■■■〓■■■〓■‥‥‥
// ‥■■■■■■■〓■■■〓‥‥■
// □□■■■■■■〓〓〓〓〓‥‥■
// □□□‥〓〓■〓〓□〓〓□〓■■
// ‥□‥■〓〓〓〓〓〓〓〓〓〓■■
// ‥‥■■■〓〓〓〓〓〓〓〓〓■■
// ‥■■■〓〓〓〓〓〓〓‥‥‥‥‥
// ‥■‥‥〓〓〓〓‥‥‥‥‥‥‥‥

var dataSet = [
    "無","無","無","無","無","無","無","無","無","無","無","無","無","肌","肌","肌",
    "無","無","無","無","無","無","赤","赤","赤","赤","赤","無","無","肌","肌","肌",
    "無","無","無","無","無","赤","赤","赤","赤","赤","赤","赤","赤","赤","肌","肌",
    "無","無","無","無","無","茶","茶","茶","肌","肌","茶","肌","無","赤","赤","赤",
    "無","無","無","無","茶","肌","茶","肌","肌","肌","茶","肌","肌","赤","赤","赤",
    "無","無","無","無","茶","肌","茶","茶","肌","肌","肌","茶","肌","肌","肌","赤",
    "無","無","無","無","茶","茶","肌","肌","肌","肌","茶","茶","茶","茶","赤","無",
    "無","無","無","無","無","無","肌","肌","肌","肌","肌","肌","肌","赤","無","無",
    "無","無","赤","赤","赤","赤","赤","青","赤","赤","赤","青","赤","無","無","無",
    "無","赤","赤","赤","赤","赤","赤","赤","青","赤","赤","赤","青","無","無","茶",
    "肌","肌","赤","赤","赤","赤","赤","赤","青","青","青","青","青","無","無","茶",
    "肌","肌","肌","無","青","青","赤","青","青","黄","青","青","黄","青","茶","茶",
    "無","肌","無","茶","青","青","青","青","青","青","青","青","青","青","茶","茶",
    "無","無","茶","茶","茶","青","青","青","青","青","青","青","青","青","茶","茶",
    "無","茶","茶","茶","青","青","青","青","青","青","青","無","無","無","無","無",
    "無","茶","無","無","青","青","青","青","無","無","無","無","無","無","無","無"
];

function getRgbColor( c )
{
    var colorHash = {
        "無":"black",  // "#000000",
        "白":"white",  // "#ffffff",
        "肌":"orange", // "#ffcccc",
        "茶":"brown",  // "#800000",
        "赤":"red",    // "#ff0000",
        "黄":"yellow", // "#ffff00",
        "緑":"green",  // "#00ff00",
        "水":"cyan",   // "#00ffff",
        "青":"blue",   // "#0000ff",
      ...