JSFiddle - React, Tailwind, and code Playground

HTML

<section id="slide_section">       
      <div id="slide">
          <div id="imgSlide">
              <div class="slide" id="img1">
                  img...
              </div>
              <div class="slide" id="img2">
                  img...
              </div>

              <div class="slide" id="img3">
                  img...        
              </div>

              <div class="slide" id="img4">
                  img...
              </div>

              <div class="slide" id="img5">
                  img..
              </div>

              <div class="slide" id="img6">
                  img...
              </div>
          </div>
      </div>
</section>

CSS

#slide_section{
        width: 100%;
        height: auto;
        padding-bottom: 40px;
    }

    #slide{
        width: 76.06295754026354vw;
        height: auto;
        margin: auto;
    }

    #imgSlide{
        width: 100%;
        height: 300px;
        margin: unset;
        display: flex;
        
        /*Modifica está linha*/
        transform: translateX(calc(-15% - -5vw));
    }

    .slide{
        width: 76.06295754026354vw;
        margin-top: auto;
        margin-bottom: auto;
    }

    .slide img {
        width: 120px;
        height: 210px;
    }

    .slide{
        width: 158px;
        margin-top: auto;
        margin-bottom: auto;
    }

    .slide img{
        width: 158px;
        height: 276px;
    }