JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cdn.kendostatic.com/2013.3.1119/js/kendo.all.min.js"></script>
<body>
    <div class="container-tabletop">
        <div class="container-tabletop-gallery container">
            <ul class="gallery">
                <li class="kendo-draggable" id="draggable-1"><div class="scale-pointer"></div><div class="scale-value">&nbsp;</div><div class="container-statement">Has good everyday low prices on baking items</div></li>
                <li class="kendo-draggable" id="draggable-2"><div class="scale-pointer"></div><div class="scale-value">&nbsp;</div><div class="container-statement">Has great sales</div></li>
                <li class="kendo-draggable" id="draggable-3"><div class="scale-pointer"></div><div class="scale-value">&nbsp;</div><div class="container-statement">Puts out circulars/inserts so that I know what's on sales</div></li>
                <li class="kendo-draggable" id="draggable-4"><div class="scale-pointer"></div><div class="scale-value">&nbsp;</div><div class="container-statement">Products are displayed attractively</div></li>
                <li class="kendo-draggable" id="draggable-5"><div class="scale-pointer"></div><div class="scale-value">&nbsp;</div><div class="container-statement">Promotional and sales displays are appealing in store</div></li>
                <li class="kendo-draggable" id="draggable-6"><div class="scale-pointer"></div><div class="scale-value">&nbsp;</div><div class="container-statement">Has an organized store layout that makes it easy to shop</div></li>
                <li class="kendo-draggable" id="draggable-7"><div class="scale-pointer"></div><div class="scale-value">&nbsp;</div><div class="container-statement">The layout is consistent from store to store so I always know where everything can be found</div></li>
                <li class="kendo-draggable" id="draggable-8"><div class="scale-pointer"></div><div class="scale-value">&nbsp;</div><div class="container-statement">The products I want are...

CSS

html, body {
            width                 : 100%;
            padding               : 0;
            margin                : 0;
            font-family           : Arial, Tahoma, Verdana, sans-serif;
        }

        #container-scale {
            background            : url("ruler-excellence-numbered-101.png") no-repeat top center transparent;
            z-index: 12000;
        }

        .scale-pointer {
            width                 : 24px;
            height                : 30px;
            position              : absolute;
            margin-left           : 48px;
            margin-top            : -38px;
            background            : url("arrow-pointer.png") no-repeat center transparent;
        }

        .gallery .scale-pointer {
            visibility            : hidden;
        }
.container-tabletop {
    width                 : 800px;
    margin                : 1em auto;
    border                : 2px solid #333;
    border-radius         : 3px;
    box-shadow            : 0 0 5px #000;
}

.container-tabletop .container {
    width                 : 100%;
}

.container-tabletop-gallery {
    min-height            : 146px;
    overflow              : hidden;
}

.container-tabletop-drop {
    background-color      : #FFF;
    z-index               : 19001;
}

.container-tabletop-gallery .gallery {
    width                 : 100%;
    clear                 : both;
    margin                : 0;
    border-collapse       : collapse;
    content               : "";
    display               : table;
    background-color      : #CCC;
}

.kendo-draggable {
    width                 : 120px;
    height                : 120px;
    float                 : left;
    margin                : 5px auto 5px 9px;
    background-color      : #E9E9E9;
    padding               : 5px;
    text-align            : center;
    border                : 3px solid #FFF;
    list-style            : none outside none;
    overflow              : visible;
 ...

JavaScript

var _x, _y;

        function draggableOnDragStart(e) {
            $(e.sender.element).removeClass("is-dropped");
            $("#container-scale").css("position", "absolute");
        }
        function draggableOnDrag(e) {
            _x = e.x.location, _y = e.y.location;
        }
        function draggableOnDragEnd(e) {
            $("#container-scale").css("position", "");
        }
        function droptargetOnDragEnter(e) {
            $("body > .kendo-draggable").addClass("is-droppable");
            e.draggable.hint.find(".scale-value").text(e.dropTarget.index() + 1);
            e.dropTarget.addClass("scale-value-hover");
        }
        function droptargetOnDragLeave(e) {
            e.dropTarget.removeClass("scale-value-hover");
        }
        function droptargetOnDrop(e) {
            e.dropTarget.removeClass("scale-value-hover");
            if(!$("body > .kendo-draggable").hasClass("is-not-droppable")) {
                e.draggable.currentTarget.addClass("is-dropped").css({left: (_x - 75) + "px"}).find(".scale-value").text((e.dropTarget.index() + 1));
                $(".container-tabletop-drop").append(e.draggable.currentTarget);
            } else {
                e.draggable.currentTarget.effect("highlight", {}, 750);
            }
        }

        $(document).ready(function() {
            for(i = 0 ; i < 101 ; i++) {
                $("#container-scale").prepend('<div class="scale-point" style="z-index:25001;width:' + (800 / 101) + 'px;">|</div>');
            }

            // -------------------------------------
            // Droppable scale points
            // -------------------------------------
            $("#container-scale .scale-point").kendoDropTarget({
                dragenter: droptargetOnDragEnter
            ,   dragleave: droptargetOnDragLeave
            ,   drop     : droptargetOnDrop
            });

            $(".container-tabletop-gallery .gallery li").kendoDraggable({
                hint     : function(e)...