JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://code.htmlhifive.com/h5.css">
<script src="https://code.htmlhifive.com/ejs-h5mod.js"></script>
<script src="https://code.htmlhifive.com/h5.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://hifive.github.io/hifive-ui-library/hifive-ui-library/WebContent/components/artboard/src/artboard.css">
<script src="https://hifive.github.io/hifive-ui-library/hifive-ui-library/WebContent/components/artboard/src/consts.js"></script>
<script src="https://hifive.github.io/hifive-ui-library/hifive-ui-library/WebContent/components/artboard/src/ArtShape.js ??	"></script>
<script src="https://hifive.github.io/hifive-ui-library/hifive-ui-library/WebContent/components/artboard/src/ArtShape.js"></script>
<script src="https://hifive.github.io/hifive-ui-library/hifive-ui-library/WebContent/components/artboard/src/ArtboardViewerController.js"></script>
<script src="https://hifive.github.io/hifive-ui-library/hifive-ui-library/WebContent/components/artboard/src/MagnifierController.js"></script>
<div class="viewer">
  <div class="loadView"></div>
</div>
<div class="controls">
  <label>拡大率：
    <input type="input" name="scale" value="2" size="3" />
  </label>
  <input class="setScale" type="button" value="セット" />
</div>

CSS

.h5-artboard-canvas-wrapper {
	margin: auto;
	border: 1px solid #ccc;
}

.fixSize {
	height: 400px;
	width: 300px;
	border: 1px solid #ccc;
}

JavaScript

$(function() {
		var SAMPLE_SAVE_DATA = '2|o{"saveData":"o{\\"version\\":\\"s1\\",\\"shapes\\":\\"a[\\\\\\"o{\\\\\\\\\\\\\\"type\\\\\\\\\\\\\\":\\\\\\\\\\\\\\"srect\\\\\\\\\\\\\\",\\\\\\\\\\\\\\"attr\\\\\\\\\\\\\\":\\\\\\\\\\\\\\"o{\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"x\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\":\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"s154\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\",\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"y\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\":\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"s136\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\",\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"width\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\":\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"s27\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\",\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"height\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\":\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"s22\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"}\\\\\\\\\\\\\\",\\\\\\\\\\\\\\"style\\\\\\\\\\\\\\":\\\\\\\\\\\\\\"o{\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"stroke\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\":\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"srgb(255, 0,...