JSFiddle - React, Tailwind, and code Playground

HTML

<div id="menu">

    <a href="#" class="clone">Spawn new note</a>

</div>

<div id="canvas">



    

    <div id="note" class="note shadow"><a href="#" class="close">x</a><h6 class="title"></h6><p class="notes">click me</p></div>

        <div id="insertAfter"></div>





</div><!--Close Canvas-->

CSS

html, body {    
        height: 100%; 
    }

@font-face {
    font-family: "Airplanes in the Night Sky";
    src: url(./Airplanes in the Night Sky.ttf) format("truetype");
}


body {
/* IE10 */ 
    background-image: -ms-radial-gradient(center, circle farthest-corner, #FFFFFF 0%, #F7F7F7 100%);

/* Mozilla Firefox */ 
    background-image: -moz-radial-gradient(center, circle farthest-corner, #FFFFFF 0%, #F7F7F7 100%);

/* Opera */ 
    background-image: -o-radial-gradient(center, circle farthest-corner, #FFFFFF 0%, #F7F7F7 100%);

/* Webkit (Safari/Chrome 10) */ 
    background-image: -webkit-gradient(radial, center center, 0, center center, 501, color-stop(0, #FFFFFF), color-stop(1, #F7F7F7));

/* Webkit (Chrome 11+) */ 
    background-image: -webkit-radial-gradient(center, circle farthest-corner, #FFFFFF 0%, #F7F7F7 100%);

/* Proposed W3C Markup */ 
    background-image: radial-gradient(center, circle farthest-corner, #FFFFFF 0%, #F7F7F7 100%);
}

h1 {
    font-family: Calibri, "Lucida Grande";
    font-size: 14pt;
    color: #ffffff;
}

h6 {
    font-family: Lucida Console, Monaco;
    font-size: 10pt;
    font-weight: bold;
    color: #4A4A4A;
    margin: 0px;
    padding-top: 0px;
    padding-bottom: 1px;
    border-bottom: 2px dotted #ffffff;
    cursor: pointer;
}

input[type=text] { 
    width: 200px; 
    background-color: transparent; 
    border: 0px;
    font-family: Lucida Console, Monaco;
    font-size: 10pt;
    color: #2C2FE8;
    margin: 0px;
    padding-top: 0px;
    padding-bottom: 1px;
    border-bottom: 2px dotted #ffffff;
    cursor: pointer;    
} 

textarea {
    width: 100%;
    height: 90%;
    font-family: Lucida Console, Monaco;
    font-size: 9pt;
    color: #2C2FE8;
    margin: 0px;
    padding: 0px;
    border: 0px;
    background-color: transparent;
}

#canvas {
    margin: auto;
    width: 100%;
    height: 100%;
}

#menu {
    position: fixed; top: 10px;
    width: 100%;
    height: 44px;    
    vertical-align: center;
   ...

JavaScript

var noteID;
    var noteOffset;
    var zindex;
    var indexPos;
        noteID = 1;
        noteOffset = 0;
        zindex = 2;
        indexPos = 0;


$("#canvas").bind('click', function(e){

   // if the clicked element wasn't #canvas return immediately
   if (e.target != this)
      return;

   // Calculate offset for width, put box to the left top corner of the mouse click.
   var x = e.pageX + "px";
   var y = e.pageY + "px";

   $("#note").clone().insertBefore("#insertAfter")
                     .attr("id", "note" + noteID)
                     .css({left:x, top:y, "z-index" : zindex})
                     .show()
                     .children(".title").text("Note " + noteID);

   noteID++;  
   zindex++;

   // You may not need any of the following any more (depending on
   // what your other requirements are)
   e.preventDefault();
   e.stopPropagation();
   e.stopImmediatePropagation();

});