JSFiddle - React, Tailwind, and code Playground

HTML

<div class="nav">
    <a href="#1">1</a>
    <a href="#2">2</a>
    <a href="#3">3</a>
    <a href="#4">4</a>
    <a href="#5">5</a>
</div>
<div class="main">
    <div class="inner">
        <div id="1" class="box1">1</div>
        <div id="2" class="box2">2</div>
        <div id="3" class="box3">3</div>
        <div id="4" class="box4">4</div>
        <div id="5" class="box5">5</div>
    </div>
</div>

CSS

.main {
  overflow-x: scroll;
  width: 150px;
}

.inner {
  display: flex;
  width: 500px;
}

.box1 {
  background-color: red;
  height: 100px;
  width: 100px;
}

.box2 {
  background-color: blue;
  height: 100px;
  width: 100px;
}

.box3 {
  background-color: green;
  height: 100px;
  width: 100px;
}

.box4 {
  background-color: yellow;
  height: 100px;
  width: 100px;
}

.box5 {
  background-color: purple;
  height: 100px;
  width: 100px;
}

JavaScript

$(function(){
	$('a[href^=#]').click(function(e) {
    	e.preventDefault();
    	var href= $(this).attr("href");
    	var target = $(href == "#" || href == "" ? 'html' : href);
    	var position = target.position().left;
		$('.main').animate({scrollLeft:position}, 'fast', 'swing');
		return false;
	});
});