JSFiddle - React, Tailwind, and code Playground

HTML

<div id="htmLayer1">
 

</div><!-- end of htmLayer1 div-->

CSS

div {
    margin: 4px;
    min-height: 20px;
    position: relative;
}
#htmLayer1 {
     position: absolute;
     padding: 0;
     margin: 0;
     width: 70px;
     height: 45px;
     font-size: 14pt;
    border:2px solid #000;
}
#htmLayer1tab {
    position: absolute;
    top: 180px;
    left: 5px;
    padding: 0;
    margin: 0;
    width: 160px;
    height: 32px;
    z-index: 1;
    background-repeat: no-repeat;
}
#htmLayer1pic {
    background-image: url("http://www.cchnet.dk/Blog/80748B83-16C8-4BA0-BAD1-647098A78E5A_files/PHO_BK_pt1_720x540a.jpg");
    position: absolute;
    top: 284px;
    padding: 0;
    margin: 0;
    width: 700px;
    height: 400px;
    z-index: 8;
}

JavaScript

$("#htmLayer1tab").toggle(function() {
        $("#htmLayer1").animate({top: "0px"}, 300, "swing");

}, function() {
    for
        
        $("#htmLayer1").animate({top: "200px"}, 300, "swing");
        
    }
);