JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>
<div class="container-fluid text-center">
     <h1>Paintings & Frames: Interactive App</h1>

    <div class="row" id="area531">
        <div class="col-xs-8">
            <div class="showroom">
                <div class="frame">
                    <img class="display" src="http://placehold.it/200" />
                </div>
            </div>
        </div>
        
        <div class="col-xs-4">
            <div class="selection text-center">
                 <h3>Draggable Frames</h3>

                <ul class="list-unstyled">
                    <li class="color-1">
                    	<div id="area51" class="row"></div>
                    </li>
                    <li class="color-2">
                    	<div id="draggable-2" class="frame_type"></div>
                    </li>
                    <li class="color-3">
                    	<div id="draggable-3" class="frame_type"></div>
                    </li>
                    <li class="color-4">
                    	<div id="draggable-4" class="frame_type"></div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>

CSS

/* General Styles */
 * {
    box-sizing: border-box;
}
html, body {
    background-color: #eee;
    color: #666;
}
.showroom {
    border: 1px solid #e1e1e1;
    border-radius: 5px;
    height: 500px;
    padding: 100px;
}
.frame {
    background-color: #fff;
    height: 300px;
    width: 300px;
    padding: 50px;
    border-radius: 5px;
}
.display {
    border-radius: 5px;
    height: 200px;
    width: 200px;
    background-color: #fff;
}
.selection {
    border-radius: 5px;
    height: 500px;
}
.frame_type {
    height: 50px;
    width: 100%;
    border-radius: 5px;
}
li {
    height: 50px;
    width: 30%;
    border-radius: 5px;
}

.color-1, .color-1 div {
    background-color: #f1c40f;
}
.color-2, .color-2 div {
    background-color: #e74c3c;
}
.color-3, .color-3 div {
    background-color: #3498db;
}
.color-4, .color-4 div {
    background-color: #9b59b6;
}
.ui-state-active {
    background-color: #e1e1e1 !important;
}

JavaScript

$(document).ready(function () {
    $("[id*=draggable]").draggable({
        containment: "#area51",
        revert: true,
        stack: ".frame_type"
    });
    $(".frame").droppable({
        hoverClass: "ui-state-active",

        drop: function (event, ui) {
            var elem = ui.draggable;
            $(this).css('background-color', elem.css('background-color'));
            $(elem.parent()).hide();
        }

    });
});