JSFiddle - React, Tailwind, and code Playground

by Mostafa Zeinivand

HTML

<div class="slider-container">
  <div class="slider">
    <div class="slide" style="background: orange">
      <img src="https://picsum.photos/id/10/400/200" />
      <img src="https://picsum.photos/id/100/400/200" />
      <img src="https://picsum.photos/id/1000/400/200" />
      <img src="https://picsum.photos/id/1001/400/200" />
    </div>
    <div class="slide" style="background: green">
      <img src="https://picsum.photos/id/1002/400/200" />
      <img src="https://picsum.photos/id/1003/400/200" />
      <img src="https://picsum.photos/id/1004/400/200" />
      <img src="https://picsum.photos/id/1005/400/200" />
    </div>
    <div class="slide" style="background: blue">
      <img src="https://picsum.photos/id/1008/400/200" />
      <img src="https://picsum.photos/id/1009/400/200" />
      <img src="https://picsum.photos/id/1010/400/200" />
      <img src="https://picsum.photos/id/1011/400/200" />
    </div>
  </div>
</div>

SCSS

.slider-container {
  position: relative;
  display: block;
  margin: 0 auto;
  width: 600px;
  overflow: hidden;
  
  .slider {
    display: block;
    white-space: nowrap;
    transform: translateX(-600px);
    
    .slide {
      display: inline-block;
      vertical-align: top;
      
      img {
        width: 150px;
        height: auto;
      }
    }
  }
}