JSFiddle - React, Tailwind, and code Playground

by ShockFamily

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: 15px auto 0;
    width: 794px;
    height: 315px;
    background:    #d5d9dc  url('keyboard-background.jpg') repeat-x;
    -moz-border-radius-topleft: 7px 21px;
    -moz-border-radius-topright: 7px 21px;
    -moz-border-radius-bottomright: 10px;
    -moz-border-radius-bottomleft: 10px;
    border-top-left-radius: 7px 21px;
    border-top-right-radius: 7px 21px;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
    padding: 50px 0 0 10px;
    -webkit-box-shadow:  
        inset 0 0 8px #bbb,
        0 1px 0 #aaa,
        0 4px 0 #bbb,
        0 10px 30px #ddd;
    -moz-box-shadow:  
        inset 0 0 8px #bbb,
        0 1px 0 #aaa,
        0 4px 0 #bbb,
        0 10px 30px #ddd;
    box-shadow:  
        inset 0 0 8px #bbb,
        0 1px 0 #aaa,
        0 4px 0 #bbb,
        0 10px 30px #ddd;}

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


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

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