JSFiddle - React, Tailwind, and code Playground

HTML

<div class="custom">
    <div class="custom-cell"></div>
    <div class="custom-cell"></div>
    <div class="custom-cell"></div>
    <div class="custom-cell"></div>
    <div class="custom-cell"></div>
    <div class="custom-cell"></div>
    <div class="custom-cell"></div>
    <div class="custom-cell"></div>
    <div class="custom-cell"></div>
    <div class="custom-cell"></div>
    <div class="custom-cell"></div>
    <div class="custom-cell"></div>
    <div class="custom-cell"></div>
    <div class="custom-cell"></div>
    <div class="custom-cell"></div>
    <div class="custom-cell"></div>
</div>

CSS

.custom {
    display: table;
    margin: 15% auto 15% auto;
    width: 75%;
    max-height: 75%;
    background-color: aqua;
    border: 4px double black;
}

.custom-cell {
    position: relative;
    width: 25%;
    float: left;
    height: 25%;
    padding-bottom: 25%;
    background: radial-gradient(red, black)
}

.custom-cell-clicked {
    position: relative;
    width: 25%;
    float: left;
    height: 25%;
    padding-bottom: 25%;
    background: radial-gradient(black, red)
}

JavaScript

$(function() {
    var isMouseDown = false;
    $(".custom-cell").mousedown(function() {
        isMouseDown = true;
        $(this).toggleClass("custom-cell-clicked");
        return false; // prevent text selection
    }).mouseover(function() {
        if (isMouseDown) {
            $(this).toggleClass("custom-cell-clicked");
        }
    }).on("selectstart", function() {
        return false; // prevent text selection in IE
    });

    $(document).mouseup(function() {
        isMouseDown = false;
    });
});