JSFiddle - React, Tailwind, and code Playground

CSS

#blocks{
    padding:0px;
    width:25%;
    position:absolute;
    height:150%;

}
#container{
width:100%; 
height:250px; 
position:relative; 
overflow:auto;
    margin-top:50%;
    background:#2a2a2a;
}

JavaScript

var container = '<div id="container" style=""></div>';
document.body.insertAdjacentHTML('beforeend',container);

var j = 0;
var colors = ['rgba(143, 146, 199, 0.49)','rgba(199, 143, 186, 0.49)','rgba(149, 199, 143, 0.49)','rgba(229, 86, 61, 0.49)','rgba(212, 229, 61, 0.49)','rgba(206, 61, 229, 0.49)','rgba(229, 157, 61, 0.49)','rgba(61, 165, 229, 0.49)','rgba(61, 229, 133, 0.49)','rgba(229, 61, 61, 0.49)','rgba(116, 61, 229, 0.49','rgba(218, 229, 61, 0.49)','rgba(21, 43, 157, 0.49)','rgba(153, 157, 21, 0.49)','rgba(199, 143, 186, 0.49)','rgba(149, 199, 143, 0.49)','rgba(229, 86, 61, 0.49)','rgba(212, 229, 61, 0.49)','rgba(206, 61, 229, 0.49)','rgba(229, 157, 61, 0.49)','rgba(61, 165, 229, 0.49)','rgba(61, 229, 133, 0.49)','rgba(229, 61, 61, 0.49)','rgba(116, 61, 229, 0.49','rgba(218, 229, 61, 0.49)','rgba(21, 43, 157, 0.49)','rgba(153, 157, 21, 0.49)','rgba(199, 143, 186, 0.49)','rgba(149, 199, 143, 0.49)']

var ary = ['1','2','3','4','5','6','7','8','9','10','11','12','13','14','15','16','17','18','19','20','21','22','23','24','25','26','27','28','29','30','31','32','33','34','35','36'];


//$('#container').dragScroll({   }); 


//Drag scroll is not working in this fiddle but  it is  works fine in my browser

k = 0;

$("#container").on('scroll',function(){
var xz = $("#container").scrollLeft();

if(xz < 440   && xz > 320){
k = k +1;
}
else if( xz < 730 && xz > 620){
k = k +2;
}
});


$(".blocks"+k).detach();

var j = 0;

for (var i = k; i < k+7; i++){
$("#container").append('<div id="blocks" class = "blocks'+i+'" style="left:'+j+'%; background:'+colors[i]+';">'+ary[i]+'</div>');
j = j + 25;
}