JSFiddle - React, Tailwind, and code Playground

by HugeHugh

HTML

<h3>Cloud Generator</h3>
<a target="_blank" href="http://www.hughanderson.com/">Written by Hugh Anderson</a>
<div class="clear"></div>

    <input type="text" id="cloudNumTxt" value="1" /><input type="button" id="setCloudNum" value="Set Cloud Number" />
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <input type="text" id="scaleFactorTxt" value="0.4" /><input type="button" id="setScaleFactor" value="Set Scale Factor" />
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <select id="loadCloudSel"></select>
    <br />
    <input type="button" id="addPuffButton" value="Add a Puff" />
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <input type="button" id="deselectButton" value="Deselect" disabled="disabled" />
    <input type="button" id="puffBack" value="Move Puff Back" disabled="disabled" />
    <input type="button" id="puffFore" value="Move Puff Foreward" disabled="disabled" />
    <input type="button" id="deletePuffButton" value="Delete Puff" disabled="disabled" />
    <input type="button" id="deleteAllButton" value="Clear all" disabled="disabled" />

    <br /><br />
    <i>Click and drag to move puffs.  Hold Shift key to scale puffs.</i>
    <div class="sky skyBg"></div>
    <pre class="output"></pre>

CSS

.skyBg {position:relative; width:600px; height:240px; 
background: rgb(39,84,209); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(39,84,209,1) 0%, rgba(161,219,255,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(39,84,209,1)), color-stop(100%,rgba(161,219,255,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(39,84,209,1) 0%,rgba(161,219,255,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(39,84,209,1) 0%,rgba(161,219,255,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(39,84,209,1) 0%,rgba(161,219,255,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(39,84,209,1) 0%,rgba(161,219,255,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2754d1', endColorstr='#a1dbff',GradientType=0 ); /* IE6-9 */
        }
.output {width:340px; background:#ffffa0; border:2px solid #555; position:absolute; right:0; top:1.8em; padding:10px}
        [class^='cloud'] {background:rgba(0,0,0,0.1); width:350px; height:200px; position:absolute; left:20px; top:20px}
        [class^='puff'] {background:rgba(255,255,255,0.1) url(http://www.hughanderson.com/assets/puff.png) no-repeat; width:80px; height:81px; position:absolute; cursor: move}
input[type=text] {width:2em}
.quarterSize {position:absolute; top:70px; left:420px; -webkit-transform:scale(0.4)}
.selected {border:1px dotted yellow}

body {font-family:sans-serif}
h3 {float:left; margin:0 0 1em 0}
a {font-size:small; display:block; text-align:right; float:right}
.clear {clear:both}

JavaScript

var cloudNum = 1;
        var puffs = [];
        var overallScaleFactor = 0.4;
        var newline = '\n';
        var tab = '\t';
        var bar = '=================';

        var presets = {
            cloud1: [{
                "left": 161,
                "top": 79,
                "scale": 0.78
            }, {
                "left": 109,
                "top": 94
            }, {
                "left": 44,
                "top": 92,
                "scale": 0.82
            }, {
                "left": 134,
                "top": 42,
                "scale": 0.82
            }, {
                "left": 75,
                "top": 49,
                "scale": 0.86
            }],
            cloud2: [{
                "left": 154,
                "top": 54
            }, {
                "left": 92,
                "top": 65,
                "scale": 0.78
            }, {
                "left": 38,
                "top": 58
            }, {
                "left": 147,
                "top": 16,
                "scale": 0.62
            }, {
                "left": 104,
                "top": 12,
                "scale": 0.86
            }, {
                "left": 61,
                "top": 21,
                "scale": 0.68
            }],
            cloud3: [{
                "left": 172,
                "top": 77
            }, {
                "left": 115,
                "top": 98,
                "scale": 0.80
            }, {
                "left": 216,
                "top": 50,
                "scale": 0.72
            }, {
                "left": 126,
                "top": 39
            }, {
                "left": 68,
                "top": 70,
                "scale": 0.78
            }, {
                "left": 68,
                "top": 117,
                "scale": 0.64
            }, {
                "left": 23,
                "top": 99,
                "scale": 0.70
            }],
            cloud4: [{
               ...