JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://rawgithub.com/soulwire/sketch.js/master/js/sketch.min.js"></script>
<p>Move your mouse</p>

CSS

@import url(http://fonts.googleapis.com/css?family=Lato);

html, body {
    font-family: 'Lato', sans-serif;
    margin: 0;
}

p {
    text-transform: uppercase;
    text-align: center;
    font-size: 28px;
    position: absolute;
    width: 100%;
    color: #fff;
}

Babel + JSX

Sketch.create({
  setup() {
    this.r = this.g = this.b = random(100, 200)
  },
  mousemove() {
    this.r = 255 * (this.mouse.x / this.width)
    this.g = 255 * (this.mouse.y / this.height)
    this.b = 255 * abs(cos(PI * this.mouse.y / this.width))
  },
  draw() {
    this.fillStyle = `rgb(${~~this.r},${~~this.g},${~~this.b})`
    // this.fillRect(0, 0, this.width, this.height)
    this.fillCircle(0, 0, 100)
  }
})