JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">

    <div id="player">
        <p>Test</p>
        <a href="#" title="#" id="player-close">Close</a>
    </div><!-- end #player --

</div><!-- end #container -->

CSS

#container {
    width:100%;
    height:200px;
    background:#EEE;
}
#player {
    position:fixed;
    bottom:-55px;
    z-index:9999;
    width:100%;
    background:#000;
    color:#FFF;
}
#player a {
    position:absolute;
    right:5px;
    top:-20px;
    color:#000;
}

JavaScript

$(document).ready(function(){

        $('#player').animate({
            bottom: '0'
        }, 1000);

        $('a#player-close').click(function() {
            $('#player').animate({
                bottom: '-55px'
            });
            return false;
        });

    });