JSFiddle - React, Tailwind, and code Playground

by ponyspy

HTML

<script src="https://raw.githubusercontent.com/litera/jquery-scrollintoview/master/jquery.scrollintoview.min.js"></script>
<div class="outer">
    <div class="inner">
        <div class="one">
           <div class="cool"></div>
           <div class="cool"></div>
           <div class="cool"></div>        
        </div>
        <div class="two">
           <div class="cool"></div>
           <div class="cool"></div>
           <div class="cool"></div>        
        </div>            
    </div>    
</div>
<div class="zlo">zlo</div>

CSS

.outer {
  overflow-x: auto;
  white-space: nowrap;
  overflow-y: hidden;    
  width: 160px;
  height: 160px;
}

.cool {
    width: 160px;
    height: 160px;
    margin-right: 10px;
    background-color: blue;
    display: inline-block;
}

.inner, .one, .two {
    display: inline-block;
}

.cool:nth-child(odd) {
    background-color: red;
}

JavaScript

$('.cool').click(function(){
    $(this).scrollintoview({
        duration: 300,
        direction: "x",
    });
});