JSFiddle - React, Tailwind, and code Playground

HTML

<section id="drawer">
          <p>Drawer</p>
      </section>


        <a href="#" id="open">open</a>
    
         <a href="#" id="close">close</a>

CSS

#drawer {
    background: red;
    height: 50px;
    position: absolute;
    bottom: 0px;
    width: 100%;
    -webkit-transition: all 0.1s;
}

#drawer.show {
    height: 200px;
}
#drawer.close {
    -webkit-animation: bounce 1s;
    -webkit-animation-iteration-count: 1;
}

@-webkit-keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        -webkit-transform: translateX(0);
    }
    40% {
        -webkit-transform: translateX(-30px);
    }
    60% {
        -webkit-transform: translateX(-15px);
    }
}

JavaScript

$('#open').bind( "click", function() {
 $('#drawer').addClass('show').removeClass('close');
});

$('#close').bind( "click", function() {
 $('#drawer').removeClass('show').addClass('close');
});