JSFiddle - React, Tailwind, and code Playground

HTML

<div class="keys">
    <div id="first"><button>Q</button><button>W</button><button>E</button><button>R</button><button>T</button><button>Y</button><button>U</button><button>I</button><button>O</button><button>P</button></div>
    <div id="second"><button>A</button><button>S</button><button>D</button><button>F</button><button>G</button><button>H</button><button>J</button><button>K</button><button>L</button></div>
    <div id="third"><button>Z</button><button>X</button><button>C</button><button>V</button><button>B</button><button>N</button><button>M</button></div>
</div>

CSS

.keys {
    position: absolute;
    margin-left: 100px;
    margin-top: -150px;
    z-index: 2;
}
.keys > div > * {
    width: 40px;
    height: 25px;
    margin-left: 10px;
    margin-top: 10px;
    z-index: 3;
}
#second {
    padding-left: 15px;
}
#third {
    padding-left: 40px;
}

JavaScript

var letter = "";
var iClickYou = function(){
    $(".keys > div > button").click(function(){
        var key = $(this);
        letter = key.text();
        key.disabled = true;
        console.log(letter);

    });
};
$(document).ready(iClickYou());