JSFiddle - React, Tailwind, and code Playground

by teknohippy

HTML

<link rel="stylesheet" href="http://a0.twimg.com/a/1291163542/stylesheets/phoenix.bundle.css">
<div id="container">    
    <div id="addred" class="button">add red</div>
    <div id="addgreen" class="button">add green</div>
    <div id="addblue" class="button">add blue</div>
    <div id="export" class="button">export</div>
    <div id="new"></div>
    <div class="text dragme">Lipsum Lorum</div>
</div>

CSS

.redbox
{
    padding:10px;
    background: red;
    color: white;
    width: 200px;
    opacity: 0.5;
}

.bluebox
{
    padding:10px;
    background: blue;
    color: white;
    width: 200px;
    opacity: 0.5;
}

.greenbox
{
    padding:10px;
    background: green;
    color: white;
    width: 200px;
    opacity: 0.5;
}

.yellowbox
{
    padding:10px;
    background: yellow;
    color: white;
    width: 200px;
    opacity: 0.5;
}

.cyanbox
{
    padding:10px;
    background: cyan;
    color: white;
    width: 200px;
    opacity: 0.5;
}

.magentabox
{
    padding:10px;
    background: magenta;
    color: white;
    width: 200px;
    opacity: 0.5;
}

JavaScript

$(".dragme").draggable();
$("#addblue").click(function() {
    $("#new").append('<div class="dragme bluebox" style="position:absolute;left:10;top:100;">This is draggable</div>');
    $(".dragme").draggable();
});
$("#addred").click(function() {
    $("#new").append('<div class="dragme redbox" style="position:absolute;left:10;top:100;">This is draggable</div>');
    $(".dragme").draggable();
});
$("#addgreen").click(function() {
    $("#new").append('<div class="dragme greenbox" style="position:absolute;left:10;top:100;">This is draggable</div>');
    $(".dragme").draggable();
});
$("#export").click(function() {
    alert($("#container").html());
});