JSFiddle - React, Tailwind, and code Playground

HTML

<html>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<style>
body {
    font-family: sans-serif;
    text-align: center;
}
#container {
    width: 800px;
    margin-right:auto;
    margin-left:auto;
    margin-top: 80px;

    text-align: center;
}
#result {
    width:800px;
    height:auto;
    display:block;
    margin:10px;
    padding-top: 5px;
    padding-bottom: 5px;
    background:silver;
    -moz-border-radius: 8px;
    border-radius: 8px;
    vertical-align: middle;
    text-align: center;
    cursor: hand;
}

#canvas {
    width:800px;
    height:120px;
    display:block;
    margin:10px;
}

#action {
    font-size: 1.4em;
    padding: 5px;
    color: white;
    display: block;
    float: center;
    vertical-align: middle;
    text-align: center;
    text-shadow: 0.0em 0.1em 0.2em grey;
}

</style>

<body>
<div id="container">
    <canvas id="canvas" width="800" height="120" >Canvas, where art thou? (no pun indended)</canvas>
    <div style="" id="result" onClick="updateHue()"><div id="action">Update Das Hue!</div></div>
</div>


<script>

// terrible global for Hue colour
var hueColour = [0,0,0] 

// more globals for API
var counter;
var apikey = "a2d7f7b9ac7f1be7ac096ed126fc245f"
var urlstr = "http://webearth.org:2008/api/" + apikey + "/lights/3/state"
var state = false;

function makegradient() {

    // make a canvas
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");

    // set up gradient
    var grad = ctx.createLinearGradient(0, 120,
    canvas.width, canvas.height);
    grad.addColorStop(0, '#fa6c0c');
    grad.addColorStop(0.08, '#f6300a');
    grad.addColorStop(0.21, '#d11b7e');
    grad.addColorStop(0.35, '#7425b1');
    grad.addColorStop(0.52, '#0a62da');
    grad.addColorStop(0.68, '#00c000');
    grad.addColorStop(0.82, '#f6ef2a');
    grad.addColorStop(0.99, '#fa6c0c');

    // fill rect
    ctx.fillStyle = grad;
    ctx.fillRect(0, 0, canvas.width,...