JSFiddle - React, Tailwind, and code Playground

HTML

<div class="viewport">
        <div class="container">
            <a class="scroll hovered" href="#">Hover Now</a>
            <a class="scroll nhover" href="#">Not Hover</a>
        </div>
    </div>
    <div class="viewport">
        <div class="container">
            <a class="scroll hovered" href="#">Hover Now</a>
            <a class="scroll nhover" href="#">Not Hover</a>
        </div>
    </div>
    <div class="viewport">
        <div class="container">
            <a class="scroll hovered" href="#">Hover Now</a>
            <a class="scroll nhover" href="#">Not Hover</a>
        </div>
    </div>

CSS

.viewport
        {
            border-color:Gray;
            border-style:dashed;
            border-width:1px;
            height:22px;
            width:100px;
            margin:0 auto;
            overflow:hidden;
            position:relative;
        }
        .container
        {
            position:absolute;
            top:-22px;
        }
        a.scroll
        {   
            text-decoration:none;
            color:Black;
            font-size:large;
            
            display:block;
            width:100px;
            height:22px;
        }

JavaScript

$(".container").hover(function () {
                $(this).stop(true,true).animate({
                    top: '+=22'
                }, 800, 'easeInOutBack');
            }, function () {
                $(this).stop(true,true).animate({
                    top: '-=22'
                }, 800, 'easeInOutBack');
            });