JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
<div class="sortable">
    <div class="form-inline edit">
        <i class="icon-move"></i>   
        <input type="text" value="Item #1" />
        <a class="btn delete pull-right"><i class="icon-trash"></i></a>
    </div>
    <div class="form-inline edit">
        <i class="icon-move"></i>   
        <input type="text" value="Item #2" />
        <a class="btn delete pull-right"><i class="icon-trash"></i></a>
    </div>
    <div class="form-inline edit">
        <i class="icon-move"></i>   
        <input type="text" value="Item #3" />
        <a class="btn delete pull-right"><i class="icon-trash"></i></a>
    </div>
    <div class="form-inline edit">
        <i class="icon-move"></i>   
        <input type="text" value="Item #4" />
        <a class="btn delete pull-right"><i class="icon-trash"></i></a>
    </div>
    <div class="form-inline edit">
        <i class="icon-move"></i>   
        <input type="text" value="Item #5" />
        <a class="btn delete pull-right"><i class="icon-trash"></i></a>
    </div>
</div>
<div class="form-inline add on-hover">
    <i class="icon-plus"></i>   
    <input type="text" placeholder="Add Something" />
    <a class="btn new pull-right"><i class="icon-plus"></i> Add</a>
</div>

CSS

/* The opacity transition for the Add item */
.add
{
    opacity: 0.3;
    transition: opacity 0.5s;          
}

.add.hover
{
    opacity: 1.0;
}

/* The cursor and box-shadow/rotate for dragging */
.edit
{
    cursor: move;
    cursor: -moz-grab;
    cursor: -webkit-grab;
    cursor: grab;  
}

.edit.ui-sortable-helper
{
    cursor: move;
    cursor:-moz-grabbing;
    cursor:-webkit-grabbing;
    cursor:grabbing;
    box-shadow: -2px 5px 10px #333;
    -moz-transform:rotate(2deg);
    -webkit-transform: rotate(2deg);
    transform: rotate(2deg);
}


/* Unimportant stuff */
body
{
    margin: 1em;
}

.edit, .add
{
    border: solid 1px #ccc;
    background-color: #efefef;
    border-radius: 3px;
    padding: 3px;
    margin: 3px 0;
}

JavaScript

// Create the .hover class so you don't have to rely on :hover selector
$(document).on('mouseover', '.on-hover', function() {
    $(this).addClass('hover');
}).on('mouseout', '.on-hover', function(e) {
    $(this).removeClass('hover');
});

// Make the list sortable
$(".sortable").sortable();

// Boring event handlers
$(document).on('click', '.btn.delete', function() {
    alert('This would delete the item.');
}).on('click', '.btn.new', function () {
   alert('This would add the item.'); 
});