<ul class="keyboard">
  <li class="key">~</li>
  <li class="key">1</li>
  <li class="key">2</li>
  <li class="key">3</li>
  <li class="key">4</li>
  <li class="key">5</li>
  <li class="key">6</li>
  <li class="key">7</li>
  <li class="key">8</li>
  <li class="key">9</li>
  <li class="key">0</li>
  <li class="key">-</li>
  <li class="key">+</li>
  <li class="key delete">Delete</li>
  <li class="key tab">Tab</li>
  <li class="key">Q</li>
  <li class="key">W</li>
  <li class="key">E</li>
  <li class="key">R</li>
  <li class="key">T</li>
  <li class="key">Y</li>
  <li class="key">U</li>
  <li class="key">I</li>
  <li class="key">O</li>
  <li class="key">P</li>
  <li class="key">[</li>
  <li class="key">]</li>
  <li class="key backslash">¥</li>
  <li class="key capslock">CapsLock</li>
  <li class="key">A</li>
  <li class="key">S</li>
  <li class="key">D</li>
  <li class="key">F</li>
  <li class="key">G</li>
  <li class="key">H</li>
  <li class="key">J</li>
  <li class="key">K</li>
  <li class="key">L</li>
  <li class="key">;</li>
  <li class="key">'</li>
  <li class="key return">Enter</li>
  <li class="key shift">Shift</li>
  <li class="key">Z</li>
  <li class="key">X</li>
  <li class="key">C</li>
  <li class="key">V</li>
  <li class="key">B</li>
  <li class="key">N</li>
  <li class="key">M</li>
  <li class="key">,</li>
  <li class="key">.</li>
  <li class="key">/</li>
  <li class="key shift">Shift</li>
  <li class="key leftctrl">Ctrl</li>
  <li class="key">Alt</li>
  <li class="key command">cmd</li>
  <li class="key space">Space</li>
  <li class="key command">cmd</li>
  <li class="key">Alt</li>
  <li class="key">Ctrl</li>
  <li class="key">Fn</li>
</ul>
*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}
body{
  background:#efefef;
  height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
}

.keyboard{
  list-style:none;
  width:434px;
  padding:25px 8px 8px;
  background:rgba(0,0,0,.8);
  border-radius:5px;
  display:grid;
  grid-template-columns:repeat(30, 12px);
  grid-template-rows:repeat(5, 24px);
  grid-gap:2px;
  position:relative;
}
.keyboard::before{
  content:'Logicooooool';
  font-size:14px;
  color:#fff;
  position:absolute;
  top:3px;
  right:10px;
}
.key{
  font-family: 'impact';
  background:rgba(255,255,255,.8);
  border:1px solid rgba(255,255,255,1);
  border-radius:4px;
  grid-column:span 2;
  font-size:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
.delete {
  grid-column:span 4;
}
.tab {
  grid-column:span 3;
}
.backslash {
  grid-column:span 3;
  font-weight:bold;
}
.capslock {
  grid-column:span 4;
}
.return {
  grid-column:span 4;
}
.shift {
  grid-column:span 5;
}
.leftctrl {
  grid-column:span 3;
}
.command {
  grid-column:span 3;
}
.space {
  grid-column:span 13;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.