JSFiddle - React, Tailwind, and code Playground

by Alex Str

HTML

<div class="a">
<div class="text">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat adipisci non nobis repellendus unde facere quas vitae quam qui iure voluptatem repudiandae neque harum excepturi a! Quasi omnis nobis mollitia.
    </div>   
    <div class="hide">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat adipisci non nobis repellendus unde facere quas vitae quam qui iure voluptatem repudiandae neque harum excepturi a! Quasi omnis nobis mollitia.
         Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat adipisci non nobis repellendus unde facere quas vitae quam qui iure voluptatem repudiandae neque harum excepturi a! Quasi omnis nobis mollitia.
    </div>
</div>

CSS

*{
  -webkit-transition: 1s all;
    transition: 1s all;   
}
.a {
    background: yellow;
    z-index: 1;
    position: relative;
    overflow: hidden;
}
.text {
  background: green;  
}
.hide {
    display: block;
     position:absolute;
    top: -100%; 
    -webkit-transform:translate(0,-100%); 
    /* opacity: 0; */
    z-index: -2;
    background: red;
}
.hide.animate {
    position: relative;
    top: 0;
   /*  opacity: 1; */
   -webkit-transform:translate(0,0);
     -webkit-transition: opacity 1s, top 1s;
    transition: 1s all; 
}

JavaScript

$(".a").click(function(){
    $(".hide").toggleClass("animate");
});