JSFiddle - React, Tailwind, and code Playground

by acturbo

HTML

<div id="container">
    <div id="content">eererer</div>
</div>

CSS

html, body{
    margin:0;
    padding:0;
    height: 100%;
    min-height: 100%;    
}
#container {
    position: relative;
    overflow: hidden;
    background-color: blue;
    height: 100%;
    min-height: 100%;
    margin:auto;
    top: 0;
    left:0;
}

#content {
    background-color:red;
    width: 640px;
    margin:auto;
    margin-top: 100%;
    xtop: 0;
    xleft:0;    
}

JavaScript

// slide div up from bottom
// uses css settings 
$(function(){
    $("#container").on("click", function(){
        $('#content').animate({'margin-top': '50px'}, 700,"easeInOutQuad");
    });
});