JSFiddle - React, Tailwind, and code Playground

by Alex Yu

HTML

<div class="keyboard">
    <div class="wKey">
        <div class="bKey">
            <div class="bGrad"></div>
        </div>
    </div>
    <div class="wKey">
        <div class="bKey">
            <div class="bGrad"></div>
        </div>
    </div>
    <div class="wKey"></div>
    <div class="wKey">
        <div class="bKey">
            <div class="bGrad"></div>
        </div>
    </div>
    <div class="wKey">
        <div class="bKey">
            <div class="bGrad"></div>
        </div>
    </div>
    <div class="wKey">
        <div class="bKey">
            <div class="bGrad"></div>
        </div>
    </div>
    <div class="wKey"></div>
    <div class="wKey">
        <div class="bKey">
            <div class="bGrad"></div>
        </div>
    </div>
    <div class="wKey">
        <div class="bKey">
            <div class="bGrad"></div>
        </div>
    </div>
    <div class="wKey"></div>
</div>

CSS

body{
    background: white;
}

.keyboard{
    line-height:0px;
    font-size:0px;
    -moz-user-select: none; 
    -khtml-user-select: none; 
    -webkit-user-select: none; 
    -o-user-select: none; 
}
.wKey{
    display:inline-block;
    width:80px;
    height:450px;
    background-color: white;
    border-bottom-right-radius: 6px;
    border-bottom-left-radius: 6px;
    border: 1px solid lightgrey;    
}
.wKeyDep{
    background: -moz-linear-gradient(-88deg, rgba(255,255,255,0) 72%, rgba(255,255,255,0.36) 82%, rgba(206,206,206,1) 100%),-moz-linear-gradient(88deg,  rgba(206,206,206,1) 0%, rgba(255,255,255,0.36) 18%, rgba(255,255,255,0) 28%); /* FF3.6+ */
    background: -webkit-linear-gradient(-2deg, rgba(255,255,255,0) 72%,rgba(255,255,255,0.36) 82%,rgba(206,206,206,1) 100%), -webkit-linear-gradient(88deg,  rgba(206,206,206,1) 0%,rgba(255,255,255,0.36) 18%,rgba(255,255,255,0) 28%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(-88deg, rgba(255,255,255,0) 72%,rgba(255,255,255,0.36) 82%,rgba(206,206,206,1) 100%), -o-linear-gradient(88deg,  rgba(206,206,206,1) 0%,rgba(255,255,255,0.36) 18%,rgba(255,255,255,0) 28%); /* Opera 11.10+ */
    background: -ms-linear-gradient(-2deg, rgba(255,255,255,0) 72%,rgba(255,255,255,0.36) 82%,rgba(206,206,206,1) 100%), -ms-linear-gradient(2deg,  rgba(206,206,206,1) 0%,rgba(255,255,255,0.36) 18%,rgba(255,255,255,0) 28%); /* IE10+ */
    background: linear-gradient(92deg, rgba(255,255,255,0) 72%,rgba(255,255,255,0.36) 82%,rgba(206,206,206,1) 100%), linear-gradient(88deg,  rgba(206,206,206,1) 0%,rgba(255,255,255,0.36) 18%,rgba(255,255,255,0) 28%); /* W3C */
}
.bKey{
    background-color: black;
    display:inline-block;
    width:46px;
    height:280px;
    margin-left:57px;
    vertical-align:top;
    z-index:2;
    position:absolute;
    border-bottom-right-radius: 8px;
    border-bottom-left-radius: 8px;
}
.bGrad{
    background: #45484d; /* Old browsers */
    background: -moz-linear-gradient(top,  #45484d 0%,...

JavaScript

$('.bKey').on('mousedown', function(e){
    $(this).children().addClass('bGradDep');
});
$('.bKey').on('mouseup mouseout', function(e){
    $(this).children().removeClass('bGradDep');
});

$('.wKey').on('mousedown', function(e){
    if(e.target !== this) return;
    $(this).addClass('wKeyDep');
});
$('.wKey').on('mouseup mouseout', function(e){
    if(e.target !== this) return;
    $(this).removeClass('wKeyDep');
});