JSFiddle - React, Tailwind, and code Playground

by fresheyeball

HTML

<div id="div1"></div>
<div id="div2"><div id="div3"></div></div>
<div id="div4"></div>

CSS

#div1 {
    width: 100%;
    height: 50px;
    background: red;
}

#div2 {
    width: 100%;
    height: 50px;
}

#div3 {
    width: 100%;
    height: 50px;
    background: blue;  
    position: relative;
}

#div4 {
    width: 100%;
    height: 50px;
    background: green;
}

JavaScript

$(function() {
    $('#div3')
    .css({
        top : ($('#div3').height() * -1) - $('#div3').offset().top
    }).animate(
        {top : 0}, 500, function() {}
    );
});