JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
    <div class="container-wrap">
    <div class="form-container">
        <div class="form"></div>
    </div>
    <div class="form-container">
        <div class="form"></div>
    </div>
    <div class="form-container">
        <div class="form"></div>
    </div>
    <div class="form-container">
        <div class="form"></div>
    </div> 
     <div class="form-container">
        <div class="form"></div>
    </div>  <div class="form-container">
        <div class="form"></div>
    </div> 
    </div>

</div>

CSS

.container{
    overflow:hidden

}
.container-wrap {
    width: 9999px;
}
.form-container{
    width: 200px;
    height: 50px;
    float: left;
     margin-left: 20px;
}
.form{
    background-color: blue;
    height: 30px;
    width: 100%;
   
    border:  1px solid gray;
    display: inline-block;
    
}

JavaScript

var active = false,
        coords = 0;

	$('.container').mousedown(function(event){
        active = true;
        coords = event.clientX;
	})

    $(document).mousemove(function(event){
        if(active){
          	$('.container').scrollLeft(coords - event.clientX );
        }
    }).mouseup(function(event){
        active = false;
	})