JSFiddle - React, Tailwind, and code Playground

by halflling

CSS

* 
		{ 
			color: #444; 
			font-family: Monospace; 
			font-size:12px; 
		} 

		body 
		{ 
			margin: 0px;
			overflow: hidden;
		} 

		select 
		{ 
			text-transform: uppercase;
			font-size:11px; 
			text-align:center; 
		} 

		hr 
		{ 
			border: 0;
		 	height: 1px; 
		 	background-color: #ccc; 
		 	margin: 20px 0px; 
		} 

		 .gui 
		 { 
		 	color: #ccc; 
		 	width: 280px;
		 	background-color: #fff; 
		 	border-bottom: 1px solid #ddd; 
		 	padding: 5px 10px; 
		 	text-align: center; 
		 	text-transform: uppercase; 
		 	line-height: 18px; 
		 	cursor: default; 
		 }
		 
		 .button 
		 { 
		 	padding: 2px; 
		 	cursor: pointer; 
		 } 

		 .key 
		 { 
		 	padding: 0px 8px; 
		 	margin-left: 1px; 
		 	background-color: #eee; 
		 }

JavaScript

var _gaq=_gaq||[];

		_gaq.push(["_setAccount","UA-86951-7"]);
		_gaq.push(["_trackPageview"]);

		function circles(a){
			this.init(a)
		}

		circles.prototype={
			context:null,
			prevMouseX:null,
			prevMouseY:null,
			count:null,
			init:function(a){
				this.context=a;
				this.context.globalCompositeOperation="source-over"
			},
			destroy:function(){},
			strokeStart:function(b,a){
				this.prevMouseX=b;
				this.prevMouseY=a
			},
			stroke:function(e,b){
				var g,l,k,h,f,c,j,a;
				this.context.lineWidth=BRUSH_SIZE;
				this.context.strokeStyle="rgba("+COLOR[0]+", "+COLOR[1]+", "+COLOR[2]+", "+0.1*BRUSH_PRESSURE+")";
				l=e-this.prevMouseX;
				k=b-this.prevMouseY;
				h=Math.sqrt(l*l+k*k)*2;
				f=Math.floor(e/100)*100+50;
				c=Math.floor(b/100)*100+50;
				j=Math.floor(Math.random()*10);
				a=h/j;
				
				for(g=0;g<j;g++){
					this.context.beginPath();
					this.context.arc(f,c,(j-g)*a,0,Math.PI*2,true);
					this.context.stroke()
				}

				this.prevMouseX=e;
				this.prevMouseY=b
			},
			strokeEnd:function(){}
		};

		function chrome(a){
			this.init(a)
		}

		chrome.prototype={
			context:null,
			prevMouseX:null,
			prevMouseY:null,
			points:null,
			count:null,
			init:function(a){
				this.context=a;

				if(RegExp(" AppleWebKit/").test(navigator.userAgent)){
					this.context.globalCompositeOperation="darker"
				}

				this.points=new Array();
				this.count=0
			},
			destroy:function(){},
			strokeStart:function(b,a){
				this.prevMouseX=b;
				this.prevMouseY=a
			},
			stroke:function(f,c){
				var e,b,a,g;
				this.points.push([f,c]);
				this.context.lineWidth=BRUSH_SIZE;
				this.context.strokeStyle="rgba("+COLOR[0]+", "+COLOR[1]+", "+COLOR[2]+",...