JSFiddle - React, Tailwind, and code Playground

by William Green

HTML

<div id="shapeBar">
  <div id="shapeBarDesc">
    Drag a shape to the canvas
  </div>
  <div id="shapes">
    <div id="circleDragSource"></div>
    <div id="squareDragSource"></div>
    <div id="arrowDragSource">&#8593;</div>
  </div>
</div>
<div id="shapeCanvas"></div>

CSS

html,
body {
  padding: 0;
  margin:0;
  background-color: #eee;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

#shapeBar {
  width: 25%;
  height: 100%;
  background-color: #ccc;
  float: left;
  overflow:auto;
  position:relative;
}

#shapes {
  height: 100%;
  display: table;
  margin: auto;
  padding: 5px;
  -o-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  overflow:auto;
}

#shapeCanvas {
  width: 75%;
  height: 100%;
  overflow: auto;
  background: #ddd;
  float: right;
}

* {
  font-family: sans-serif;
}

#shapeBarDesc {
  text-align: center;
  padding: 8px;
  background-color: #ddd;
  -o-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}

#circleDragSource {
  width: 20vw;
  height: 20vw;
  background-color: #FF6D75;
  border-radius: 50%;
  margin: auto;
}

#squareDragSource{
  width:20vw;
  height:20vw;
  background-color:#FF6D75;
  border-radius:5%;
}

#shapes *{
  margin:5px;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  cursor:url(https://www.dropbox.com/s/0wayqai4yfakw02/cursor.png?dl=0),default;
}

#arrowDragSource{
  color:#FF6D75;
  font-size:20vw;
  text-align:center;
}

JavaScript

window.addEventListener('load',function(){
  var circleDragSource = document.getElementById('circleDragSource');
  var squareDragSource = document.getElementById('squareDragSource');
  var arrowDragSource = document.getElementById('arrowDragSource');
  var mouseDown = false;
  var activeShape = false;
  circleDragSource.addEventListener('mousedown',function(){
    mouseDown = true;
    activeShape = 'circle';
  });
  squareDragSource.addEventListener('mousedown',function(){
    mouseDown = true;
    activeShape = 'square';
  });
  arrowDragSource.addEventListener('mousedown',function(){
    mouseDown = true;
    activeShape = 'arrow';
  });
  window.addEventListener('mousemove',function(){
    
  });
  window.addEventListener('mouseup',function(){
    mouseDown = false;
  });
});