JSFiddle - React, Tailwind, and code Playground

HTML

<div class="test editme">Double click on me to edit!</div>
<br/>
<input id="test" type="file"/><label for="test"></label>
<input id="test2" type="file"/><label for="test2"></label>
<input id="test3" type="file"/><label for="test3"></label>

CSS

/* Do NOT edit this class */
.zinput{width: 0.1px;height: 0.1px;opacity: 0;overflow: hidden;position: absolute;z-index: -1;}


/* Edit this class */
.zinput + label{display:inline-block;height:278px;width:185px;background:#EEE no-repeat;cursor:pointer;border: 2px dotted #999;background-size:cover;}

.test{width:200px;background:#CCC}
.test .ztextarea{margin:0;padding:0;background:#EEF;color:#0A0}

JavaScript

/* BEGIN DO NOT EDIT (zedit.js) */
/* zEdit v0.9 | Copyright (c) 2016 Zimnox | MIT License */
!function(a){a.fn.zedit=function(b){return this.is("[type=file]")&&(this.addClass("zinput"),$label=a(this).next("label"),b&&$label.css("background-image","url("+b+")"),this.change(function(){$label=a(this).next("label");var b=new FileReader;b.onload=function(a){$label.css("background-image","url("+a.target.result+")")},this.files[0]&&b.readAsDataURL(this.files[0])})),this}}(jQuery),$(function(){$(".editme").dblclick(function(a){$(this).has("textarea").length||($html='<textarea class="ztextarea" style="width:'+$(this).width()+"px;height:"+$(this).height()+'px;">'+$(this).html()+"</textarea>",$(this).empty(),$(this).html($html),$(this).find("textarea").keyup(function(a){13!=a.keyCode||a.shiftKey||($p=$(a.target).parent(),$p.empty(),$p.html($(this).val()))}))}),$(document).click(function(a){if(!$(a.target).closest(".editme").has("textarea").length&&($p=$(".editme").has("textarea"),$p.length)){var b=$p.children();$p.empty(),$p.html(b.val())}})});
/* END DO NOT EDIT (zedit.js) */


/* your html,js code here */
$('#test').zedit('http://zimnox.com/myflix/images/upload_image.png');
$('#test3').zedit();
$('#test2').zedit();