JSFiddle - React, Tailwind, and code Playground

HTML

<span class="board">
    <span>
        <kbd>esc</kbd>
    </span>
    <span>
        <kbd class="sub-right">f1</kbd>
    </span>
    <span>
        <kbd class="sub-right">f2</kbd>
    </span>
    <span>
        <kbd class="sub-right">f3</kbd>
    </span>
    <span>
        <kbd class="sub-right">f4</kbd>
    </span>
    <span>
        <kbd class="sub-right">f5</kbd>
    </span>
    <span>
        <kbd class="sub-right">f6</kbd>
    </span>
    <span>
        <kbd class="sub-right">f7</kbd>
    </span>
    <span>
        <kbd class="sub-right">f8</kbd>
    </span>
    <span>
        <kbd class="sub-right">f9</kbd>
    </span>
    <span>
        <kbd class="sub-right">f10</kbd>
    </span>
    <span>
        <kbd class="sub-right">f11</kbd>
    </span>
    <span>
        <kbd class="sub-right">f12</kbd>
    </span>
    <br />
    
    <span>
        <kbd class="sup">~</kbd>
        <kbd class="sub">`</kbd>
    </span>
    <span>
        <kbd class="sup">!</kbd>
        <kbd class="sub">1</kbd>
    </span>
    <span>
        <kbd class="sup">@</kbd>
        <kbd class="sub">2</kbd>
    </span>
    <span>
        <kbd class="sup">#</kbd>
        <kbd class="sub">3</kbd>
    </span>
    <span>
        <kbd class="sup">$</kbd>
        <kbd class="sub">4</kbd>
    </span>
    <span>
        <kbd class="sup">%</kbd>
        <kbd class="sub">5</kbd>
    </span>
    <span>
        <kbd class="sup">^</kbd>
        <kbd class="sub">6</kbd>
    </span>
    <span>
        <kbd class="sup">&amp;</kbd>
        <kbd class="sub">7</kbd>
    </span>
    <span>
        <kbd class="sup">*</kbd>
        <kbd class="sub">8</kbd>
    </span>
    <span>
        <kbd class="sup">(</kbd>
        <kbd class="sub">9</kbd>
    </span>
    <span>
        <kbd class="sup">)</kbd>
        <kbd class="sub">0</kbd>
    </span>
    <span>
        <kbd class="sup">&mdash;</kbd>
        <kbd class="sub">-</kbd>
    </span>
    <span>
        <kbd class="sup">+</kbd>
        <kbd class="sub">=</kbd>
...

CSS

body {font: 14px Arial, sans-serif;}

.board {
    display: table;
    
    width: 935px;
    height: 100px;
    
    margin: 0 auto;
    padding: 85px 30px 40px;
    
    text-align: center;
    
    -webkit-border-top-left-radius: 5px 15px;
    -webkit-border-top-right-radius: 5px 15px;
    -webkit-border-bottom-left-radius: 15px;
    -webkit-border-bottom-right-radius: 15px;
    
    -moz-border-top-left-radius: 5px 15px;
    -moz-border-top-right-radius: 5px 15px;
    -moz-border-bottom-left-radius: 15px;
    -moz-border-bottom-right-radius: 15px;
    
    border-top-left-radius: 5px 15px;
    border-top-right-radius: 5px 15px;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #abadad), color-stop(10%, #fff), color-stop(20%, #d5d9dc), color-stop(93%, #d5d9dc), color-stop(100%, #888));
    background: -moz-linear-gradient(top, #abadad 0%, #fff 10%, #d5d9dc 20%, #d5d9dc 93%, #888 100%);
    background: -o-linear-gradient(top, #abadad 0%, #fff 10%, #d5d9dc 20%, #d5d9dc 93%, #888 100%);
    background: linear-gradient (top, #abadad 0%, #fff 10%, #d5d9dc 20%, #d5d9dc 93%, #888 100%);
    
    -webkit-box-shadow: 0px 5px 10px 1px #6f7070;
    -moz-box-shadow: 0px 5px 10px 1px #6f7070;
    box-shadow: 0px 5px 10px 1px #6f7070;
}

.board span {
    display: inline-block;
    
    position: relative;
    
    margin: 3px;
    
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    
    -webkit-box-shadow: 0px 2px 5px 1px #888;
    -moz-box-shadow: 0px 2px 5px 1px #888;
    box-shadow: 0px 2px 5px 1px #888;
    
    background: #fafafa;
}

.board span:nth-child(-n+13) {
    width: 59px;
    height: 37px;
    margin: 3px 4px;
}

.board span:nth-child(n+14) {
    width: 53px;
    height: 55px;
}

.board span:nth-child(28), .board span:nth-child(30) {
    width: 95px;
}

.board kbd {
    position: absolute;
    
    top: 50%;
   ...