JSFiddle - React, Tailwind, and code Playground

by brightonmike

HTML

<script src="http://jqueryui.com/ui/jquery.ui.resizable.js"></script>
<script src="http://jqueryui.com/ui/jquery.ui.mouse.js"></script>
<script src="http://jqueryui.com/ui/jquery.ui.widget.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/jquery-ui.css">
<div id="controls">
    <a id="creatediv" href="#" ><img src="http://www.shokadu.co.uk/wp-content/uploads/icons/white/add.png">Create DIV</a>
<a id="createcta" href="#"><img src="http://www.shokadu.co.uk/wp-content/uploads/icons/white/point.png">Create CTA</a>
<a id="createimg" href="#"><img src="http://www.shokadu.co.uk/wp-content/uploads/icons/white/pictures_folder.png">Create IMG</a>  
    <a id="createinput" href="#"><img src="http://www.shokadu.co.uk/wp-content/uploads/icons/white/list.png">Create Input</a>    
<a id="showdimensions" href="#">Toggle Dimensions</a>
    <a id="trash" href="#">Trash</a>
   <img src="http://www.shokadu.co.uk/wp-content/uploads/icons/white/logo.png"> 
</div>

<div id="wrapper">

<nav class="wireframe draggable resizable">
    <a class='delete' href='#'></a>
    <ul>
        <li contenteditable='true'>Home</li>
        <li contenteditable='true'>Contact</li>
    </ul>
</nav>



<div id="sidebar" class="wireframe draggable resizable">
  <p contenteditable='true'>Click to edit</p>  
</div>
    
    
</div>

CSS

body {padding:25px;background:#f4f4f4;}
#wrapper {background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAG0lEQVQIW2NkQAO3b9/+z4hVECSDLoFdJTbtAFJrEdYgU8FdAAAAAElFTkSuQmCC);width:960px;margin:0 auto;height:1200px;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;z-index:999;}
#sidebar {display:none;width:200px;height:200px;float:left;left:0;}
nav {display:none;width:920px;float:left;left:0;margin-bottom:20px;margin-top:30px;}
nav ul {list-type:none;float:left;}
nav ul li {float:left;padding:4px;}
div.cta{display:block;padding:12px;position:absolute;top:100px;left:100px;text-shadow: 4px 4px 0px #ffffff;
z-index:999;
background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAPUlEQVQYV2NkYGD4D8SMQIwXwBQQVIxsEl7F6FbiVIzNbVgV4/IEhmJ8vkVRTChY4IoJKQSFLVgxMQrBigH9rQoKN4o0UQAAAABJRU5ErkJggg==);
}
a.dimensions {position:absolute;top:20%;left:20%;width:100px;}
div.imgp {z-index:999;
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{z-index:999;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:999;} 
a.delete,a.order {display:none;position:absolute;top:2px;right:2px;background:url(http://www.shokadu.co.uk/wp-content/uploads/icons/close.png) no-repeat white;padding:1px;border-radius:2px;width:18px;height:18px;}
a.order {background:url(http://www.shokadu.co.uk/wp-content/uploads/icons/directional_up.png) no-repeat white;right:25px;}
.wireframe:hover a.delete {display:block;}.wireframe:hover...

JavaScript

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

$(function() {
    $(".resizable").resizable();
});


$("#creatediv").click(function(e) {
    $("#wrapper").append("<div class='contentbox wireframe'><a class='delete' href='#'></a><a class='order' href='#'></a><p contenteditable='true'>Click to edit</p><span class='result'>&nbsp;</span></div>");
    $(".contentbox").draggable({ grid: [ 5,5 ] });
    $(".contentbox").resizable({ grid: [ 5,5 ] });
    $(".delete").click(function(e){

                         $(this).parent(".contentbox").remove();
    e.preventDefault();
        });        
    $(".order").click(function(e){
                         $(this).parent(".contentbox").css("z-index","+=999");
    e.preventDefault();        
        });
    e.preventDefault();
});


$("#createcta").click(function(e) {
    $("#wrapper").append("<div class='cta wireframe' contenteditable='true'>Click to edit<a class='delete' href='#'></a><a class='order' href='#'></a></div>");
    $(".cta").draggable({ grid: [ 5,5 ] });
    $(".cta").resizable({ grid: [ 5,5 ] });
    $(".delete").click(function(e){

                         $(this).parent(".cta").remove();
    e.preventDefault();
        }); 
    $(".order").click(function(e){
                         $(this).parent(".cta").css("z-index","+=999");
    e.preventDefault();        
        });    
    e.preventDefault();
});

$("#createimg").click(function(e) {
    $("#wrapper").append("<div class='imgp wireframe'><a class='delete' href='#'></a><a class='order' href='#'></a></div>");
    $(".imgp").draggable({ grid: [ 5,5 ] });
    $(".imgp").resizable({ grid: [ 5,5 ] });
        $(".delete").click(function(e){

                         $(this).parent(".imgp").remove();
    e.preventDefault();
        });  
      $(".order").click(function(e){
                         $(this).parent(".imgp").css("z-index","+=999");
    e.preventDefault();        
        });  
   ...