JSFiddle - React, Tailwind, and code Playground

by NerfAnarchist

HTML

<table class="keyboard" cellpadding="0" cellspacing="0">
    <tbody>
    <tr class="fixed_width">
           <td colspan="1"></td><td colspan="1"></td><td colspan="1"></td><td colspan="1"></td><td colspan="1"></td><td colspan="1"></td><td colspan="1"></td><td colspan="1"></td><td colspan="1"></td><td colspan="1"></td><td colspan="1"></td><td colspan="1"></td><td colspan="1"></td><td colspan="1"></td><td colspan="1"></td><td colspan="1"></td><td colspan="1"></td><td colspan="1"></td><td colspan="1"></td><td colspan="1"></td><td colspan="1"></td><td colspan="1"></td><td colspan="1"></td><td colspan="1"></td><td colspan="1"></td><td colspan="1"></td>
        </tr>
        <tr>
            <td colspan="2">q</td>
            <td colspan="2">w</td>
            <td colspan="2">e</td>
            <td colspan="2">r</td>
            <td colspan="2">t</td>
            <td colspan="2">y</td>
            <td colspan="2">u</td>
            <td colspan="2">i</td>
            <td colspan="2">o</td>
            <td colspan="2">p</td>
            <td colspan="2">7</td>
            <td colspan="2">8</td>
            <td colspan="2">9</td>
        </tr>
        <tr>
            <td colspan="1">&#9650;</td>
            <td colspan="2">a</td>
            <td colspan="2">s</td>
            <td colspan="2">d</td>
            <td colspan="2">f</td>
            <td colspan="2">g</td>
            <td colspan="2">h</td>
            <td colspan="2">j</td>
            <td colspan="2">k</td>
            <td colspan="2">l</td>
            <td colspan="1" class="spacer">&nbsp;</td>
            <td colspan="2">4</td>
            <td colspan="2">5</td>
            <td colspan="2">6</td>
        </tr>
        <tr>
            <td colspan="2">&#8962;</td>
            <td colspan="2">z</td>
            <td colspan="2">x</td>
            <td colspan="2">c</td>
            <td colspan="2">v</td>
            <td colspan="2">b</td>
            <td colspan="2">n</td>
            <td colspan="2">m</td>
   ...

CSS

table.keyboard {
    height:100%;
    width:100%;
    text-align: center;
    border-collapse: separate;
}

table.keyboard tr.fixed_width td {
    background-color: #CCC;
    height:0px;
    width:5%;
    border:none;
}

table.keyboard tr td {
    background-color: #EEE;
    border:2px outset #DDD;
    font-family: monospace;
    font-weight:bold;
    font-size:1.7em;
    padding:2px;
    text-align: center;
}

table.keyboard tr td.spacer {
    background-color: #CCC;
    border:none;
}

JavaScript

// THIS IS AN UNFINISHED FULL KEYBOARD