JSFiddle - React, Tailwind, and code Playground

HTML

<div id='grid'></div>

CSS

body {
    font-family: helvetica;
}

ul, li {
    line-height: 1;
    margin: 0;
    padding: 0;
}
ul {
    clear: left;
    margin: 30px auto;
    position: relative;
    width: 90%;
}
li {
    background-color: #eee;
    border: 5px solid #fff;
    box-sizing: border-box;
    display: block;
    float: left;
    list-style: none;
    position: relative;;
    width: 10%;

}
a {
    height: 10%;
    background: #335;
    color: yellow;
    display: block;
    font-size: 8px;
    padding: 5px;
    text-decoration: none;
    width: 100%;
    padding-bottom: 70%;
    -webkit-transition: all .2s; /* Safari */
    transition: all .2s;
    font-weight: bold;
}

a:hover { 
    background-color: magenta;
}
.xx, .xx:hover {
    background-color: yellow;
    color: magenta;
}

JavaScript

var audioCtx = new AudioContext();
var osc = {};
var gainNodes = {};
var now;


function tone(id,freq) {

    // create osc set gain and connect osc
    gainNodes.id = audioCtx.createGain();
    osc.id = audioCtx.createOscillator();
    osc.id.connect(audioCtx.destination);

    // set frequency and gain
    osc.id.frequency.value = freq;
    gainNodes.id.gain.value = 1.0;
    gainNodes.id.gain.setValueAtTime(0, audioCtx.currentTime + 1);

    // start and connect
    osc.id.start(0);
    osc.id.connect(audioCtx.destination);

}


$(document).ready(function(){


    for (var x = 0; x < 10; x++) {
        var list = $("#grid").append('<ul class="row-'+x+' row"></ul>').find('ul');
    }
    
    var y = 1;
    $('.row').each(function( key, value ) {
        for (var i = 0; i < 10; i++) {
            $(this).append('<li class="cell-'+y+' cell"><a href="#" id="'+y+'" data-freq="'+y*20+'">'+y*20+'</a></li>');  
            y++;
        }
    });

    $('.row').on('click', 'a', function(e){
        e.preventDefault();
        $(this).toggleClass('xx');
        var thisFreq = $(this).attr('data-freq');
        var thisId = $(this).attr('id');
        tone(thisId,thisFreq);
    });


});