JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://demos.flesler.com/jquery/scrollTo/js/jquery.scrollTo-min.js"></script>
<div id="target-examples" class="section part">
    <div id="pane-target" class="pane">
        <ul class="elements" style="height:1011px; width:1820px;">
            <li><p>0</p><a href="#">link</a></li><li><p>1</p><a href="#">link</a></li><li><p>2</p><a href="#">link</a></li><li><p>3</p><a href="#">link</a></li><li><p>4</p><a href="#">link</a></li><li><p>5</p><a href="#">link</a></li><li><p>6</p><a href="#">link</a></li><li><p>7</p><a href="#">link</a></li><li><p>8</p><a href="#">link</a></li><li><p>9</p><a href="#">link</a></li><li><p>10</p><a href="#">link</a></li><li><p>11</p><a href="#">link</a></li><li><p>12</p><a href="#">link</a></li><li><p>13</p><a href="#">link</a></li><li><p>14</p><a href="#">link</a></li><li><p>15</p><a href="#">link</a></li><li><p>16</p><a href="#">link</a></li><li><p>17</p><a href="#">link</a></li><li><p>18</p><a href="#">link</a></li><li><p>19</p><a href="#">link</a></li><li><p>20</p><a href="#">link</a></li><li><p>21</p><a href="#">link</a></li><li><p>22</p><a href="#">link</a></li><li><p>23</p><a href="#">link</a></li><li><p>24</p><a href="#">link</a></li><li><p>25</p><a href="#">link</a></li><li><p>26</p><a href="#">link</a></li><li><p>27</p><a href="#">link</a></li><li><p>28</p><a href="#">link</a></li><li><p>29</p><a href="#">link</a></li>
        </ul>
    </div>
</div>


ScrollTo:
<a href="#2" class="scrollTo">2</a> |
<a href="#8" class="scrollTo">8</a> |
<a href="#16" class="scrollTo">16</a> |
<a href="#18" class="scrollTo">18</a> |
<a href="#28" class="scrollTo">28</a>

CSS

div.section{
    border:1px black solid;
    width:550px;
    padding:10px;
    margin: 5px 0;
    position:relative;
    clear:both;
}
div.section h3{
    margin-bottom:10px;
}
div.section li{
    float:left;
}
div.pane{
    overflow:auto;
    clear:left;
    margin: 10px 0 0 10px;
    position:relative;
    width:550px;
    height:340px;
}

ul.elements{
    background-color:#5B739C;
}
ul.elements li{
    width:200px;
    height:100px;
    font-weight:bolder;
    border:1px black solid;
    text-align:center;
    padding:50px;
    position:relative;
    background-color:#DDD;
}
ul.elements li a{
    bottom:20px;
    color:#933;
    font-size:12px;
    left:125px;
    position:absolute;
}
ul.elements li p{
    color:#666;
}
#pane-options ul.elements li{
    margin:5px;
}
#pane-options{
    margin-bottom:10px;
}
ul.links{
    height:20px;
}
ul.links a{
    color:#69C;
    margin:0 auto;
}

JavaScript

$(document).ready(function() {
    $('.scrollTo').click(function() {
        var tar = ($(this).is('.back')) ?
            0 : 'li:eq(' + $(this).attr('href').slice(1) + ')';
        $('#pane-target').scrollTo(tar, 800, {queue: true});
        return false;
    })

    // When a link gets focus, reposition the view
    $('#pane-target li a').bind('focusin', function() {
        $('#pane-target').scrollTo( $(this).closest('li'), 800, {queue: true} );
    })
})