JSFiddle - React, Tailwind, and code Playground

by l xk

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="#" class="key c189 alt"><b>_</b><span>-</span></a></li>
    <li><a href="#" class="key c187"><b>+</b><span>=</span></a></li>
    <li><a href="#" class="key c46" id="delete"><span>Delete</span></a></li>
  </ul>
  <ul class="cf"...

CSS

body {
  background: #333;
}

#keyboard {
  margin: 50px auto;
  width: 794px;
  height: 315px;
  background: #d5d9dc url('') 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 #111;
  -moz-box-shadow: inset 0 0 8px #bbb, 0 1px 0 #aaa, 0 4px 0 #bbb, 0 10px 30px #111;
  box-shadow: inset 0 0 8px #bbb, 0 1px 0 #aaa, 0 4px 0 #bbb, 0 10px 30px #111;
}

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: #222;
  -moz-border-radius: 4px;
  border-radius: 4px;
  border-top: 1px solid #222;
  -webkit-box-shadow: inset 0 0 25px #333, 0 1px 0 #000, 0 2px 0 #222, 0 2px 3px #333;
  -moz-box-shadow: inset 0 0 25px #333, 0 1px 0 #000, 0 2px 0 #222, 0 2px 3px #333;
  box-shadow: inset 0 0 25px #333, 0 1px 0 #000, 0 2px 0 #222, 0 2px 3px #333;
  text-shadow: 0px -1px 0px #000;
}

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

.fn span {
  display: block;
  margin: 14px 5px 0 0;
  text-align: right;
  font: bold 6pt arial;
  text-transform: uppercase;
}

#esc {
  margin: 6px 15px 0 0;
  font-size: 7.5pt;
  text-transform: lowercase;
}

#numbers li a span {
  display: block;
}

#numbers li a b {
  margin: 3px 0 3px;
  display: block;
}

#numbers li .alt b {
  display: block;
  margin: 0 0...