JSFiddle - React, Tailwind, and code Playground

HTML

<a href=''>Click me to scroll!!</a>

<div id='container'>
    
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div id="target">Target</div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>

</div>

CSS

#container {
    height:74px;
    width: auto;
    background: none;
    border: none;
    white-space: nowrap;
}

div {
    width: 50px;
    height: 50px;
    border: 2px dashed red;
    background: orange;
    margin: 10px;
    float: left;
}

#target {
    background: yellow;
    color: red;
}

/* This is just to make the iframe below produce the correct result */

iframe {
    padding: 0;
    margin: 0;
}

JavaScript

//Get the left offset of the target that you want, and animate the scrollLeft position.

$('a').click(function() {
    $('html,body').animate({scrollLeft: $('#target').offset().left }, 1000);
    return false;
});