JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper">    
        <div>
        <div id="moodboardActions">        
                     
        </div>
            <div id="moodboardWrapper" class="ui-droppable">                
          
        </div>  
        <div style="width: 270px; float: left; margin: 7px;" id="tabs" class="ui-tabs ui-widget ui-widget-content ui-corner-all">
        <ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">
            <li class="ui-state-default ui-corner-top ui-tabs-selected ui-state-active"><a href="#myphotos">My Photos</a></li>
            <li class="ui-state-default ui-corner-top"><a href="#findphotos">Find Photos</a></li>            
        </ul> 
        <div style="padding: 0pt;" id="myphotos" class="ui-tabs-panel ui-widget-content ui-corner-bottom">
        <a style="margin: 20px 60px;" id="btnUploadPhoto" href="#ancUploadPhoto" class="primary-btn"><span>Upload new photos</span></a>
        <div style="background: url(&quot;/images/inspiration/subHeader-border.png&quot;) no-repeat scroll 0pt 0pt rgb(255, 255, 255); padding: 10px 0pt 0pt; overflow: auto; height: 500px;">             
          
 <div class="carouselContainerMain externalControl">    
         <div class="Carousel" style="visibility: visible; overflow: hidden; position: relative; z-index: 2; left: 0px; width: 267px; height: 460px;">
         <ul id="moodboardGalleryContainer" style="margin: 0pt; padding: 0pt; position: relative; list-style-type: none; z-index: 1; width: 504.333px; left: 0px;"><li style="overflow: hidden; float: left; width: 89px; height: 92px;">         <div class="moodboardGalleryItem">                                                            <div class="itemWrapper ui-draggable" style="position: relative;">             <img class="mediaImage" id="2302676" alt="newly engaged" src="http://devgbir.s3.amazonaws.com/MediaGallery/70_70_23581_7_5F00_39_5F00_10_5F00_L.jpg">                         </div>                                ...

CSS

.moodboardContainer { min-height:200px; overflow:auto;float:left;margin-top:10px;padding-right:12px; }
.moodboardContainer p{margin-left:15px;}
.actioncontainer {margin:0 40px;}
.moodboardItem {position:relative; margin:0 10px 10px 0; width:165px; height:200px; padding:4px; background:#ffffff; border:1px solid #d9d0df; box-shadow:0 1px 2px #d9d0df; -moz-box-shadow:0 1px 2px #d9d0df; -webkit-box-shadow:0 1px 2px #d9d0df; }
.moodboardGalleryContainer { min-height:200px; overflow:auto; }
.moodboardGalleryItem { float:left;position:relative; margin:5px 0px 5px 7px; width:70px; height:70px; padding:5px;background:#ffffff; border:1px solid #d9d0df; box-shadow:0 1px 2px #d9d0df; -moz-box-shadow:0 1px 2px #d9d0df; -webkit-box-shadow:0 1px 2px #d9d0df; }
.carouselControlsWrapper {bottom: 0;height: 39px;width: 271px;z-index: 9;}
.carouselContainerMain {position: relative;width: 271px;float:right;}
.carouselControlsLeft, .carouselControlsRight { position:absolute; bottom:7px; width:25px; height:25px; z-index:9 }
.carouselControlsLeft { left:50%; margin:0 0 0 -50px; }
.carouselControlsRight { right:50%; margin:0 -50px 0 0; }
.carouselControlsLeft .prev { cursor:pointer; display:block; width:25px; height:25px; background:url(/images/icons/carousel/prev.png) 0 0 no-repeat; }
.carouselControlsRight .next { cursor:pointer; display:block; width:25px; height:25px; background:url(/images/icons/carousel/next.png) 0 0 no-repeat; }
.carouselControlsRight .next:hover { background-position:0 -25px; }
.carouselControlsLeft .prev:hover { background-position:0 -25px; }
.carouselControlsRight .next.disabled{ background-position:0 -50px; cursor:default; }
.carouselControlsLeft .prev.disabled { background-position:0 -50px; cursor:default; }


.searchcarouselControlsWrapper {bottom: 0;height: 39px;width: 271px;z-index: 9;}
.searchcarouselContainerMain {position: relative;width: 271px;float:right;}
.searchcarouselControlsLeft, .searchcarouselControlsRight { position:absolute; bottom:7px;...

JavaScript

var imageProperty = new Array();
var cnt = 0;   


 jQuery.fn.draggableSetup = function() {
      alert("draggableSetup");
        $(this).draggable({
            containment: 'parent',
            stop: function (event, ui) {
                var imageObject = new Object();
                imageObject.MemberID = $(".hdnMemberID").val();
                imageObject.MediaGalleryPostID = $(this).find(".mediaImage").attr("id");
                imageObject.X = ui.position.left;
                imageObject.Y = ui.position.top;

                $.each(imageProperty, function (index) {
                    if (imageProperty[index].MoodboardPostID == imageObject.MediaGalleryPostID) {
                        imageProperty[index].X = imageObject.X;
                        imageProperty[index].Y = imageObject.Y;
                    }
                });               
            }
        });
    }

    jQuery.fn.resizableSetup = function() {
        $(this).find(".itemResizable").resizable().parent('.ui-wrapper').draggable(); 
        $(this).find(".itemResizable").resizable({ aspectRatio: true });
        $(this).find(".itemResizable").resizable({ disabled: false,
            stop: function (event, ui) {

                var imageObject = new Object();
                imageObject.MediaGalleryPostID = $(this).find(".itemResizable").attr("id");
                imageObject.Width = $(this).find(".itemResizable").attr("width");
                imageObject.Height = $(this).find(".itemResizable").attr("height");               
                $.each(imageProperty, function (index) {
                    if (imageProperty[index].MoodboardPostID == imageObject.MediaGalleryPostID) {
                        imageProperty[index].Width = imageObject.Width;
                        imageProperty[index].Height = imageObject.Height;
                    }
                });                
            }

        });

    }


    $(document).ready(function () { 
         ...