JSFiddle - React, Tailwind, and code Playground

by gopi1410

HTML

<div id="wrapper">
<div id="left" class="content_left"></div>
<div id="right" class="content_right"></div>
</div>

CSS

#wrapper {
    position: absolute;
    width:100%;
    overflow:hidden;
    margin-top:100px;
    margin-left: 50px;
}
#left, #right {
    position: relative;
    width: 200px;
    height: 200px;
}
#left {
    background:red;
    float: left;
}
#right {
    background:yellow;
    float: left;
}

JavaScript

$("#left, #right").each(function() {
        $(this).data("standardWidth", $(this).width());
    });

    $("#left, #right").hover(function() {
        $(this).css("z-index", 10);
        $(this).animate({
            width: "250px",
            height: "250px",
            left: "-25px",
            top: "-25px"
        }, 300 );
        
    }, function() {
        
            $(this).css("z-index", 1);
            $(this).animate({
                 width: "200px",
            height: "200px"
            }, 300 );
       
    });