JSFiddle - React, Tailwind, and code Playground

by Christophe

HTML

<html>
    <head>
        
    </head>
    
    <body>
        
        <h1>Hello World!</h1>
        <div id="formWrapper" style="height:180;width:530;">
            
            <div id="wrapper"  style="position:relative;bottom:20px;width:460px;left:40px;height:160px;background-color:green;overflow:auto;">
            
            <div id="hello1" style="position:absolute;left:0px;height:64px;bottom:0px;width:48px; background-color:black;color:white;" onmouseover="resize(this);" onmouseout="shrink(this);"></div>
            <div id="hello2" style="position:absolute;left:49px;bottom:0px;height:64px;width:48px; background-color:maroon;color:white;" onmouseover="resize(this);" onmouseout="shrink(this)"></div>                  
            <div id="hello3" style="position:absolute;left:98px;bottom:0px;height:64px;width:48px; background-color:brown;color:white;" onmouseover="resize(this);" onmouseout="shrink(this)"></div>
            <div id="hello4" style="position:absolute;left:147px;bottom:0px;height:64px;width:48px; background-color:white;color:white;" onmouseover="resize(this);" onmouseout="shrink(this)"></div>
            
        </div>
            
        </div>
            
            <div id="testvalue" style="position:absolute;top:390px;background-color:yellow;height:100px;width:400px;">
            
        </div>
            
        </body>
        </html>

JavaScript

function resize(obj) {
    shift(parseInt(obj.id[obj.id.length - 1]));
    $("#" + obj.id).height("100px").width("100px");
}

function shift(id) {
    for (var i = id + 1; i <= 4; i++) {
        $("#hello" + i).stop().animate({
            "left": "+=60px"
        }, 1000);
    }
}

function shrink(obj) {
    $("#" + obj.id).height("64px").width("48px");
    reshrink(parseInt(obj.id[obj.id.length - 1]));

}

function reshrink(id) {
    $('#testvalue').html($('#testvalue').html()+$("#hello2").css('left'));

    for (var i = id + 1; i <= 4; i++) {
        $("#hello" + i).stop().animate({
            "left": "-=60px"
        }, 1000);
    }

    $('#testvalue').html($('#testvalue').html()+$("#hello2").css('left'));
}