JSFiddle - React, Tailwind, and code Playground

by Dedi Wibisono

HTML

<!-- <div class="block" id="myDIV">
  <div class="inline-block">
    <div class="box">
      <img src="https://www.google.com/images/srpr/logo11w.png" width="70"  />
    </div>    
  </div>
  
  <div class="inline-block">
    <div class="box">
      <img src="https://www.google.com/images/srpr/logo11w.png" width="70" class="boxx"/>
    </div>    
  </div>
  
  <div class="inline-block">
    <div class="box">
      <img src="https://www.google.com/images/srpr/logo11w.png" width="70" class="boxx"/>
    </div>    
  </div>
  
  <div class="inline-block">
    <div class="box">
      <img src="https://www.google.com/images/srpr/logo11w.png" width="70" class="boxx"/>
    </div>    
  </div>
  
</div> -->

<div id="myDIV" class="block">
  <button class="btn">Menu 1</button>
  <button class="btn active">Banjarmasin</button>
  <button class="btn">Jayapura</button>
  <button class="btn">Samarinda</button>
  <button class="btn">Ujung Pandang</button>
</div>

CSS

.box img {
    -webkit-transition:1s;
    filter:grayscale(100%)
}
 .active,img.clicked{
   filter:grayscale(0%);
   margin: 0 auto;
   display:table;
 }
 
 .block{
   display: block;
   border:1px solid;
   padding: 8px;
   width:350px;
   white-space: nowrap;
    background-color: white;
    overflow: auto;
 }
 .inline-block{
   display:inline-block;
   margin: 0 8px
 }
 
 .btn {
  border: none;
  outline: none;
  display:inline-block;
  padding: 10px 16px;
  background-color: #f1f1f1;
  cursor: pointer;
  font-size: 18px;
}

/* Style the active class, and buttons on mouse-over */
.active, .btn:hover {
  background-color: #666;
  color: white;
}

JavaScript

/* $('.box img').on('click', function() {
    $(this).toggleClass('clicked');
}); */

var header = document.getElementById("myDIV");
var btns = header.getElementsByClassName("btn");
for (var i = 0; i < btns.length; i++) {
    btns[i].addEventListener("click", function() {
    var current = document.getElementsByClassName("active");
    current[0].className = current[0].className.replace(" active", "");
    this.className += " active";
    console.log(header.scrollLeft) 
    console.log(this.scrollWidth)
    header.scrollLeft = this.offsetLeft - 50
});
}