JSFiddle - React, Tailwind, and code Playground

HTML

<div id="content">
        <div id="block-home" class="content-inner">
            <h2>Content</h2>
            <p><a href="#about">Move Me</a></p>
        </div>    
    </div>

CSS

* { margin:0; padding:0; }

        body { font-family:Helvetica;}
    
        #content {
            height:200px;
            width:200px;
            
            position:absolute;
            left:0;
            top:0;
            margin: 50px;
            overflow:visible;
            padding:0; 
            
            /* - -Animation settings to be used -- */
            -webkit-animation-duration: 1s;
            -webkit-animation-timing-function: ease-in-out;
            -webkit-animation-iteration-count: 1;
        }
    
        .content-inner {
            position:absolute;
            padding:50px;
            overflow:hidden;
            background: -moz-linear-gradient(100% 100% 9deg, #f90, #f30);
            background: -webkit-gradient(linear, left top, left bottom, from(#999), to(#333));
            border-radius:15px;                
        }

        .content-inner a {
            color:#fff;
            text-decoration:none;
        }
        
        /* -- Animation stuff -- */
        #content.home-in { -webkit-animation-name: fadeIn;}
        #content.home-in-final { top: 0px; opacity: 1;}
        #content.home-out { -webkit-animation-name: fadeOut;}
        #content.home-out-final { top: 100px; opacity: .5;}
    
        @-webkit-keyframes fadeIn {
            0%      { opacity: .5; -webkit-transform: translateY(100px); }
            100% { opacity: 1; -webkit-transform: translateY(0%)); }
        }
        
        @-webkit-keyframes fadeOut {
            0%      { opacity: 1; -webkit-transform: translateY(0%); }
            100% { opacity: .5; -webkit-transform: translateY(100px) }
        }

JavaScript

$(document).ready(function()
        {
            
            $('a').bind('click', function(e)
            {
                e.preventDefault();
                this.blur();
                var position = $('#content').position();                
                if(position.top == 0)
                {
                    $('#content').attr('class', '').addClass('home-out');
                }
                else
                {
                    $('#content').attr('class', '').addClass('home-in');
                }
            });
            
            // Set final style
            $("#content").bind("webkitAnimationEnd", function()
            {
                if($("#content").hasClass('home-in')) $("#content").addClass('home-in-final');
                if($("#content").hasClass('home-out')) $("#content").addClass('home-out-final');
            });
        });