JSFiddle - React, Tailwind, and code Playground

HTML

<div class="gallery">
    <div class="wrap-g"><!-- создаем блок большой ширины 1900px=(height:180px+margin-right:10px)*10 и в в этот блок помещаем клипы -->
        <div class="new-clips-main">1</div>
        <div class="new-clips-main">2</div>
        <div class="new-clips-main">3</div>
        <div class="new-clips-main">4</div>
        <div class="new-clips-main">5</div>
        <div class="new-clips-main">6</div>
        <div class="new-clips-main">7</div>
        <div class="new-clips-main">8</div>
        <div class="new-clips-main">9</div>
        <div class="new-clips-main">10</div>
    </div>
</div>

CSS

.gallery{
    height: 177px; ставим высоту на 17px больше, т.к. появилась полоса прокрутки шириной 17px
    width: 70%;
    overflow: auto;
    margin: 30px auto 0;
}
.wrap-g{
    width: 1900px;
}
.new-clips-main{
    float: left;
    height: 160px;
    width: 180px;
    margin-right: 10px;
    background-color: #31bfdd;
}