JSFiddle - React, Tailwind, and code Playground

HTML

<input type="text" value="1 x 1" class="grid-chooser"/>

CSS

.grid, .grid * {
  box-sizing: border-box;
}


.grid-chooser + .grid {
    background: rgba(0,0,0,0.2);
    position: relative;
    padding: 2px;
    display: none;
}

.grid-chooser:focus + .grid {
   display: block;
}

.grid-chooser + .grid .row:first-child .square:first-child .inner {
   background: rgba(0,0,0,0.4);
}

.grid-chooser + .grid .square:first-child {
    margin-top: 0;
}

.grid-chooser + .grid .square {
    height: 100%;
    float: left;
    padding: 1px;
}
.grid-chooser + .grid .square:hover .inner, .grid-chooser + .grid .square.highlight .inner {
    background: rgba(0,0,0,0.4)
}



.inner {
    height: 100%;
    width: 100%;
    border-radius: 3px;
    background: rgba(0,0,0,0.2);
}

JavaScript

$(function () {
    var rows = 10;
    var cols = 10;
    
    var grid = '<div class="grid">';
    for (var i = 0; i < rows; i++) {
        grid += '<div class="row">';
        for (var c = 0; c < cols; c++) {
            grid += '<div class="square"><div class="inner"></div></div>';    
        }
        grid += '</div>';
    }
    grid += '</div>';
    
    var $gridChooser = $('.grid-chooser');
    var $grid = $(grid)
        .height(rows * 24)
        .width(cols * 24) 
     .insertAfter($gridChooser)
    $grid.find('.row').css({
        height: 'calc(100%/'+rows+')'
    })
        $grid.find('.square').css({
        width: 'calc(100%/'+cols+')'
    })


    
    var $allSquares = $('.square');
    
    $grid.on('mouseover', '.square', function () {
        var $this = $(this);
        var col = $this.index() + 1;
        var row = $this.parent().index() + 1;
        $allSquares.removeClass('highlight');
        $('.row:nth-child(-n+'+row+') .square:nth-child(-n+'+col+')')
            .addClass('highlight');
         $gridChooser.val(col + ' x ' + row)
    })
    
});