JSFiddle - React, Tailwind, and code Playground

HTML

<div class="desk">
  <div class="file"></div>
  <div class="file"></div>
  <div class="file"></div>
  <div class="file"></div>
  <div class="file"></div>
  <div class="file"></div>
  <div class="file"></div>
  <div class="file"></div>
  <div class="file"></div>
  <div class="file"></div>
</div>

CSS

.file{
    display:inline-block;
    overflow:hidden;
    width:64px;
    height:64px;
    padding:10px 20px 45px 10px;
    background:blue;
  }

  .file:hover{
    background:red;
  }

  .file.sel{
    opacity:.6;
  }

  #line{
    position:absolute;
    width:0px;
    height:0px;
    background:rgba(0,90,255,0.25);
    border:1px solid rgba(0,114,255,0.5);
    box-sizing:border-box;
  }

JavaScript

window.addEventListener("DOMContentLoaded", function() {
    var target = document.createElement("div"),
        x, y;
    target.id = "line";
    document.addEventListener("mousedown", function(e) {
        if (e.which > 1) return;
        x = e.pageX;
        y = e.pageY;
        document.body.appendChild(target);
        selectBlock();
        document.addEventListener("mousemove", move, false);
        return false
    }, false);

    function move(e) {
        e.preventDefault();
        target.style.width = Math.abs(e.pageX - x) + "px";
        target.style.height = Math.abs(e.pageY - y) + "px";
        target.style.left = (e.pageX < x ? e.pageX : x) + "px";
        target.style.top =  (e.pageY < y ? e.pageY : y) + "px";
        selectBlock(true)
    }
    document.addEventListener("mouseup", function() {
        target.style.width = "0px";
        target.style.height = "0px";
        document.removeEventListener("mousemove", move);
        target.parentNode && document.body.removeChild(target)
    });

    function collisionDetection(x1, y1, w1, h1, x2, y2, w2, h2) {
        return x1 < x2 + w2 && y1 < y2 + h2 && x1 + w1 > x2 && y1 + h1 > y2
    }

    function coordinate(el) {
        var pos = el.getBoundingClientRect(),
            top = pos.top,
            left = pos.left,
            right = pos.right,
            bottom = pos.bottom,
            height = bottom - top,
            width =
            right - left;
        return [left, top, width, height]
    }

    function selectBlock(add) {
        [].forEach.call(document.querySelectorAll(".file"), function(el) {
            var data = coordinate(el).concat(coordinate(target)),
                modify = add && collisionDetection.apply(null, data) ? "add" : "remove";
            el.classList[modify]("sel")
        })
    }
});