JSFiddle - React, Tailwind, and code Playground

by beqa bendeliani

HTML

<div id="parent" class="parent">
     <div class="child"> test</div>
     <div class="child"> test</div>
     <div class="child"> test</div>
     <div class="child"> test</div>
     <div class="child"> test</div>
     <div class="child"> test</div>
     <div class="child"> test</div>
     <div class="child"> test</div>
     <div class="child"> test</div>
     <div class="child"> test</div>
     <div class="child"> test</div>
     <div class="child"> test</div>
     <div class="child"> test</div>
     <div class="child"> test</div>
     <div class="child"> test</div>
     <div class="child"> test</div>
</div>

CSS

.parent{
  width:100%;
  white-space: nowrap;
  overflow-y: hidden;
  overflow-x: scroll;
}
.child{
  display:inline-block;
  padding:10%;
  background-color:blue;
  margin:10px;
}

JavaScript

var parent = document.getElementById("parent");
    parent.scrollLeft = parent.scrollWidth;