JSFiddle - React, Tailwind, and code Playground

HTML

<span class='arrow-left'>left</span>
<span class='arrow-right'>right</span>
<div class='row offer-pg-cont'>
    <div class='offer-pg'>
        <div class="col-md-3 portfolio-item">
            <img src="images/a1.png" class="items" height="100" alt="" />
        </div>
        <div class="col-md-3 portfolio-item">
            <img src="images/a1.png" class="items" height="100" alt="" />
        </div>
        <div class="col-md-3 portfolio-item">
            <img src="images/a1.png" class="items" height="100" alt="" />
        </div>
        <div class="col-md-3 portfolio-item">
            <img src="images/a1.png" class="items" height="100" alt="" />
        </div>
        <div class="col-md-3 portfolio-item">
            <img src="images/a1.png" class="items" height="100" alt="" />
        </div>
        <div class="col-md-3 portfolio-item">
            <img src="images/a1.png" class="items" height="100" alt="" />
        </div>
        <div class="col-md-3 portfolio-item">
            <img src="images/a1.png" class="items" height="100" alt="" />
        </div>
        <div class="col-md-3 portfolio-item">
            <img src="images/a1.png" class="items" height="100" alt="" />
        </div>
        <div class="col-md-3 portfolio-item">
            <img src="images/a1.png" class="items" height="100" alt="" />
        </div>
        <div class="col-md-3 portfolio-item">
            <img src="images/a1.png" class="items" height="100" alt="" />
        </div>
    </div>
</div>

CSS

.offer-pg-cont{
    width: 100%;
    overflow-x: auto;
    margin: 0px;
}
span.arrow-left,span.arrow-right{
    display: block;
    position: absolute;
    background-color: #555;
    top: 40px;
    color:white;
    z-index: 2;
    cursor: pointer;
}
span.arrow-left{
    left: 0px;
}
span.arrow-right{
    right: 0px;
}
span.arrow-left:hover,.offer-pg span.arrow-right:hover{
    background-color: #300;
}
.offer-pg{
    width: 1500px;
}
.item-wrapper.offer-con{
    background-color: #333 !important;
}
.offer-con .left-item h4 {
    color: #fff;
    font-weight: normal;
    margin: 0px;
}
.offer-con .right-item{
    float: right;
    padding: 10px;
}
.offer-con .right-item h5{
    color: #cb9944;
    margin: 0px;
    font-size: 14px;
}
.offer-pg > .portfolio-item{
    width: 100px;
    background-color:blue;
    margin-left:10px;
    float:left;
}

JavaScript

$(document).ready(function() {

        //cache our items and containers
        var items = $(".portfolio-item");
        var scrollContainer = $(".offer-pg-cont");
        function fetchItem(container, items, isNext) {
     			
        //bind events
        $(".arrow-left").click({direction: "prev"}, moveToItem);
        $(".arrow-right").click({direction: "next"}, moveToItem);
        }
        }



    });