JSFiddle - React, Tailwind, and code Playground

by Soviut

HTML

<div class="scroller">
  <div class="scroll-body">
    <div>
      One
    </div>

    <div>
      Two
    </div>

    <div>
      Three
    </div>

    <div>
      Four
    </div>

    <div>
      Five
    </div>
  </div>
</div>

CSS

.scroller {
  overflow-x: scroll;
}


.scroll-body {
  display: flex;
}

.scroll-body > * {
  display: inline-block;
  width: 500px;
  height: 100px;
  flex-shrink: 0;

  background: linear-gradient(to left, #e66465, #9198e5);
}