JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
    <div id="clips"></div>
    <div id="clusters"></div>
</div>


<div id="clip1" class="clip">
    <div class="image"></div>
    <div class="name">A001_C001_01017H.mp4</div>
    <div class="length">00:02:34</div>
</div>

CSS

#container {
    margin: 10px 10px;
    text-align: center;
    -moz-user-select: none;
    -webkit-user-select: none;
    user-select: none;
}
#clips {
    margin: 0 0;
    background: #ffd;
    /* yellowish backgroun for clip container */
}
/* general definition of the containers for holding the clips */
 #clusters, #clips {
    width: 510px;
    height: 320px;
    padding: 10px;
    border: 2px solid #333;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    -moz-box-shadow: 0 0 .3em rgba(0, 0, 0, .8);
    -webkit-box-shadow: 0 0 .3em rgba(0, 0, 0, .8);
    box-shadow: 0 0 .3em rgba(0, 0, 0, .8);
}
/* Individual cards and slots */
 #clusters div, #clips div {
    float: left;
    width: 60px;
    height: 60px;
    padding: 3px;
    padding-top: 3px;
    padding-bottom: 3px;
    border: 2px solid #333;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    margin: 0 0 10px 10px;
    background: #fff;
}
#clusters div:first-child, #clips div:first-child {
    margin-left: 10px;
}
#clusters div.hovered {
    background: #aaa;
}
#clusters div {
    border-style: dashed;
}
#clips div  {
    background: #666;
    color: #fff;
    font-size: 50px;
    text-shadow: 0 0 3px #000;
}
#clips div.ui-draggable-dragging {
    -moz-box-shadow: 0 0 .5em rgba(0, 0, 0, .8);
    -webkit-box-shadow: 0 0 .5em rgba(0, 0, 0, .8);
    box-shadow: 0 0 .5em rgba(0, 0, 0, .8);
}

div.image {
    content:url(http://ridiculousprods.com/i/multi_merge_clip.png);
    display: inline;
    background: red;
    border: 5px solid red;
    height: 50px;
    width: 70px;
}

JavaScript

var numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];


  for (var i = 0; i < 10; i++) {
      $('<div>' + numbers[i] + '</div>').data('number', numbers[i]).attr('id', 'card' + numbers[i]).appendTo('#clips').draggable({
          containment: '#container',
          stack: '#clips div',
          cursor: 'move',
          revert: true
      });
  }