JSFiddle - React, Tailwind, and code Playground

HTML

<div id="grid">
        <div tabindex="0" id="cell_0_0" class="box" onclick="clicked(this);" onkeypress="alert('key');" style="top:0%;  left:0%; ">0</div>
        <div tabindex="0" id="cell_0_1" class="box" onclick="clicked(this);" onkeypress="alert('key');" style="top:0%;  left:20%; ">0</div>
        <div tabindex="0" id="cell_0_2" class="box" onclick="clicked(this);" onkeypress="alert('key');" style="top:0%;  left:40%; ">0</div>
        <div tabindex="0" id="cell_0_3" class="box" onclick="clicked(this);" onkeypress="alert('key');" style="top:0%;  left:60%; ">0</div>
        <div tabindex="0" id="cell_0_4" class="box" onclick="clicked(this);" onkeypress="alert('key');" style="top:0%;  left:80%; ">0</div>            
    </div>

CSS

#grid {
    position:absolute;
    padding: 0;
    border:0;
    width:370px;
    height:370px;
}
.box
{
    position:absolute;
    border: 2px solid Black;
    height: 50px;
    width: 50px;
    vertical-align: middle;
    text-align: center;
    background-color: yellow;
    font-size: xx-large;
    color:Navy;
    font-family: Arial;
    margin:10px;
    line-height:1.6;
}
.boxActive
{
    background-color:Aqua;
}