JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://www.jstween.org/js/build.20110816113155.jstween.js"></script>
<body>
         <div id="plus">+</div> 
         <div id="chromebottom" data-animation="false"></div>
    <body>

CSS

#chromebottom {
background-color: rgb(230, 230, 230);
border: 1px solid rgb(230, 230, 230);
height: 35px;
left: 0px;
width: 100%;
position: absolute;
bottom: 0px;
z-index:1;
background:#cccccc;
}
#plus
{
position: absolute;
left: 20px;
bottom: 50px;
width: 25px;
height: 25px;
background-color:#F00;
color: #FFF;
margin:2px;
padding:2px;
display:block;
z-index: 3;
}
enter code here
#plus:hover{
background-color:#600;
cursor: pointer;
}

JavaScript

$("#plus").click(function() {
    cb = $("#chromebottom");
    if (cb.attr("data-animation") == "false") {
        cb.attr("data-animation", "true");
        $("#chromebottom").tween({
            height: {
                start: 0,
                stop: 400,
                time: 0,
                units: 'px',
                duration: 1,
                effect: 'quartOut',
                onStop: function() {
                    cb.attr("data-animation", "false");
                }
            }

        });
        $.play();
    }

});