JSFiddle - React, Tailwind, and code Playground

by bgrins

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/ui-lightness/jquery-ui.css">
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/jquery-ui.min.js"></script>
<div id='title' class='content'>
    <div class='move'></div>
    Susie J
</div>
<div id='about' class='content'>
    <div class='move'></div>
    <p>email</p>
    <p>name</p>
</div>

CSS

.content { position:absolute; border: solid 10px; padding:4px; }
.content .move { position:absolute; top:-20px; left: -20px; background: grey; width: 20px; height: 20px; }


#title {top:0; left: 40%; z-index:2; background: white; }
#about { top:300px; left: 100px; z-index:1; background:white; }

JavaScript

var hcard = {
    "fn n": {
        "family-name": {},
        "given-name": {},
        "additional-name": {},
        "honorific-prefix": {},
        "honorific-suffix": {}
    },
    "addr": {
        "post-office-box": {},
        "extended-address": {},
        "street-address": {},
        "locality": {},
        "region": {},
        "postal-code": {},
        "country-name": {},
        "type": {},
        "value": {}
    },
    "agent": {},
    "bday": {},
    "category": {},
    "class": {},
    "email ": {},
    "geo": {
        "latitude": {},
        "longitude": {},
    },
    "key": {},
    "label": {},
    "logo": {},
    "mailer": {},
    "nickname": {},
    "note": {},
    "org": {},
    "photo": {},
    "rev": {},
    "role": {},
    "sort-string": {},
    "sound": {},
    "tel": {},
    "title": {},
    "tz": {},
    "uid": {},
    "url": {}
};


$(".content").draggable({
    handle: '.move'   
}).resizable();