JSFiddle - React, Tailwind, and code Playground

by NerfAnarchist

HTML

<table class="keyboard">
  <tr>
    <td>1</td>
    <td colspan="2">2</td>
    <td colspan="2">3</td>
    <td colspan="2">4</td>
    <td colspan="2">5</td>
    <td colspan="2">6</td>
    <td colspan="2">7</td>
    <td colspan="2">8</td>
    <td colspan="2">9</td>
    <td colspan="2">0</td>
    <td colspan="2">-</td>
    <td colspan="2">=</td>
    <td colspan="3" class="del">&#8592;</td>
    <td class="spacer">&nbsp;</td>
    <td class="spacer">&nbsp;</td>
    <td>=</td>
    <td>/</td>
    <td>*</td>
  </tr>
  <tr>
    <td class="spacer">&nbsp;</td>
    <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">[</td>
    <td colspan="2">]</td>
    <td>\</td>
    <td class="spacer">&nbsp;</td>
    <td>7</td>
    <td>8</td>
    <td>9</td>
    <td>-</td>
  </tr>
  <tr>
    <td colspan="2" class="spacer">&nbsp;</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="2">;</td>
    <td colspan="2">'</td>
    <td colspan="2" class="ret">&crarr;</td>
    <td class="spacer">&nbsp;</td>
    <td>4</td>
    <td>5</td>
    <td>6</td>
    <td>+</td>
  </tr>
  <tr>
    <td colspan="3" class="spacer">&nbsp;</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>
    <td colspan="2">,</td>
    <td colspan="2">.</td>
    <td colspan="2">/</td>
    <td colspan="3" class="small sft">&#9650;</td>
    <td class="spacer">&nbsp;</td>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td rowspan="2" class="small">&crarr;</td>
...

CSS

table.keyboard {
    width: 100%;
    font-size: 15px;
    font: helvetica;
}

.keyboard td {
    border: outset;
    text-align: center;
}

.keyboard .spacer {
    visibility: hidden;
}

.keyboard .small {
    font-size: 11px;
}

JavaScript

// full size keyboard