JSFiddle - React, Tailwind, and code Playground

by secretgspot

HTML

<div id="container">
<div class='boxLeft'>  
</div>
<div class='boxTop'>  
</div>
<div class='boxFront'>
</div>
</div>

CSS

#container{
    margin-top: 150px;
    margin-left: 150px;
    
}

.boxLeft {
    position:absolute;
    -webkit-transform: skew(0deg, 30deg);
    -moz-transform: skew(0deg, 30deg);
    background-color: #ccc;
    height:100px;
    width:100px;
    display:block;
    z-index:4;
}

.boxTop {
    position:absolute;
    background-color: #eee;
    height:58px;
    width:90px;
    display:block;
    margin-top:-56px;
    margin-left:51px;
    -webkit-transform: skew(60deg, -30deg);
    -moz-transform: skew(60deg, -30deg);
    z-index:3;
}

.boxFront {
    position:absolute;
    background-color: #ddd;
    height:100px;
    width:90px;
    display:block;
    margin-top:4px;
    margin-left:101px;
    -webkit-transform: skew(0deg, -30deg);
    -moz-transform: skew(0deg, -30deg);
    z-index:4;
}

JavaScript

$().ready(function() {
    $('.boxLeft').hover(function() {
        $(this).animate({
            marginTop: 3,
            marginLeft: -3
        }, 200);
    }, function() {
        $(this).animate({
            marginTop: 0,
            marginLeft: 0
        }, 200);
    });
    
    $('.boxTop').click(function(){
        $(this).animate({
            marginTop:-95
        },200); 
    });
    
     $('.boxTop').hover(function() {
        $(this).animate({
            marginTop: -61,
        }, 200);
    }, function() {
        $(this).animate({
            marginTop: -56,
        }, 200);
    });
    
    $('.boxFront').hover(function() {
        $(this).animate({
            marginTop: 6,
            marginLeft: 104
        }, 200);
    }, function() {
        $(this).animate({
            marginTop: 4,
            marginLeft: 101
        }, 200);
    });
});