JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<head>
</head>
<body>
  <div class="helper">
    <canvas id="myCanvas" resize></canvas>
  </div>
</body>
</html>

CSS

html, body {
  background-color: rgb(0, 0, 60);
  margin: 0;
  padding: 0;
  width: 99vw;
  height: 95vh;
}

.helper {
  background-color: rgb(0, 150, 150);
  margin: 0 auto;
  padding: 10% 0 0;
  max-width: 60%;
}

#myCanvas {
  background-color: rgb(255, 255, 255);
  width: 100%;
}

JavaScript

paper.install(window);
paper.setup('myCanvas');


var path = new Path.Rectangle([75, 75], [100, 100]);
path.strokeColor = 'black';


var test = new Path.Rectangle([250, 50], [300, 150]);
test.style = {
    strokeColor: "#00FFFF",
    strokeWidth: 1,
    fillColor: "#FFFF00"
};


view.onFrame = function(event) {
  // On each frame, rotate the path by 3 degrees:
  path.rotate(20000);
}