JSFiddle - React, Tailwind, and code Playground

HTML

<html>
<head>
<script src="jquery.js" type="text/javascript"></script>
<style type="text/css">
table.keyboard div.key {
    height: 50px;
    font-size:50px;
    border: 5px outset gray;
    min-width: 60px;
    text-align: center;
}
table.keyboard div.spc {
    height: 1px;
    width: 60px;
    background-color: green;
}

table.keyboard td:hover {
    background-color: lightblue;
}
table.keyboard {
    border: 3px inset blue;
}
</style>
</head>
<body>
<div id="body">
<div>Here is some stuff</div>
<table class='keyboard'>
    <tbody>
        <tr>
            <td><div class='key'>1</div><div class='spc'></div></td>
            <td><div class='key'>2</div><div class='spc'></div></td>
            <td><div class='key'>3</div><div class='spc'></div></td>
            <td><div class='key'>4</div><div class='spc'></div></td>
            <td><div class='key'>5</div><div class='spc'></div></td>
        </tr>
    </tbody>
</table>
</div>
</body>
</html>