#keyboard
  .keyboard-plate
    .top-panel
      .key.media-key.play-pause{:"key-code" => "179"}
        %i.fas.fa-play
        %i.fas.fa-pause
      .key.media-key.volume-down{:"key-code" => "174"}
        %i.fas.fa-volume-off
        %i.fas.fa-minus 
      .key.media-key.volume-up{:"key-code" => "175"}
        %i.fas.fa-volume-off
        %i.fas.fa-plus
      .key.media-key.mute{:"key-code" => "173"}
        %i.fas.fa-volume-off
    
    .logo
      %img{:width => "200", :src => "https://upload.wikimedia.org/wikipedia/commons/thumb/9/92/Microsoft_wordmark_%282012%29_without_logo.svg/799px-Microsoft_wordmark_%282012%29_without_logo.svg.png"}
      
    .function-keys
      .key.function-key.esc{:"key-code" => "27"} Esc
      .key.function-key.f1{:"key-code" => "112"} F1
      .key.function-key.f2{:"key-code" => "113"} F2
      .key.function-key.f3{:"key-code" => "114"} F3
      .key.function-key.f4{:"key-code" => "115"} F4

      .key.function-key.f5{:"key-code" => "116"} F5
      .key.function-key.f6{:"key-code" => "117"} F6
      .key.function-key.f7{:"key-code" => "118"} F7
      .key.function-key.f8{:"key-code" => "119"} F8

      .key.function-key.f9{:"key-code" => "120"} F9
      .key.function-key.f10{:"key-code" => "121"} F10
      .key.function-key.f11{:"key-code" => "122"} F11
      .key.function-key.f12{:"key-code" => "123"} F12

      .key.function-key.prtscn PrtScn
      .key.function-key.scrlk{:function => "scrolllook", :"key-code" => "145"} ScrLk
      .key.function-key.pause{:"key-code" => "19"} Pause

      .calc-top-panel
        .key.media-key{:"key-code" => "183"}
          %i.fas.fa-calculator

        .led-numlock.led-indicator 1
        .led-capslock.led-indicator A
        .led-scrolllook.led-indicator
          %i.fas.fa-down
    
    .main-keys
      .first-row.main-keys-row
        .key.deep-key{:"key-code" => "223"}
          .top-left ¬
          .top-right
          .bottom-left '
          .bottom-right |

        .key.deep-key{:"key-code" => "49"}
          .top-left !
          .top-right
          .bottom-left 1
          .bottom-right
        
        .key.deep-key{:"key-code" => "50"}
          .top-left "
          .top-right
          .bottom-left 2
          .bottom-right
        
        .key.deep-key{:"key-code" => "51"}
          .top-left £
          .top-right
          .bottom-left 3
          .bottom-right
        
        .key.deep-key{:"key-code" => "52"}
          .top-left $
          .top-right
          .bottom-left 4
          .bottom-right
        
        .key.deep-key{:"key-code" => "53"}
          .top-left %
          .top-right
          .bottom-left 5
          .bottom-right
        
        .key.deep-key{:"key-code" => "54"}
          .top-left ^
          .top-right
          .bottom-left 6
          .bottom-right
          
        .key.deep-key{:"key-code" => "55"}
          .top-left &
          .top-right
          .bottom-left 7
          .bottom-right
          
        .key.deep-key{:"key-code" => "56"}
          .top-left *
          .top-right
          .bottom-left 8
          .bottom-right
          
        .key.deep-key{:"key-code" => "57"}
          .top-left (
          .top-right
          .bottom-left 9
          .bottom-right
          
        .key.deep-key{:"key-code" => "48"}
          .top-left )
          .top-right
          .bottom-left 0
          .bottom-right
          
        .key.deep-key{:"key-code" => "189"}
          .top-center _
          .bottom-center -
          
        .key.deep-key{:"key-code" => "187"}
          .top-center +
          .bottom-center =
          
        .key.deep-key.long-80{:"key-code" => "8"}
          .whole.align-right Backspace

      
      .second-row.main-keys-row
        .key.deep-key.long-60.tab{:"key-code" => "9"}
          .half-top #{"| ------- >"}
          .half-bottom  #{"< ------- |"}
          
        .key.deep-key{:"key-code" => "81"}
          .whole Q
          
        .key.deep-key{:"key-code" => "87"}
          .whole W
          
        .key.deep-key{:"key-code" => "69"}
          .whole E
          
        .key.deep-key{:"key-code" => "82"}
          .whole R
          
        .key.deep-key{:"key-code" => "84"}
          .whole T
          
        .key.deep-key{:"key-code" => "89"}
          .whole Y
          
        .key.deep-key{:"key-code" => "85"}
          .whole U
          
        .key.deep-key{:"key-code" => "73"}
          .whole I
          
        .key.deep-key{:"key-code" => "79"}
          .whole O
          
        .key.deep-key{:"key-code" => "80"}
          .whole P
          
        .key.deep-key{:"key-code" => "219"}
          .half-top {
          .half-bottom [
          
        .key.deep-key{:"key-code" => "221"}
          .half-top }
          .half-bottom ]
          
        .key.deep-key.enter{:"key-code" => "13", :ss => "enter"}
          .whole
            %span.enter-arrow <
            %span.enter-line-hoz ----------
            %span.enter-line-ver '

      
      .third-row.main-keys-row
        .key.deep-key.long-70{:function => "capslock", "key-code" => "20"}
          .whole.align-right Caps Lock
          
        .key.deep-key{:"key-code" => "65"}
          .whole A
          
        .key.deep-key{:"key-code" => "83"}
          .whole S
          
        .key.deep-key{:"key-code" => "68"}
          .whole D
          
        .key.deep-key{:"key-code" => "70"}
          .whole F
          
        .key.deep-key{:"key-code" => "71"}
          .whole G
          
        .key.deep-key{:"key-code" => "72"}
          .whole H
          
        .key.deep-key{:"key-code" => "74"}
          .whole J
          
        .key.deep-key{:"key-code" => "75"}
          .whole K
          
        .key.deep-key{:"key-code" => "76"}
          .whole L
          
        .key.deep-key{:"key-code" => "186"}
          .half-top :
          .half-bottom ;
          
        .key.deep-key{:"key-code" => "192"}
          .half-top @
          .half-bottom '
          
        .key.deep-key{:"key-code" => "222"}
          .half-top ~
          .half-bottom #

      
      .forth-row.main-keys-row
        .key.deep-key.long-50
          .whole.shift
            %i.fas.fa-arrow-up
            
        .key.deep-key.long-50{:"key-code" => "220"}
          .half-top |
          .half-bottom \
          
        .key.deep-key{:"key-code" => "90"}
          .whole Z
          
        .key.deep-key{:"key-code" => "88"}
          .whole X
          
        .key.deep-key{:"key-code" => "67"}
          .whole C
          
        .key.deep-key{:"key-code" => "86"}
          .whole V
          
        .key.deep-key{:"key-code" => "66"}
          .whole B
          
        .key.deep-key{:"key-code" => "78"}
          .whole N
          
        .key.deep-key{:"key-code" => "77"}
          .whole M
          
        .key.deep-key{:"key-code" => "188"}
          .half-top <
          .half-bottom ,
          
        .key.deep-key{:"key-code" => "190"}
          .half-top >
          .half-bottom .
          
        .key.deep-key{:"key-code" => "191"}
          .half-top ?
          .half-bottom /
          
        .key.deep-key.long-100{:"key-code" => "16", :ss => "spacebar"}
          .whole.shift
            %i.fas.fa-arrow-up

 
      .fifth-row.main-keys-row
        .key.deep-key.long-60{:"key-code" => "17"}
          .whole Ctrl
          
        .key.deep-key.long-50
          .whole.windows
            %i.fab.fa-windows
            
        .key.deep-key.long-50{:"key-code" => "18"}
          .whole Alt
          
        .key.deep-key.spacebar{:"key-code" => "32", :ss => "spacebar"}
          .whole
          
        .key.deep-key.long-50
          .whole Alt Gr
          
        .key.deep-key.long-50
          .whole.blue Fn
          
        .key.deep-key.long-70{:"key-code" => "93"}
          .whole.options
            %i.fas.fa-bars
            
        .key.deep-key.long-70
          .whole Ctrl


    .centeral-keys
      .first-row
        .key.deep-key.align-left{:"key-code" => "45"}
          .whole Insert
          
        .key.deep-key.align-left{:"key-code" => "36"}
          .whole Home
          
        .key.deep-key.align-left{:"key-code" => "33"}
          .whole Page Up
          
      .second-row
        .key.deep-key.align-left{:"key-code" => "46"}
          .whole Delete
          
        .key.deep-key.align-left{:"key-code" => "35"}
          .whole End
          
        .key.deep-key.align-left{:"key-code" => "34"}
          .whole Page Down
          
      .arrow-keys
        .key.deep-key.arrow-up{:"key-code" => "38"}
          .whole
            %i.fas.fa-chevron-up
            
        .key.deep-key.arrow-left{:"key-code" => "37"}
          .whole
            %i.fas.fa-chevron-left
            
        .key.deep-key.arrow-down{:"key-code" => "40"}
          .whole
            %i.fas.fa-chevron-down
            
        .key.deep-key.arrow-right{:"key-code" => "39"}
          .whole
            %i.fas.fa-chevron-right

          
    .calc-keys
      .calc-row.first-row
        .key.deep-key{:function => "numlock", "key-code" => "144"}
          .whole Num Lock
          
        .key.deep-key{:"key-code" => "111"}
          .whole /
          
        .key.deep-key{:"key-code" => "106"}
          .whole *
          
        .key.deep-key{:"key-code" => "109"}
          .whole -
          
      .calc-row.second-row
        .key.deep-key{:"key-code" => "103"}
          .whole 7
          
        .key.deep-key{:"key-code" => "104"}
          .whole 8
          
        .key.deep-key{:"key-code" => "105"}
          .whole 9
          
        .key.deep-key.height-double{:"key-code" => "107"}
          .whole +
          
      .calc-row.third-row
        .key.deep-key{:"key-code" => "100"}
          .whole 4
          
        .key.deep-key{:"key-code" => "101"}
          .whole 5
          
        .key.deep-key{:"key-code" => "102"}
          .whole 6
          
      .calc-row.forth-row
        .key.deep-key{:"key-code" => "97"}
          .whole 1
          
        .key.deep-key{:"key-code" => "98"}
          .whole 2
          
        .key.deep-key{:"key-code" => "99"}
          .whole 3
          
        .key.deep-key.height-double
          .whole Enter
          
      .calc-row.fifth-row
        .key.deep-key.long-90{:"key-code" => "96"}
          .whole 0
          
        .key.deep-key{:"key-code" => "110"}
          .whole .
          
%p Click on the keyboard for sound and physical key strokes detection
View Compiled
body
  background: #2a2c35
  font-family: arial
  font-size: 10px
  
  & > p
    color: #fff
    text-align: center
    font-size: 20px

::selection
  background: none

::-moz-selection
  background: none

#keyboard
  width: 1200px
  height: 410px
  margin: 20px auto
  background: linear-gradient(to bottom, #65666a 0%,#0d0d11 9%,#0d0d11 9%,#0d0d11 12%,#0d0d11 37%,#0b0d19 100%)
  border-radius: 40px 40px 50px 50px
  padding: 6px
  box-shadow: 0 5px 10px rgba(0,0,0,0.5)
  
  .keyboard-plate
    background: linear-gradient(to bottom, #44484b 0%,#404447 4%,#3f4346 86%,#6b6a6f 100%)
    border: 1px solid #333
    width: 100%
    position: relative
    height: 100%
    border-radius: 40px 40px 50px 50px
    background: url(https://thumb9.shutterstock.com/mosaic_250/797209/148738556/stock-photo-dark-rough-plastic-surface-seamless-tileable-texture-148738556.jpg) repeat -30px -20px #fff
    background-size: 7%
    filter: brightness(0.95)
  
  .key
    display: inline-block
    float: left
    
    &:hover,&.pressed
      filter: brightness(0.95)
      cursor: pointer
    
  .media-key, .function-key
    font-size: 12px
    color: #fff
    background: linear-gradient(to bottom, #77767b 0%,#222327 4%,#222327 91%,#9c9da1 100%)
    padding: 3px 23px
    box-shadow: 0 0 10px #000
    border-radius: 3px
    
    &:hover, &.pressed
      box-shadow: inset 0 0 10px #000
    
    i
      margin: 0 2px
      font-size: 8px
      vertical-align: middle
  
  .function-keys
    padding-left: 20px
    overflow: hidden
    padding-top: 2px
    padding-bottom: 2px
    
    .function-key
      color: #cdd0d5
      font-size: 8px
      padding: 7px 0
      width: 40px
      text-align: center
      margin-right: 7px
      border-radius: 5px
      box-shadow: 0 0 2px rgba(0,0,0,0.6)
      border: 2px solid rgba(0,0,0,0.6)
      background: linear-gradient(to bottom, #44484b 0%,#404447 4%,#3f4346 86%,#6b6a6f 100%)

    .esc,.f4,.f8
      margin-right: 40px

    .f12
      margin-right: 30px
  
  .logo
    position: absolute
    right: 70px
    top: 30px
    
    img
      width: 100px
      filter: brightness(1.8)
  
  .top-panel, .calc-top-panel
    overflow: hidden
    background: #1f2326
    border-radius: 10px
    border: 1px solid #000
    margin: 20px 20px 10px
    padding: 5px 0 5px
    width: 655px
    padding-left: 275px
    
    .play-pause
      margin-right: 10px

    .volume-down, .volume-up
      i:first-child
        font-size: 12px
      
      i:last-child
        font-size: 6px
      
    .mute
      margin-left: 10px
      
      i
        display: inline-block
        width: 10px
        font-size: 6px
        height: 10px
        line-height: 10px
        border-radius: 50%
        border: 1px solid #fff
        text-align: center
  
  .calc-top-panel
    width: 200px
    float: right
    padding: 0
    margin: 0 20px 0 0
    box-shadow: inset 0 0 5px #000
    
    .media-key
      font-size: 12px
      padding: 6px 15px
      background: linear-gradient(to bottom, #44484b 0%,#404447 4%,#3f4346 86%,#6b6a6f 100%)
      
      i
        font-size: 10px
    
    .led-indicator
      color: #333
      width: 12px
      height: 12px
      text-align: center
      font-weight: bold
      line-height: 13px
      font-size: 8px
      margin: 5px 18px
      border: 1px solid
      display: inline-block
      opacity: 0.9
      transition: all .3s ease-in
      border-radius: 2px
      
      &.active, &:hover
        box-shadow: 0 0 5px rgba(206,233,87,0.4)
        color: #b2ca54
  
  .main-keys
    margin-left: 20px
    margin-top: 20px
    float: left
    
    .main-keys-row
      clear: both
      position: relative
      
      &.first-row
        z-index: 2
      
      &.second-row
        z-index: 4
      
      &.third-row
        z-index: 6
      
      &.forth-row
        z-index: 8
      
      &.fifth-row
        z-index: 10
      
      .key
      margin-top: -1px
      
      &.first-row .key
        margin-top: 0
  
  .centeral-keys
    float: left
    margin-left: 23px
    margin-top: 20px
    position: relative
    height: 252px
    
    .arrow-keys
      bottom: 0
      position: absolute
      
      .arrow-up
        margin: 0 auto
        display: block
        clear: both
        float: none
      
      .arrow-left, .arrow-down, .arrow-right
        position: relative
        z-index: 10
        margin-top: -2px
  
  .deep-key
    border-style: solid
    border-color: #222629 #292d30 #5d6164 #23272a
    border-width: 3px 8px 8px 3px
    background: #373b3e
    color: #fff
    box-shadow: 0 3px 10px rgba(0,0,0,0.5)
    border-radius: 5px
    width: 40px
    height: 40px
    overflow: hidden
    position: relative
    
    &:hover, &.pressed
      border-bottom-width: 6px
      border-top-width: 5px
    
    .blue
      color: #5296d2
    
    &.long-100
      width: 115px

    &.long-90
      width: 92px
    
    &.long-80
      width: 85px
    
    &.long-70
      width: 70px
    
    &.long-60
      width: 60px
    
    &.long-50
      width: 50px
    
    &.spacebar
      width: 270px
    
    &.height-double
      overflow: visible
      
      &:after
        content: ''
        display: block
        width: 40px
        left: -3px
        height: 53px
        border-style: solid
        box-shadow: 0 5px 5px rgba(0,0,0,0.3)
        border-color: #222629 #292d30 #5d6164 #23272a
        border-width: 0 8px 8px 3px
        background: #373b3e
        position: absolute
        z-index: 2
      
    &.enter
      width: 65px
      position: absolute
      overflow: visible
      text-align: right
      
      .enter-arrow
        position: absolute
        margin-left: -3px
        margin-top: 1px
      
      .enter-line-hoz
        letter-spacing: -1px
      
      .enter-line-ver
        display: inline-block
        position: absolute
        margin-top: 1px
        margin-lfet: -2px
      
      &:after
        content: ''
        display: block
        width: 55px
        left: 7px
        height: 52px
        border-style: solid
        box-shadow: 0 5px 5px rgba(0,0,0,0.3)
        border-color: #222629 #292d30 #5d6164 #23272a
        border-width: 0 8px 8px 3px
        background: #373b3e
        position: absolute
        z-index: 2
    
    .top-left,.top-right,.bottom-left,.bottom-right
      width: 8px
      float: left
      padding: 5px
      height: 8px
    
    .top-center,.bottom-center,.half-top,.half-bottom
      width: 100%
      height: 8px
      line-height: 20px
      padding: 4px 0 0
      text-align: center
    
    .top-right, .bottom-right
      text-align: right
    
    .whole
      text-align: center
      padding: 14px 2px
  
    // Custom icons
    .windows
      font-size: 14px
    
    .options
      i
        border: 1px solid #fff
        padding: 2px 3px
        font-size: 7px

    &.tab
      letter-spacing: -1px
  
  .calc-keys
    float: right
    margin-right: 18px
    margin-top: 20px
    
    .calc-row
      clear: both
      position: relative
      
      .key
        margin-top: -1px
      
      &.first-row
        z-index: 2
        margin-top: 0
        
        .key
          margin-top: 0

      &.second-row
        z-index: 4
      
      &.third-row
        z-index: 6
      
      &.forth-row
        z-index: 8
      
      &.fifth-row
        z-index: 10
View Compiled
$('.key').on('mousedown', (e) =>{
  let target = e.currentTarget;
  $('.key').removeClass('pressed');
  $(target).toggleClass('pressed');
  
  var fn = $(target).attr('function');
  
  if (typeof fn !== typeof undefined && fn !== false) {
    switch(fn){
      case 'numlock':
        $('.led-indicator.led-numlock').toggleClass('active');
        break;
      case 'capslock':
        $('.led-indicator.led-capslock').toggleClass('active');
        break;
      case 'scrolllook':
        $('.led-indicator.led-scrolllook').toggleClass('active');
        break;
    }
  }
});

$('.key').on('mouseup', () =>{
  $('.key').removeClass('pressed');  
});

$('.deep-key').on('click', (e) =>{
  let target = e.currentTarget;
  let ss = $(target).attr('ss');
  
  if (typeof ss !== typeof undefined && ss !== false) {
    switch(ss){
      case 'spacebar':
        $.playSound("http://www.freesfx.co.uk/rx2/mp3s/5/16952_1461335341.mp3");
        break;
      case 'enter':
        $.playSound('http://www.freesfx.co.uk/rx2/mp3s/5/16951_1461335341.mp3');
        break;
     }
  } else {
    $.playSound("http://www.freesfx.co.uk/rx2/mp3s/6/18660_1464810669.mp3");
  }
});

$('.function-key, .media-key').on('click', () =>{
  $.playSound("http://freesound.org/data/previews/181/181003_2901073-lq.mp3");
});

$(window).on('keydown', (e) =>{
  let keyCode = e.keyCode;
  $('.key[key-code="' + keyCode + '"]').click();
  $('.key[key-code="' + keyCode + '"]').mousedown();
  return false;
  e.preventDefault();
});

$(window).on('keyup', (e) =>{
  let keyCode = e.keyCode;
  $('.key[key-code="' + keyCode + '"]').removeClass('pressed');
  
  return false;
  e.preventDefault();
});
View Compiled
Run Pen

External CSS

  1. https://use.fontawesome.com/releases/v5.0.13/css/all.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js
  2. https://cdn.rawgit.com/admsev/jquery-play-sound/master/jquery.playSound.js