JSFiddle - React, Tailwind, and code Playground

HTML

<div class="delivery-truck"></div>
<div class="depot">
<div class="parcel" data-dest="house"></div>
<div class="parcel" data-dest="office"></div>
<div class="parcel" data-dest="factory"></div>
</div>

<div id="house" class="delivery-address"></div>
<div id="office" class="delivery-address"></div>
<div id="factory" class="delivery-address"></div>

CSS

body{
    background:#000;
}

.delivery-truck{
    background:#CC0000;
    width:30px;
    height:30px;
    position:absolute;
    z-index: 1;
}

.depot{
    position:absolute;
    width:150px;
    height:150px;
    background:#ccc;
    border:3px dashed #666;
    top:200px;
    left:300px;
    z-index: 0;
}

.delivery-address{
    position:absolute;
    border:3px dashed yellow;
}

.parcel{
    width:5px; 
    height:5px;
    background:white;
    display:block;
    border:2px solid red;
}

#house{
    width:50px;
    height:50px;
    top:340px;
    left:700px;
    background:#663300;
}

#office{
    width:80px;
    height:150px;
    top:100px;
    left:650px;
    background:white;
}

#factory{
    width:160px;
    height:60px;
    top:500px;
    left:600px;
    background:grey;
}

JavaScript

/* 
The Task

The DOM contains some markup which represents a "delivery truck", "depot" and three "delivery addresses".

The delivery truck should drive to the depot, load up with parcels and deliver a parcel to each of the addresses in the source code.

How you approach solving this problem is up to you, but before you take the test spend some time thinking who will be reviewing the code. The developer who next looks at the test will only spend 10 or so minutes working through your solution and will not have time to examine why you have taken the approach that you did. The emphasis should be on readability, quality and re-usability.

Requirements:
. The delivery truck will drive to the depot, load three parcels, and deliver one parcel to each of the "addresses" in the mark-up (house, office, factory).
. Code structure should be *Object Oriented* and allow for additional parcels and trucks.
. You may use any libraries as you see fit. Keep in mind the above requirement.
. Any DOM movement should be animated. Again keep in mind the second requirement.
. Minimise the likelihood of clashes with other scripts that may be used in the page.

See sample output at http://www.youtube.com/watch?v=mXX4yaf8IW8

*/

(function($) {
  'use strict';

  var deliveryTruck = $('.delivery-truck'),
      depot = $('.depot'),
      deliveryAddresses = $('.delivery-address'),
      depotOffset = depot.offset(),
      dTHeight = deliveryTruck.height(),
      dTWidth = deliveryTruck.width();

  var goToDepot = function goToDepot() {
    deliveryTruck.animate({
      top: depotOffset.top + (depot.height() - dTHeight)/2,
      left: depotOffset.left + (depot.width() - dTWidth)/2
    }, {
      duration: 1000,
      complete: function() {
        deliveryTruck.append(depot.children());
        startDeliveries();
      }
    });
  };

  var startDeliveries = function startDeliveries() {
    deliveryAddresses.each(function(i, el) {
      var dest = $(el),
          destOffset =...