JSFiddle - React, Tailwind, and code Playground

HTML

<div>
    <div style="font-family: Calibri;font-size: 44px;float: right;margin-right:10%;">Elevator</div>
    <div class="container">
        <div class="blockDiv">
            <div class="inactiveDiv"></div>
        </div>
        <div id="check2" class="checkbox">
        </div>
        <div class="uncheck">

        </div>
    </div>
    <div class="container">
        <div class="blockDiv">
            <div class="inactiveDiv" id="groundDiv"></div>
        </div>
        <div id="check1" class="checkbox">
            
        </div>
        <div class="uncheck">
        </div>
    </div>
</div>

<div class="checked1"></div>
<div class="checked2"></div>

CSS

.blockDiv {
    width: 60px;
    height: 60px;
    background: #0000FF;
    border: 2px solid #000;
}
.activeDiv, #groundDiv {
    width: 45px;
    height: 45px;
    background: #FFAC00;
    margin-left: 8px;
    margin-top: 8px;
    position:relative;
}
.checkbox {
    height: 42px;
    margin-left: 75px;
    padding: 0px 0 0 28px;
    background-image: url("http://www4.picturepush.com/photo/a/12675332/img/12675332.gif");
    background-repeat: no-repeat;
    background-position: 0% 0px;
    margin-top: -40px;
}

.checked2 {
    background: url('http://www2.picturepush.com/photo/a/12675320/img/12675320.gif') no-repeat;
    height:40px;
    width:40px;
    position:absolute;
    left:80px;
    top:22px;
    opacity:0;
}

.checked1 {
    background: url('http://www2.picturepush.com/photo/a/12675320/img/12675320.gif') no-repeat;
    height:40px;
    width:40px;
    position:absolute;
    left:80px;
    top:88px;
    opacity:0;
    
}

.fade{
    -webkit-animation: fade 3.5s;
    -moz-animation: fade 3.5s;
    -o-animation: fade 3.5s;
    animation: fade 3.5s;
}

@-webkit-keyframes fade{
    0%{opacity:0;}
    50%{opacity:1;}
    100%{opacity:0;}
}

@-moz-keyframes fade{
    0%{opacity:0;}
    50%{opacity:1;}
    100%{opacity:0;}
}

@-o-keyframes fade{
    0%{opacity:0;}
    50%{opacity:1;}
    100%{opacity:0;}
}

@keyframes fade{
    0%{opacity:0;}
    50%{opacity:1;}
    100%{opacity:0;}
}

JavaScript

$(document).ready(function () {
    $("#check1, .checked1").click(function () {
        $('.checked1').addClass('fade');
        $('.checked2').removeClass('fade');
        $("#groundDiv").animate({
            "top": "0px"
        }, 2000);
    });
});
$(document).ready(function () {
    $("#check2, .checked2").click(function () {
        $('.checked2').addClass('fade');
        $('.checked1').removeClass('fade');
        $("#groundDiv").animate({
            "top": "-65px"
        }, 2000);  
    });
});