JSFiddle - React, Tailwind, and code Playground

HTML

<h1>Previous content</h1>
<p>This is content before the animation.</p>

<div class="container">
    <div class="scroll">
        <h1>Hover anywhere to scroll up</h1>
        <p>We have some content here.</p>
        <p>But no one can be quite sure just how large this content is.</p>
    </div>
</div>

<h1>Later content</h1>
<p>This is content after the animation.</p>

CSS

.container {
    overflow: hidden;
    position: relative;
}

.scroll {
    transition: .5s linear all;
}

body:hover .scroll {
    margin-top: -100%;   
}