JSFiddle - React, Tailwind, and code Playground

HTML

<div id="1"></div>
<div id="2"></div>
<div id="3"></div>
<div id="compare"></div>

CSS

div {
    display: inline-block;
    width: 10px;
    height: 10px;
    background: black;
    position: absolute;
}

#compare {
    background: red;
}

JavaScript

// Randomise the boxes
$('div').each(function() {
    this.style.left = Math.floor(Math.random() * 255) + 'px';
    this.style.top = Math.floor(Math.random() * 255) + 'px';
});

// Center #compare
var compareEl = $('#compare');
compareEl.css('top', '128px').css('left', '128px');

// Let's find the closest block!
var otherEls = $('div:not(#compare)'),
    compareTop = compareEl.offset().top,
    compareLeft = compareEl.offset().left,
    winningScore = Infinity,
    score, winner, curEl;

otherEls.each(function() {
    // Calculate the score of this element
    curEl = $(this);
    score = Math.abs(curEl.offset().top - compareTop) + Math.abs(curEl.offset().left - compareLeft);
    if (score < winningScore) {
        winningScore = score;
        winner = this;
    }
});

alert('With a score of ' + winningScore + ', the winner is div ' + winner.id + '. Let me colour it green for you.');

winner.style.background = '#0f0';