JSFiddle - React, Tailwind, and code Playground

by Xhogar

HTML

<script src="https://code.jquery.com/ui/1.11.2/jquery-ui.min.js"></script>
<div id="wrapper">
    <div id="header">
         <h1><a href="http://www.reddit.com/r/MortalKombat" target="_blank">/r/MortalKombat</a> Macro Generator</h1> 
    </div>
    <div id="add">
        <h2>Click to add.</h2>
        <h3>Movement</h3>
        <a id="u" rel="[u ](#u)" title="up">u </a>
        <a id="d" rel="[d ](#d)" title="down">d </a>
        <a id="b" rel="[b ](#b)" title="backwards">b </a>
        <a id="f" rel="[f ](#f)" title="forwards">f </a>
        <a id="bdash" rel="[backdash ](#bdash)" title="Backdash">backdash </a>
        <a id="dash" rel="[dash ](#dash)" title="Dash">dash </a>
        <a id="run" rel="[run ](#run)" title="Run">run </a>
        <a id="flip" rel="[flip ](#flip)" title="Flip">flip </a>
        
        <div class="clear"></div>
        <h3>Actions</h3>
        <a id="FP" rel="[1 ](#1)" title="Front Punch">1 </a>
        <a id="BP" rel="[2 ](#2)" title="Back Punch">2 </a>
        <a id="FK" rel="[3 ](#3)" title="Front Kick">3 </a>
        <a id="BK" rel="[4 ](#4)" title="Back Kick">4 </a>
        <a id="BLK" rel="[Block ](#BLK)" title="Block">Block </a>
        <a id="X" rel="[X-ray ](#X)" title="X-ray">X-ray </a>
        <div class="clear"></div>
        <h3>Properties</h3>
        <a id="xx" rel="[xx ](#xx)" title="combo into">xx</a>
        <a id="n" rel="[n ](#n)" title="neutral">n </a>
        <a id="plus" rel="[+ ](#plus)" title="plus">+ </a>
        <a id="ex" rel="[EX ](#ex)" title="Ex">ex</a>
        <div class="clear"></div>
    </div>
    <div id="results">
         <h2>Results</h2>
        <h4>Click to remove. Drag to sort.</h4>
        <div id="macro-results"></div>
        <div class="clear"></div>
        <input type="submit" id="macro-reset" value="Reset" />
    </div>
    <div id="syntax">
         <h2>Copy this code to your message. Click to select.</h2>

        <div id="code">...</div>
    </div>
</div>

CSS

body {
    background:#000;
    color:#FFF;
    font-family:Arial;
}

#wrapper {
    max-width:800px;
    margin:20px auto 0;
    white-space:nowrap;
}

.clear {
    clear:both;
}

#header {
    background:url("http://b.thumbs.redditmedia.com/9QoiOXOC5BOcj8IwULFVhLyy8JHhIN1jf-1rrzjI6hg.png") no-repeat left top;
    height:160px;
    padding-left:150px;
    line-height:160px;
}
a {
    color:#ffb400;
    text-decoration:none;
}
h1 {
    font-size:32px;
}
h2 {
    margin:0;
    padding:0 0 5px;
    font-size:18px;
}
h3 {
    font-size:14px;
    margin:0;
    padding:10px 0;
}

h4 {
    margin:0;
    padding:0 0 10px;
    font-size:11px;
    font-weight:normal;
    color:#aaa;
}

#macro-reset {
    clear:both;
    margin-top:20px;
    display:none;
}

#add, #results, #syntax {
    background:#191716;
    border:1px solid #2d2a28;
    padding:10px;
    margin-bottom:20px;
    min-height:60px;
}
#code {
    background:#2d2a28;
    padding:20px;
    min-height:100px;
}
#code span {
    display:inline-block;
    float:left;
}

a#d, a#u, a#f, a#b, a#n, a#BP, a#FP, a#BK, a#FK, a#BLK, a#X, a#plus, a#dash, a#bdash, a#flip, a#run, a#xx, a#ex {
 background:url(http://b.thumbs.redditmedia.com/eMCGL9WYomcw6ns81XM0-KWGZZW3tG_JZfM1hETIU0Y.png);
}

#add a,
#results a{
    height:25px;
    width:25px;
    display:block;
    margin:0 5px 10px 0;
    float:left;
    font-size:0;
    line-height: 25px;
    cursor:pointer;
    text-align:center;
    overflow:hidden;
}

#results:after{
 content:"";
    display:block;
    clear:both;
}

a#d {
    background-position: 0 0;
}
a#u {
    background-position: -25px 0;
}
a#f {
    background-position: -50px 0;
}
a#b {
    background-position: -75px 0;
}
a#n {
    background-position: -100px 0;
}
a#plus {
    background-position: -125px 0;
}
a#BP {
    background-position: 0 -25px;
}
a#FP {
    background-position: -25px -25px;
}
a#BK {
    background-position: -50px -25px;
}
a#FK {
    background-position: -75px -25px;
}
a#BLK {
   ...

JavaScript

$(function () {

    $("#code").click(function(){
        $(this).selectText();
    });
    
    $("#add a").click(function (e) {
        $clone = $(this).clone();
        $("#macro-results").append($clone);
        processMacros();
        e.preventDefault();
    });

    $("body").on("click", "#macro-results a", function () {
        $(this).remove();
        processMacros();
    });
    
    $("#macro-reset").click(function(e){
        $(this).hide();
        $("#code, #macro-results").html('');
        e.preventDefault();
    });
       
});

function processMacros() {
    $("#code").html('');
    $("#macro-results a").each(function (index, DomEle) {
        $rel = $(DomEle).attr('rel');
        $title = $(DomEle).attr('title');
        $("#syntax #code").append('<span>'+$rel+' </span>');
    });
    
     $( "#macro-results" ).sortable({
        stop: processMacros
    });
    
    $("#macro-reset").show();
   
}

$.fn.selectText = function () {
    return $(this).each(function (index, el) {
        if (document.selection) {
            var range = document.body.createTextRange();
            range.moveToElementText(el);
            range.select();
        } else if (window.getSelection) {
            var range = document.createRange();
            range.selectNode(el);
            window.getSelection().addRange(range);
        }
    });
}