JSFiddle - React, Tailwind, and code Playground

HTML

<div id="keyboard">
        <ul class="cf">
            <li><a href="#" class="key c27 fn"><span id="esc">esc</span></a></li>
            <li><a href="#" class="key c112 fn"><span>F1</span></a></li>
            <li><a href="#" class="key c113 fn"><span>F2</span></a></li>
            <li><a href="#" class="key c114 fn"><span>F3</span></a></li>
            <li><a href="#" class="key c115 fn"><span>F4</span></a></li>
            <li><a href="#" class="key c116 fn"><span>F5</span></a></li>
            <li><a href="#" class="key c117 fn"><span>F6</span></a></li>
            <li><a href="#" class="key c118 fn"><span>F7</span></a></li>
            <li><a href="#" class="key c119 fn"><span>F8</span></a></li>
            <li><a href="#" class="key c120 fn"><span>F9</span></a></li>
            <li><a href="#" class="key c121 fn"><span>F10</span></a></li>
            <li><a href="#" class="key c122 fn"><span>F11</span></a></li>
            <li><a href="#" class="key c123 fn"><span>F12</span></a></li>
            <li><a href="#" class="key fn"><span>Eject</span></a></li>
        </ul>
        <ul class="cf" id="numbers">
            <li><a href="#" class="key c192"><b>~</b><span>`</span></a></li>
            <li><a href="#" class="key c49"><b>!</b><span>1</span></a></li>
            <li><a href="#" class="key c50"><b>@</b><span>2</span></a></li>
            <li><a href="#" class="key c51"><b>#</b><span>3</span></a></li>
            <li><a href="#" class="key c52"><b>$</b><span>4</span></a></li>
            <li><a href="#" class="key c53"><b>%</b><span>5</span></a></li>
            <li><a href="#" class="key c54"><b>^</b><span>6</span></a></li>
            <li><a href="#" class="key c55"><b>&amp;</b><span>7</span></a></li>
            <li><a href="#" class="key c56"><b>*</b><span>8</span></a></li>
            <li><a href="#" class="key c57"><b>(</b><span>9</span></a></li>
            <li><a href="#" class="key c48"><b>)</b><span>0</span></a></li>
            <li><a href="#"...

CSS

body {background: #eee;}

#keyboard {
    margin: 10px auto 0;
    width: 529px;
    height: 210px;
    background:    #d5d9dc  url('keyboard-background.jpg') repeat-x;
    -moz-border-radius-topleft: 5px 14px;
    -moz-border-radius-topright: 5px 14px;
    -moz-border-radius-bottomright: 7px;
    -moz-border-radius-bottomleft: 7px;
    border-top-left-radius: 5px 14px;
    border-top-right-radius: 5px 14px;
    border-bottom-right-radius: 7px;
    border-bottom-left-radius: 7px;
    padding: 33px 0 0 7px;
    -webkit-box-shadow:  
        inset 0 0 5px #bbb,
        0 1px 0 #aaa,
        0 3px 0 #bbb,
        0 7px 20px #ddd;
    -moz-box-shadow:  
        inset 0 0 5px #bbb,
        0 1px 0 #aaa,
        0 3px 0 #bbb,
        0 7px 20px #ddd;
    box-shadow:  
        inset 0 0 5px #bbb,
        0 1px 0 #aaa,
        0 3px 0 #bbb,
        0 7px 20px #ddd;}

ul {list-style-type: none; width: 523px; margin: 0 auto;}
li {float: left;}


.key{
    display: block;
    color: #aaa;
    font: bold 6pt arial;
    text-decoration: none;
    text-align: center;
    width: 29px;
    height: 27px;
    margin: 3px;
    background: #eff0f2;
    -moz-border-radius: 3px;
    border-radius: 3px;
    border-top: 1px solid #f5f5f5;
    -webkit-box-shadow: 
        inset 0 0 17px #e8e8e8,
        0 1px 0 #c3c3c3,
        0 1px 0 #c9c9c9,
        0 1px 2px #333;
    -moz-box-shadow: 
        inset 0 0 17px #e8e8e8,
        0 1px 0 #c3c3c3,
        0 1px 0 #c9c9c9,
        0 1px 2px #333;
    box-shadow: 
        inset 0 0 17px #e8e8e8,
        0 1px 0 #c3c3c3,
        0 1px 0 #c9c9c9,
        0 1px 2px #333;
    text-shadow: 0px 1px 0px #f5f5f5;}

.key:active, .keydown {
    color: #888;
    background: #ebeced;
    margin: 5px 3px 2px;
    -webkit-box-shadow:
        inset 0 0 17px #ddd,
        0 0 2px #333;
    -moz-box-shadow: 
        inset 0 0 17px #ddd,
        0 0 2px #333;
    box-shadow: 
        inset 0 0 17px #ddd,
        0 0 2px #333;
    border-top: 1px solid #eee;}
...