JSFiddle - React, Tailwind, and code Playground

by brightonmike

HTML

<div class="contentbox wireframe draggable resizable">
<a class="delete" href="#">Delete</a>
</div>

<div class="contentbox wireframe draggable resizable">
<a class="delete" href="#">Delete</a>
</div>

<div class="contentbox wireframe draggable resizable">
<a class="delete" href="#">Delete</a>
</div>

CSS

body {padding:25px;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAG0lEQVQIW2NkQAO3b9/+z4hVECSDLoFdJTbtAFJrEdYgU8FdAAAAAElFTkSuQmCC);}
#wrapper {width:960px;margin:0 auto;height:900px;border-left:1px dotted black;border-right:1px dotted black;}
.contentbox {width:200px;height:200px;top:100px;left:100px;float:left;display:block;position:absolute;}
#sidebar {width:200px;height:200px;float:left;display:block;left:0;}
nav {width:920px;float:left;display:block;left:0;margin-bottom:20px;margin-top:30px;}
nav ul {list-type:none;float:left;}
nav ul li {float:left;padding:4px;}
a.cta{display:block;padding:12px;position:absolute;top:100px;left:100px;text-shadow: 4px 4px 0px #ffffff;

background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAPUlEQVQYV2NkYGD4D8SMQIwXwBQQVIxsEl7F6FbiVIzNbVgV4/IEhmJ8vkVRTChY4IoJKQSFLVgxMQrBigH9rQoKN4o0UQAAAABJRU5ErkJggg==);
}
a.dimensions {position:absolute;top:20%;left:20%;width:100px;}
div.imgp {
top:100px;left:100px;display:block;position:absolute;width:100px;height:100px;
border:3px solid black;
background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAGklEQVQIW2NkgID/QMwIosEEjAOiQQL4VQAABJ8IA8Qx8SkAAAAASUVORK5CYII=
);}
.inputcreate{padding:5px;width:185px;height:15px;top:100px;left:100px;float:left;display:block;position:absolute;border:3px solid black!important;}
input.inputframe{width:96%;position:absolute;top:0;left:0;}
.wireframe {border:1px solid black;background:#fff;z-index:999999;} 


#controls{width:100%;background:#eee;padding:5px;float:left;}
a#creatediv,a#createcta,a#showdimensions,a#createimg,a#createinput,a.dimensions,a#trash {
    position:relative;
    float:left;
    z-index:999;
    text-align:center;
    padding:20px;
    padding-top:10px;
    padding-bottom:10px;
    color:#fff;
    font-family:helvetica;
    text-decoration:none;
    font-size:11px;
    border:1px solid #3079ED;
    margin-left:10px;
   ...

JavaScript

$(".delete").click(function(e){

                         $(this).parent(".contentbox").remove();
    e.preventDefault();
        });


$(document).ready(function() {
    $(".draggable").draggable();
});