JSFiddle - React, Tailwind, and code Playground

by lmeurs

HTML

<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/bonsai/0.4.3/bonsai.min.js"></script>

<div class="fluid-elm-wrapper">
  <div class="fluid-elm-stretcher"></div>
  <div id="movie" class="fluid-elm"></div>
</div>

CSS

.fluid-elm-wrapper {
  display: inline-block;
  position: relative;
  text-align: center;
  vertical-align: top;
  width: 100%;
  overflow: hidden;
}

.fluid-elm-stretcher {
  padding-top: 50%; /* = height / width * 100% */
}

.fluid-elm {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: pink;
}

JavaScript

bonsai.run(document.getElementById('movie'), {
  code: function() {
    var rect = new Rect(10, 10, 50, 50)
      .addTo(stage)
      .attr('fillColor', 'green');

    stage.on('pointermove pointerdown drag', pointermove);
      
    new Rect(50, 50, 50, 50).fill("red").addTo(stage);
    var t = new Text('hi').attr('fontSize', '50px').attr('x', 50).attr('y', 50).addTo(stage);

    function pointermove(e) {
        rect.attr({x: e.stageX, y: e.stageY});
    }
  },
  width: 1000,
  height: 500
});