JSFiddle - React, Tailwind, and code Playground

by azizpunjani

HTML

<div id="outer"> 
    <p>Some outer content </p>
   <div id="inner">Slider Content </div> 
</div>

CSS

#outer{
   height: 200px; 
   width: 200px; 
   background-color: brown; 
   overflow: hidden; 
   position: relative;     
}
#inner{ 
    height: 200px;
    width: 100%;     
    background-color: green;
    position: absolute; 
    top: 100%; 
}

JavaScript

$('#outer').hover(
    function(){
       $('#inner').animate({ top: '0%' }, 'easein' );  
    }, 
    function(){
       $('#inner').animate({ top: '100%' }, 'easein' );  
    }              
);