JSFiddle - React, Tailwind, and code Playground

HTML

<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
<p>8</p>
<p>9</p>
<p>10</p>
vcxvcxv

CSS

p { 
    display: none; 
    font-size: 40px;
}

JavaScript

$('p:nth-child(4)').show();

$(document).keydown(function(e) {
    if (e.keyCode == 37 && !$('p:animated').length) {
        $('p:visible').prev().stop(true, true).show(500).next().stop(true, true).hide(500);
        return false;
    }
    else if (e.keyCode == 39 && !$('p:animated').length) {
        $('p:visible').next().stop(true, true).show(500).prev().stop(true, true).hide(500);
        return false;
    }
});