JSFiddle - React, Tailwind, and code Playground

by Tech Savant

HTML

<div class="slidebox">
   Hi I am a slidebox. 
    
</div>

<button id="slideTriggerUp">Slide Up</button>

CSS

.slidebox {
 height: 120px;
    width: 60px;
    
    margin-top: 100px;
    margin-right: 100px;
    border: solid 1px #f00;
}

body, html {
    height: 100%;
    width: 100%;
    overflow: hidden;
}

JavaScript

(function($){

    $(function(){  //document.ready
        $("#slideTriggerUp").on('click', function() {
            
       $(".slidebox").animate({"margin-top" : '20000px'}, 5000)
        });
        
       
    });
    
})(jQuery);