A CodePen by Joe Taylor. Keyboard - A keyboard. Nothing much else to it. Not functional. Sloppily coded. More of a codepencil (sketchy) than a codepen.

index.haml

#keyboard

script.js

var kbd = $("#keyboard");

/* Size keyboard */

function resizeKeyboard() {
  kbd.height(kbd.width() / 3);
}

resizeKeyboard();

$(window).on("resize", resizeKeyboard);


/* keys */

function kbdKey(k, i, extraClasses) {
  extraClasses = extraClasses || "";
  var r = $("<a class='key " + extraClasses + "' href='javascript:void 0'><span>"+k+"</span></a>");
  if (i === 0) r.css({"clear" : "left"});
  return r;
}

var letters = "`1234567890-+";
for (var i = 0; i < letters.length; i++) {
  var key = kbdKey(letters.charAt(i), i);
  kbd.append(key);
}
kbd.append(kbdKey("delete", 1, "delete"));

kbd.append(kbdKey("tab", 0, "tab"));
var letters = "QWERTYUIOP[]\\";
for (var i = 1; i <= letters.length; i++) {
  var key = kbdKey(letters.charAt(i - 1), i);
  kbd.append(key);
}

kbd.append(kbdKey("caps lock", 0, "caps"));
var letters = "ASDFGHJKL;'";
for (var i = 1; i <= letters.length; i++) {
  var key = kbdKey(letters.charAt(i-1), i);  
  kbd.append(key);
}
kbd.append(kbdKey("return", 1, "return"));

kbd.append(kbdKey("shift", 0, "shift"));
var letters = "ZXCVBNM,./";
for (var i = 0; i < letters.length; i++) {
  var key = kbdKey(letters.charAt(i));  
  kbd.append(key);
}
kbd.append(kbdKey("shift", 1, "shift"));

kbd.append(kbdKey("", 0, "space"));

style.scss

@import "compass";
$bg : #101218;

body {
  background-color: $bg;
  background-image: radial-gradient(black, $bg);
}

#keyboard {
  position: absolute;
  left: 10px; top: 10px; right: 10px;
  height: 400px;
  background: #4c4c4c; /* Old browsers */
  background: -moz-linear-gradient(top, #4c4c4c 0%, #595959 26%, #666666 38%, #474747 50%, #4f4f4f 77%, #2b2b2b 97%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4c4c4c), color-stop(26%,#595959), color-stop(38%,#666666), color-stop(50%,#474747), color-stop(77%,#4f4f4f), color-stop(97%,#2b2b2b)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #4c4c4c 0%,#595959 26%,#666666 38%,#474747 50%,#4f4f4f 77%,#2b2b2b 97%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #4c4c4c 0%,#595959 26%,#666666 38%,#474747 50%,#4f4f4f 77%,#2b2b2b 97%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #4c4c4c 0%,#595959 26%,#666666 38%,#474747 50%,#4f4f4f 77%,#2b2b2b 97%); /* IE10+ */
  background: linear-gradient(to bottom, #4c4c4c 0%,#595959 26%,#666666 38%,#474747 50%,#4f4f4f 77%,#2b2b2b 97%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c4c4c', endColorstr='#2b2b2b',GradientType=0 ); /* IE6-9 */
  border-radius: 10px;
}

.key {
  display: block;
  width: 5.9%;
  height: 16.5%;
  line-height: 0;
  background-color: #101010;
  color: #f0f0f0;
  text-align: center;
  margin: 1% 0 0 1%;
  border-radius: 8px;
  float: left;
  font-size: 14px;
  text-decoration: none;
}

.key.delete, .key.tab {
  width: 8.3%;
}

.key.caps, .key.return {
  width: 10.55%;
}

.key.space {
  width: 60%;
  clear: both;
  margin-left: 20%;
  position: relative;
}

.key.shift {
  width: 14%;
}

.key:active {
  background-color: red;
}

.keyrow {
  clear: both;
}

.key span {
  position: relative; top: 50%;
}