JSFiddle - React, Tailwind, and code Playground

HTML

<div id='container'>
  <div id='scrollbox'>
  
  </div>
  <div id='display'>
  
  </div>
</div>

CSS

#container{
  border:1px solid blue;
  height:200px;
  width:200px;
  
}
#scrollbox{
  height:43px;
  overflow-x:scroll;
  overflow-y:hidden;
  white-space:nowrap;
}
.numberbox{
  display: inline-block;
  background-color: white;
  padding: 2px 2px 2px 2px;
  width:20px;
  border-right:1px solid green;
}

JavaScript

for(var i=1; i<21; i++){
var numberbox = "<div class='numberbox numberbox"+i+"'>"+i+"</div>";
$('#scrollbox').append(numberbox);
}

$('.numberbox').on('click', function(){
	$('.numberbox').css('background-color', 'white');
	$(this).css('background-color', 'yellow');
  $('#scrollbox').animate({
  	scrollLeft: $('.numberbox4').offset().left}, 200);
});