JSFiddle - React, Tailwind, and code Playground

by dievardump

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/require.js/2.1.11/require.min.js"></script>
<div id='options' style='position: absolute; top: 0; right: 160px;'></div>

CSS

html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;outline:none}html{overflow-x:hidden}html,body{height:100%;width:100%}body.iframe{background:none}body.noscroll{overflow:hidden;margin-right:17px}article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}h1,h2,h3,h4,h5,h6{font-weight:normal}li{list-style-type:none}a,a:hover,a:active{outline:none;text-decoration:none;color:#000}a img{border:none}img{vertical-align:middle}fieldset{border:0;margin:0;padding:0}textarea{resize:vertical}canvas{position:absolute;top:0;left:0}

JavaScript

/**
 * Heir v2.0.0 - http://git.io/F87mKg
 * Oliver Caldwell
 * MIT license
 */

/*!
 * EventEmitter v4.2.7 - git.io/ee
 * Oliver Caldwell
 * MIT license
 * @preserve
 */

/**
 * dat-gui JavaScript Controller Library
 * http://code.google.com/p/dat-gui
 *
 * Copyright 2011 Data Arts Team, Google Creative Lab
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 */

define("extend",[],function(){function e(e){return Array.prototype.slice.call(arguments,1).forEach(function(t){Object.getOwnPropertyNames(t).forEach(function(n){e[n]=t[n]})}),e}return e}),define("Stats",[],function(){var e=function(){var e=Date.now(),t=e,n=0,i=1/0,o=0,r=0,s=1/0,a=0,l=0,d=0,c=document.createElement("div");c.id="stats",c.addEventListener("mousedown",function(e){e.preventDefault(),b(++d%2)},!1),c.style.cssText="width:80px;opacity:0.9;cursor:pointer";var u=document.createElement("div");u.id="fps",u.style.cssText="padding:0 0 3px 3px;text-align:left;background-color:#002",c.appendChild(u);var h=document.createElement("div");h.id="fpsText",h.style.cssText="color:#0ff;font-family:Helvetica,Arial,sans-serif;font-size:9px;font-weight:bold;line-height:15px",h.innerHTML="FPS",u.appendChild(h);var p=document.createElement("div");for(p.id="fpsGraph",p.style.cssText="position:relative;width:74px;height:30px;background-color:#0ff",u.appendChild(p);74>p.children.length;){var f=document.createElement("span");f.style.cssText="width:1px;height:30px;float:left;background-color:#113",p.appendChild(f)}var m=document.createElement("div");m.id="ms",m.style.cssText="padding:0 0 3px 3px;text-align:left;background-color:#020;display:none",c.appendChild(m);var...