JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js" type="text/javascript"></script>

<table class="trial_coda" width="595" align="center">
    <tr>
        <td width="306">
            <div class="visible-before-drag instructions">
                <img class="arrow" src="http://camvine.com/files/3ds/arrowL.png"/>
                Drag a piece of content...
            </div>
        </td>
        <td width="206">
            <div class="visible-during-drag instructions">
                ... and drop here!
                <img class="arrow" src="http://camvine.com/files/3ds/arrowR.png"/>
            </div>
        </td>
    </tr>
    <tr>
        <td>
            <div class="source" data-url="http://snapshot.camvine.com/snapshots/cdd7205f-a64f-4ec0-9110-085af73b6ac5/apply/">
                <img src="http://camvine.com/files/3ds/scotland.png" class="icon"/>
                Webcam image of Glen Coe, Scotland
            </div>
        </td>
        <td rowspan="3">
            <div id="destination">
                <img class="icon" src="http://camvine.com/files/3ds/drop_target.png"/>
            </div>
        </td>
    </tr>
    <tr>
        <td>
            <div class="source" data-url="http://snapshot.camvine.com/snapshots/f0b98c1f-18b3-4880-872f-d1391f449705/apply/">
                <img src="http://camvine.com/files/3ds/clock_icon.png" class="icon"/>
                Digital clock with UK time
            </div>
        </td>
    </tr>
    <tr>
        <td>
            <div class="source" data-url="http://snapshot.camvine.com/snapshots/94bff9f0-18dc-43d1-89bd-e3f3a3b5da87/apply/">
                <img src="http://camvine.com/files/3ds/ftse100.png" class="icon"/>
                FTSE 100 stock quote
            </div>
        </td>
    </tr>
    <tr>
        <td colspan="2">
            <div...

CSS

.trial_coda td {
    padding-left: 10px;
    padding-right: 10px;
    font-size: 100%;
}
.trial_coda {
    background-color: #EFF8FF;
    border-radius: 5px;
    padding: 50px;
    border-collapse: collapse;
}
div.source {
    background-color: lightgrey;
    border-radius: 5px;
    margin: 5px 0 5px 0;
    cursor: move;
}
.icon {
    vertical-align: middle;
    margin: 10px;
}
.arrow {
    vertical-align: top;
    position: relative;
    top: 6px;
}
#destination {
    text-align: center;
    padding: 40px;
    background-color: lightgrey;
    border-radius: 30px;
}
.aim-here {
    background-color: #d0ffd0;
    border: 3px dashed #70ff70;
}
.on-target {
    border: 3px solid #70ff70;
}
.visible-during-drag {
    display: none;
    text-align: center;
}
.visible-after-success {
    display: none;
    margin: 5px 0 5px 0;
    padding: 5px;
    background-color: #d0ffd0;
    border-radius: 5px;
}
.instructions {
    font-size: 15pt;
    margin: 5px 0 10px 0;
    padding: 10px;
}
.centred {
    text-align: center;
}

JavaScript

$(function() {
    var $output,
    src = "http://cam2.camvine.com/axis-cgi/mjpg/video.cgi?resolution=320x240" + '&dummy=' + (new Date()).getTime().toString(10);

    $output = $('<img id="webcam">')
        .height(240)
        .width(320)
        .insertBefore($('.trial_coda'))
        .attr('src', src);
    
    var mem = $('#destination').html();

    $('.source').draggable({
        opacity: 0.5,
        helper: 'clone',
        start: function() {
            $('.visible-during-drag').stop(true, true).fadeIn();
            $('.visible-before-drag').stop(true, true).fadeOut();
        },
        stop: function() {
            $('.visible-before-drag').stop(true, true).fadeIn();
            $('.visible-during-drag').stop(true, true).fadeOut();
        }
    });

    $("#destination").droppable({
        accept: '.source',
        activeClass: 'aim-here',
        hoverClass: 'on-target',
        drop: dropFunction,
        tolerance: 'pointer'
    });

    $("#webcam").droppable({
        accept: '.source',
        drop: dropFunction,
        tolerance: 'pointer'
    });
    
    function dropFunction(event, ui) {
        url = ui.draggable.attr('data-url');
        $('#destination').html('Loading content...');
    
        $.getJSON(url + '?callback=?');
    
        setTimeout(
            function () {
                $('#destination').html(mem);
                $('.visible-after-success').slideDown();
            }
        , 1000);
    }
});