JSFiddle - React, Tailwind, and code Playground

HTML

<div></div>
<br>
<br>
<br>
<br>
<br>
<br>
<button>Click me</button>

CSS

* {
    margin:0;
}
div::before {
    content:'';
    position: fixed;
    left:0;
    right:0;
    height:100px;
    background:skyblue;
    transition: all 500ms ease-in-out;
    top:0;
}
div.active::before {
    top: calc( 100% - 100px );
}

JavaScript

$('button').click(function(){
    $('div').addClass('active');
});