JSFiddle - React, Tailwind, and code Playground

by astex

HTML

<ul id='box-wrapper'>
    <li class='make-new box'>
        <a href='#' id='make-new'>
            <div class='empty'></div>
            <div class='full'>+</div>
            <div class='empty'></div>
        </a>
    </li>
</ul>

CSS

a:link {
    text-decoration: none;
    color: #000;
}
a:visited {
    text-decoration: none;
    color: #000;
}
a:hover {
    text-decoration: none;
    color: #888;
}
#box-wrapper {
    padding: 0;
    margin: 0;
}
.box {
    vertical-align: top;
    padding: 0;
    margin: 15px;
    border-radius: 5px;
    height: 100px;
    width: 100px;
    display: inline-block;
}
.box.full {
    background-color: #FFF;
    border: solid black 1px;
}
.make-new {
    background-color: #DDD;
    font-size: 50px;
    text-align: center;
    border: dashed black 1px;
}
.make-new .empty {
    height: 20px;
}

JavaScript

var IDCounter = 1;

function loadBox( id ) {
    if ($('input', '#box'+id).val() == 'yep') {
        $('#box' + id).html('Just a little box!<br /><a href="#" class="close">You really should close me...</a>');
    }
}

$('#box-wrapper').on('click', '#make-new', function () {
    $('.make-new').before('<li class="full box" id="box' + IDCounter + '">I\'m a box!<br /><a href="#" class="close">Close me!</a><input type="hidden" class="checker" value="yep" /></li>');
    loadBox(IDCounter);
    IDCounter += 1;
}).on('click', '.close', function () {
    $(this).parents('.box').remove();
});

$('#box-wrapper').sortable({ items:'li:not(.make-new)' });