JSFiddle - React, Tailwind, and code Playground

HTML

<input type="text" value="" id="inputFilter">
<div id="page">
    <div id="temp"> </div>
    <table id="name">
        <tr>
            <td>mango</td>
        </tr>
        <tr>
            <td>mangoose</td>
        </tr>
        <tr>
            <td>heyman</td>
        </tr>
        <tr>
            <td>mantis</td>
        </tr>
        <tr>
            <td>woodland</td>
        </tr>
        <tr>
            <td>quickheart</td>
        </tr>
        <tr>
            <td>quickcheep</td>
        </tr>
        <tr>
            <td>totalquick</td>
        </tr>
        <tr>
            <td>manquick</td>
        </tr>
    </table>
</div>
<br />
<br />
<p id="prev">PREVIOUS</p>
<p id="next">NEXT</p>

CSS

#page
{
    height: 100px;
    width: auto;
    overflow: hidden
}

JavaScript

$('#next').click(function() {
        $('#name').animate({
            marginTop: '-=100px'
        },
        500);
    });
    $('#prev').click(function() {
        $('#name').animate({
            marginTop: '+=100px'
        },
        500);
    });
    $('#inputFilter').keyup(function() {
        var that = this;
        $.each($('tr'),
        function(i, val) {
            if ($(val).text().indexOf($(that).val()) == -1) {
                $('#name').animate({
                    marginTop: 0
                },
                50,
                function() {
                    $('tr').eq(i).hide();
                });
            } else {
                $('#name').animate({
                    marginTop: 0
                },
                50,
                function() {
                    $('tr').eq(i).show();
                });
            }
        });
    });