<div class="switcher">
  <h1>Themes</h1>
  <p>Click on the buttons to change the theme</p>
</div>

<div class="follow">
  <a href="https://twitter.com/andrejsharapov" title="follow me in twitter" target="_blank" rel="noopener norefferer">Follow me</a>  
</div>

<div class="base">
  <div class="key">~</div>
  <div class="key">1</div>
  <div class="key">2</div>
  <div class="key">3</div>
  <div class="key">4</div>
  <div class="key">5</div>
  <div class="key">6</div>
  <div class="key">7</div>
  <div class="key">8</div>
  <div class="key">9</div>
  <div class="key">0</div>
  <div class="key">-</div>
  <div class="key">+</div>
  <div class="key delete">Delete</div>
  <div class="key tab">Tab</div>
  <div class="key">Q</div>
  <div class="key col" id="w" tabindex="1">W</div>
  <div class="key">E</div>
  <div class="key">R</div>
  <div class="key">T</div>
  <div class="key">Y</div>
  <div class="key">U</div>
  <div class="key">I</div>
  <div class="key">O</div>
  <div class="key">P</div>
  <div class="key">[</div>
  <div class="key">]</div>
  <div class="key backslash">\</div>
  <div class="key capslock">CapsLock</div>
  <div class="key col" id="a" tabindex="2">A</div>
  <div class="key col" id="s" tabindex="3">S</div>
  <div class="key col" id="d" tabindex="4">D</div>
  <div class="key">F</div>
  <div class="key">G</div>
  <div class="key">H</div>
  <div class="key">J</div>
  <div class="key">K</div>
  <div class="key">L</div>
  <div class="key">;</div>
  <div class="key">'</div>
  <div class="key return">Enter</div>
  <div class="key leftshift">Shift</div>
  <div class="key">Z</div>
  <div class="key">X</div>
  <div class="key">C</div>
  <div class="key">V</div>
  <div class="key">B</div>
  <div class="key">N</div>
  <div class="key">M</div>
  <div class="key">,</div>
  <div class="key">.</div>
  <div class="key">/</div>
  <div class="key rightshift">Shift</div>
  <div class="key leftctrl">Ctrl</div>
  <div class="key command">
    <svg width="24" viewBox="0 0 480 480">
      <path d="M0.176,224L0.001,67.963l192-26.072V224H0.176z M224.001,37.241L479.937,0v224H224.001V37.241z M479.999,256l-0.062,224
		l-255.936-36.008V256H479.999z M192.001,439.918L0.157,413.621L0.147,256h191.854V439.918z"/>
    </svg>    
  </div>
  <div class="key fn">Fn</div>
  <div class="key">Alt</div>
  <div class="key space col" tabindex="5">Space</div>
  <div class="key gr col" tabindex="6">Alt Gr</div>
  <div class="key command">
    <svg viewBox="0 0 470.586 470.586" width="20">
      <path d="M327.081,0H90.234C74.331,0,61.381,12.959,61.381,28.859v412.863c0,15.924,12.95,28.863,28.853,28.863H380.35
		c15.917,0,28.855-12.939,28.855-28.863V89.234L327.081,0z M333.891,43.184l35.996,39.121h-35.996V43.184z M384.972,441.723
		c0,2.542-2.081,4.629-4.635,4.629H90.234c-2.55,0-4.619-2.087-4.619-4.629V28.859c0-2.548,2.069-4.613,4.619-4.613h219.411v70.181
		c0,6.682,5.443,12.099,12.129,12.099h63.198V441.723z M128.364,128.89H334.15c5.013,0,9.079,4.066,9.079,9.079
		c0,5.013-4.066,9.079-9.079,9.079H128.364c-5.012,0-9.079-4.066-9.079-9.079C119.285,132.957,123.352,128.89,128.364,128.89z
		 M343.229,198.98c0,5.012-4.066,9.079-9.079,9.079H128.364c-5.012,0-9.079-4.066-9.079-9.079s4.067-9.079,9.079-9.079H334.15
		C339.163,189.901,343.229,193.968,343.229,198.98z M343.229,257.993c0,5.013-4.066,9.079-9.079,9.079H128.364
		c-5.012,0-9.079-4.066-9.079-9.079s4.067-9.079,9.079-9.079H334.15C339.163,248.914,343.229,252.98,343.229,257.993z
		 M343.229,318.011c0,5.013-4.066,9.079-9.079,9.079H128.364c-5.012,0-9.079-4.066-9.079-9.079s4.067-9.079,9.079-9.079H334.15
		C339.163,308.932,343.229,312.998,343.229,318.011z"/>
    </svg>    
  </div>
  <div class="key ctrl-r">Ctrl</div>
  <div class="stand"></div>
</div>
*,
::before,
::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  margin: 0;
  display: flex;
  min-height: 100vh;
  justify-content: center;
  align-items: center;
  font-family: "Arial", Helvetica, sans-serif;
  background-color: #000;

  transition: all 500ms linear;

  &.one {
    background-color: #000;

    .switcher {
      color: white;
    }

    .base {
      background-color: #202020;
    }

    .key {
      border-color: #666 #333 black #333;
      background-color: #202020;
    }

    .col {
      color: #ff0000;
      border-color: #ff0000;
    }
  }

  &.two {
    background-color: #fff;

    .switcher {
      color: black;
    }

    .base {
      background-color: #282828;
    }

    .key {
      border-color: #777 #555 #555 #555;
      background-color: #3a3a3a;
    }

    .col {
      color: #990000;
      border-color: #990000;
    }
  }

  &.three {
    background-color: #fff;

    .switcher {
      color: black;
    }

    .base {
      background-color: #c5c5c5;
    }

    .key {
      color: black;
      border-color: #999 #777 #666 #777;
      background-color: #f3f3f3;
    }

    .col {
      color: #900000;
      border-color: #900000;
    }
      
    .green {
      color: #009900 !important;
      border-color: #009900 !important;
      
      svg {
        fill: #009900;
      }
    }

    svg {
      fill: black;
    }
  }
}

.base {
  position: relative;
  transform: scale(.7);
  padding: 20px;
  display: grid;
  grid-template-columns: repeat(30, 30px);
  grid-template-rows: repeat(5, 60px);
  grid-gap: 5px;
  border-bottom: 3px solid #777;
  border-radius: 10px;
  background-color: #202020;
  
  @media (max-width: 768px) {
    transform: scale(.5);
  }
  @media (max-width: 540px) {
    transform: scale(.3);
  }

  .stand {
    position: absolute;
    z-index: -1;
    top: calc(100% + 1px);
    left: 50%;
    transform: translateX(-50%);
    width: 70%;
    height: 2px;
    border-bottom: 4px solid #777;
    border-radius: 0 0 100% 100%;
    background-color: inherit;
    transition: all 200ms ease;

    &.open {
      height: 180px;
    }
  }
}

.key {
  padding-top: 17px;
  grid-column: span 2;
  text-align: center;
  font-size: 20px;
  color: white;
  cursor: pointer;
  border: {
    color: #666 #333 black #333;
    style: solid;
    width: 1px 2px 4px 2px;
    radius: 5px;
  }
  background-color: #202020;

  &:active,
  &.active {
    transform: translateY(2px) scale(0.98);
    border-bottom-width: 2px;
  }
  
  &:focus {
    outline: none;
  }

  svg {
    fill: white;
  }

  &.col {
    color: red;
    border-color: red;
  }
  
  &.red {
    color: red !important;
    border-color: red !important;
    
    svg {
      fill: #ff0000;
    }
  }
  
  &.green {
    color: #00ff00 !important;
    border-color: #00ff00 !important;
    
    svg {
      fill: #00ff00;
    }
  }

  &.delete {
    grid-column: span 4;
  }

  &.tab {
    grid-column: span 3;
  }

  &.backslash {
    grid-column: span 3;
  }

  &.capslock {
    grid-column: span 4;
  }

  &.return {
    grid-column: span 4;
  }

  &.leftshift {
    grid-column: span 5;
  }

  &.rightshift {
    grid-column: span 5;
  }

  &.leftctrl {
    grid-column: span 3;
  }

  &.command {
    grid-column: span 2;
  }

  &.ctrl-r {
    grid-column: span 3;
  }

  &.gr {
    grid-column: span 3;
  }

  &.space {
    grid-column: span 13;
  }
}

.switcher {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  text-transform: uppercase;
  color: white;
}

.follow {
  position: absolute;
  bottom: 10px;
  
  a {
    text-decoration: none;
    text-transform: uppercase;
    font-size: 13px;
    color: #555;
  }
}
View Compiled
$(window).keydown(function(evt) {
  if (evt.which == 18) {
    $(".key").toggleClass("red");
    $(".gr").toggleClass("active");
  }
  if (evt.which == 65) {
    $("body")
      .removeClass("two three")
      .addClass("one");
    $("#s").removeClass("active");
    $("#d").removeClass("active");
    $("#a").toggleClass("active");
  }
  if (evt.which == 83) {
    $("body")
      .removeClass("one three")
      .addClass("two");
    $("#a").removeClass("active");
    $("#d").removeClass("active");
    $("#s").toggleClass("active");
  }
  if (evt.which == 68) {
    $("body")
      .removeClass("one two")
      .addClass("three");
    $("#a").removeClass("active");
    $("#s").removeClass("active");
    $("#d").toggleClass("active");
  }
  if (evt.which == 32) {
    $(".space").toggleClass("active");
    $(".stand").toggleClass("open");
  }
});

$(".space").click(function() {
  $(".stand").toggleClass("open");
});

$("#a").click(function() {
  $("body").removeClass("two three");
  $("body").addClass("one");
});

$("#s").click(function() {
  $("body").removeClass("one three");
  $("body").addClass("two");
});

$("#d").click(function() {
  $("body").removeClass("one two");
  $("body").addClass("three");
});

$(".gr").click(function() {
  $(".key").toggleClass("red");
});

const w = $("#w"),
  f = $(".fn"),
  k = $(".key");

$(window).keydown(function(evt) {
  if (evt.which == 87) {
    w.toggleClass("green active");
    f.toggleClass("green");
  } else {
    w.removeClass("green active");
  }
});

if (w.click(function() {
  w.toggleClass("green");
  f.toggleClass("green");
}))

f.click(function() {
  f.toggleClass("active");
  testStatus();
});

function testStatus() {
  if (w.hasClass("green") & f.hasClass("active green")) {
    k.toggleClass("green");
  } else {
    k.toggleClass("green");
  }
}

// $('.fn').click(function() {
//   $('.key').toggleClass('green');
// });
View Compiled
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js