JSFiddle - React, Tailwind, and code Playground

HTML

<div class="header">
<h1>BackgroundCheck</h1>
      <p class="header-subtitle">Automatically switch to a darker or a lighter version of an element depending on the brightness of images behind it.</p>

      
      <div class="header-drag">Drag and Release elements over images</div>

      <div class="demo">
        <div class="demo-images">
            <img src="http://i.imgur.com/UnnoYbv.jpg" crossOrigin="anonymous" draggable="false" />
        </div>

        
        <div class="border border--one"><div class="icon target"></div></div>
        <div class="border border--two"><div class="icon target"></div></div>
        <div class="border border--three"><div class="icon target"></div></div>
        <div class="border border--four"><div class="icon icon--simple target"></div></div>
      </div>
</div>

CSS

/* ==========================================================================
   Layout
   ========================================================================== */

body {
  font-family: 'Open Sans', sans-serif;
  font-size: 15px;
  line-height: 1.6;
  color: #111;
}

h1,
h2,
h3,
.header-drag {
  font-weight: bold;
}

h1 {
  font-size: 30px;
}

h2 {
  font-size: 20px;
}

h3 {
  font-size: 14px;
}

h1,
h2,
h3,
p {
  margin: 0 0 .6em 0;
}

h1:last-child,
h2:last-child,
h3:last-child,
p:last-child {
  margin-bottom: 0;
}

.container {
  max-width: 980px;
  margin-left: auto;
  margin-right: auto;
}

.container--narrow {
  max-width: 500px;
}

.snippet {
  display: inline-block;
  padding: 0 8px;
  font-size: .9em;
  background: #eee;
}

a {
  color: #107FC9;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}


/* ==========================================================================
   Buttons
   ========================================================================== */

.button {
  display: inline-block;
  margin: 0;
  padding: 9px 12px;
  border-radius: 3px;
  background: #107FC9;
  color: #fff;
  font-family: monaco, monospace;
  font-size:10px;
  line-height: 9px;
  font-weight: bold;
  text-transform: uppercase;
}

.button:hover {
  background: #111;
  color: #fff;
  text-decoration: none;
}

.button--secondary {
  background: #999;
}


/* ==========================================================================
   Header
   ========================================================================== */

.header {
  position: relative;
  background: #f6f6f6;
  padding: 100px 0 80px 0;
  text-align: center;
}

.header-subtitle {
  font-size: 20px;
  line-height: 1.4;
}

.header p {
  max-width: 470px;
  margin-left: auto;
  margin-right: auto;
}

.header-drag {
  font-size: 15px;
  border-left: 3px solid #ddd;
  border-right: 3px solid #ddd;
  padding: 10px;
  display: inline-block;
  margin-top: 50px;
  background: #fff;

 ...

JavaScript

/* global BackgroundCheck:false */

(function () {

  var drag;
  var offset;
  var demo;
  var touch = document.ontouchstart !== undefined ? true : false;


  function updatePosition(e) {
    var wrapper = {
      x: demo.offsetLeft,
      y: demo.offsetTop
    };

    if (touch) {
      e.preventDefault();
    }

    drag.style.top = ((e.pageY - offset.y) - (offset.fixed ? window.scrollY : wrapper.y)) + 'px';
    drag.style.left = ((e.pageX - offset.x) - (offset.fixed ? 0 : wrapper.x)) + 'px';
  }


  function getUIElement(el, child) {
    var name = 'border';
    var required;

    if (el.className.indexOf(name) !== -1) {
      required = child ? el.children[0] : el;
    } else if (el.parentNode.className.indexOf(name) !== -1) {
      required = child ? el : el.parentNode;
    }

    return required;
  }


  document.addEventListener('DOMContentLoaded', function () {
    demo = document.querySelector('.demo');

    // Click
    window.addEventListener(touch ? 'touchstart' : 'mousedown', function (e) {
      drag = null;
      drag = getUIElement(e.target);

      if (drag) {
        offset = { 
          x: e.offsetX || e.layerX,
          y: e.offsetY || e.layerY,
          fixed: drag.className.indexOf('border--fixed') !== -1
        };

        window.addEventListener(touch ? 'touchmove' : 'mousemove', updatePosition);
      }
    });

    // Release
    window.addEventListener(touch ? 'touchend' : 'mouseup', function () {
      if (drag) {
        window.removeEventListener(touch ? 'touchmove' : 'mousemove', updatePosition);
        BackgroundCheck.refresh(getUIElement(drag, true));
      }
    });
  });

}());

/* BackgroundCheck
   http://kennethcachia.com/background-check
   v1.2.2 */

!function(a,b){"function"==typeof define&&define.amd?define(b):a.BackgroundCheck=b(a)}(this,function(){"use strict";function a(a){if(void 0===a||void 0===a.targets)throw"Missing...