JSFiddle - React, Tailwind, and code Playground

by Nymos

HTML

<div id="wrap">
        <div class="content" style="background-color: #000000;">
        </div>
        <div class="content" style="background-color: #222222;">
        </div>
        <div class="content" style="background-color: #444444;">
        </div>
        <div class="content" style="background-color: #000000;">
        </div>
        <div class="content" style="background-color: #222222;">
        </div>
        <div class="content" style="background-color: #444444;">
        </div>
        <div class="division">
        </div>
        <div class="content" style="background-color: #666666;">
        </div>
        <div class="content" style="background-color: #888888;">
        </div>
        <div class="content" style="background-color: #AAAAAA;">
        </div>
        <div class="content" style="background-color: #666666;">
        </div>
        <div class="content" style="background-color: #888888;">
        </div>
        <div class="division">
        </div>
        <div class="content" style="background-color: #000000;">
        </div>
        <div class="content" style="background-color: #222222;">
        </div>
        <div class="content" style="background-color: #444444;">
        </div>
        <div class="content" style="background-color: #000000;">
        </div>
        <div class="content" style="background-color: #222222;">
        </div>
        <div class="content" style="background-color: #444444;">
        </div>
        <div class="division">
        </div>
        <div class="content" style="background-color: #666666;">
        </div>
        <div class="content" style="background-color: #888888;">
        </div>
        <div class="content" style="background-color: #AAAAAA;">
        </div>
        <div class="content" style="background-color: #666666;">
        </div>
        <div class="content" style="background-color: #888888;">
        </div>
    </div>

CSS

.content
        {
            width: 200px;
            height: 200px;
            float: left;
        }
        .division
        {
            clear: both;
        }
        #wrap
        {
            margin: auto;
            width: 1280px;
        }

JavaScript

$.expr[':'].xy = function (obj, index, meta, stack) {
            var xy = meta[3].split(',');
            var x = xy[0];
            var y = xy[1];

            return $(obj).offset().left == y && ($(obj).offset().top < x || $(obj).offset().top > x);
        }

        $(document).ready(function myfunction() {

            $('.content').on("click", function () {
                var obj_left = $(this).offset().left;
                var obj_top = $(this).offset().top;

                $(this).next('.content').css('background-color', 'red');
                $(this).prev('.content').css('background-color', 'red');

                $('#wrap').find('.content:xy(' + obj_top + ',' + obj_left + ')').css('background-color', 'red');
                $('#wrap').find('.content:xy(' + obj_top + ',' + obj_left + ')').next('.content').css('background-color', 'red');
                $('#wrap').find('.content:xy(' + obj_top + ',' + obj_left + ')').prev('.content').css('background-color', 'red');
            });

        });