JSFiddle - React, Tailwind, and code Playground

by exe1

HTML

<div class="keyboard"> 
    <div class="key">Z</div>
    <div class="key2">A</div>
</div>

CSS

:root {
    var-linear-gradient-keyboard: -webkit-linear-gradient(top,  rgba(100,100,100,1) 0%,rgba(80,80,80,80) 100%);
}

.keyboard{
    position:absolute;
    width:50%;
    height:100%;
    background: var(linear-gradient-keyboard); /* Chrome10+,Safari5.1+ */
    text-align:center;
    font-size:36px;
    font-weight:600;
    -webkit-user-select: none;
}
.key{
    border-radius:4px;
    margin:10px;
    width:50px;
    height:50px;
    background: -webkit-linear-gradient(top,  rgba(250,250,250,1) 0%,rgba(160,160,160,1) 100%); /* Chrome10+,Safari5.1+ */
    text-align:center;
    font-size:36px;
    font-weight:bold;
    box-shadow:0 2px 4px #111;
    font-family:arial;
    text-shadow:inset 0 0 1px #555;
}
.key2{
    border-radius:4px;
    margin:10px;
    width:50px;
    height:50px;
    background: -webkit-linear-gradient(top,  rgba(100,100,100,1) 0%,rgba(60,60,60,1) 100%); /* Chrome10+,Safari5.1+ */
    text-align:center;
    color:white;
    font-size:36px;
    font-weight:bold;
    box-shadow:0 2px 4px #111;
    font-family:arial;
    text-shadow:0 0 1px #000;
}
.key_focus{
    box-shadow:inset 0 2px 4px #111;
}

JavaScript

$( ".key,.key2" ).mousedown(function() {
  $(this).addClass("key_focus");
});
$( ".key,.key2" ).mouseup(function() {
  $(this).removeClass("key_focus");
});