JSFiddle - React, Tailwind, and code Playground

HTML

<div id="toggle">
    <a class="bot" href="#">Push me</a>
    <a class="top" href="#transfert">Push me</a>
</div>

<div class="box">
    <h1>Hello</h1>
</div>

CSS

body {margin:10px;}

#toggle {height:30px;position:relative;z-index:2;}
    #toggle a { position: absolute;}
    
.box {
    background:#EEE;
    width:250px;
    min-height:240px;
    padding:10px 4px;
    opacity:0;
    
    -moz-transform:scale(0) skew(50deg);
    -webkit-transform:scale(0) skew(50deg);
    -o-transform:scale(0) skew(50deg);
    -khtml-transform:scale(0) skew(50deg);
    transform:scale(0) skew(50deg);
    
    -webkit-transform-origin:0px -30px;
    -moz-transform-origin:0px -30px;
    -o-transform-origin:0px -30px;
    -khtml-transform-origin:0px -30px;
    transform-origin:0px -30px;
    
    -webkit-transition:-webkit-transform ease-out .35s, opacity ease-out .4s;
    -moz-transition:-moz-transform ease-out .35s, opacity ease-out .4s;
    -o-transition:-o-transform ease-out .35s, opacity ease-out .4s;
    -khtml-transition:-khtml-transform ease-out .35s, opacity ease-out .4s;
    transition:transform ease-out .35s, opacity ease-out .4s;
}


#transfert:target .box {
    opacity:1;

    -moz-transform:scale(1) skew(0deg);
    -webkit-transform:scale(1) skew(0deg);
    -o-transform:scale(1) skew(0deg);
    -khtml-transform:scale(1) skew(0deg);
    transform:scale(1) skew(0deg);
}

#transfert:target .top { opacity:0;pointer-events: none;}