JSFiddle - React, Tailwind, and code Playground

by Peter Galiba

HTML

<div id="slider">
  <div class="row">
    <ul>
      <li class="mybox"><a href="#">Item 1</a></li>
      <li class="mybox"><a href="#">Item 2</a></li>
      <li class="mybox"><a href="#">Item 3</a></li>
      <li class="mybox"><a href="#">Item 4</a></li>
      <li class="mybox"><a href="#">Item 5</a></li>
      <li class="mybox"><a href="#">Item 6</a></li>
      <li class="mybox"><a href="#">Item 7</a></li>
      <li class="mybox"><a href="#">Item 8</a></li>
      <li class="mybox"><a href="#">Item 9</a></li>
      <li class="mybox"><a href="#">Item 10</a></li>
    </ul>
  </div>
  <div class="row">
    <ul>
      <li class="mybox"><a href="#">Item 1</a></li>
      <li class="mybox"><a href="#">Item 2</a></li>
      <li class="mybox"><a href="#">Item 3</a></li>
      <li class="mybox"><a href="#">Item 4</a></li>
      <li class="mybox"><a href="#">Item 5</a></li>
      <li class="mybox"><a href="#">Item 6</a></li>
      <li class="mybox"><a href="#">Item 7</a></li>
      <li class="mybox"><a href="#">Item 8</a></li>
      <li class="mybox"><a href="#">Item 9</a></li>
      <li class="mybox"><a href="#">Item 10</a></li>
    </ul>
  </div>
</div>

CSS

#slider {
      position: relative;
      height: 250px;
      overflow-x: scroll;
      overflow-y: hidden;
    }

    #slider .row {
      height: 120px;
      margin: 0 0 10px;
      width: 3000em;
      padding: 0;
    }

    #slider .row ul {
      padding: 0;
      margin: 0;
      float: left;
    }

    #slider .mybox {
      float: left; 
      height: 100px;
      margin: 0 10px;
      padding: 10px;
      background: lightgray;
    }

JavaScript

var lists = document.getElementById('slider').getElementsByTagName('ul'),
    i = lists.length;
while (i--) {
    lists[i].parentNode.style.width = parseFloat(window.getComputedStyle( lists[i] ))) + 'px';
}