JSFiddle - React, Tailwind, and code Playground

by Hugo Vale Pereira

HTML

<div id="container">
  <div class="scrollEl">
  1
  </div>
  <div class="scrollEl">
  2
  </div>
  <div class="scrollEl">
  3
  </div>
  <div class="scrollEl">
  4
  </div>
  <div class="scrollEl">
  5
  </div>
  <div class="scrollEl">
  6
  </div>
  <div class="scrollEl">
  7
  </div>
  <div class="scrollEl">
  8
  </div>
  <div class="scrollEl">
  9
  </div>
  <div class="scrollEl">
  10
  </div>
  <div class="scrollEl">
  11
  </div>
  <div class="scrollEl">
  12
  </div>
  <div class="scrollEl">
  13
  </div>
</div>

CSS

#container{
  position: absolute;
  display:flex;
  align-content: baseline;
  width: 90vw;
  height:90vh;
  background-color: #ddd;
  overflow-x:auto;
  scroll-snap-type: x mandatory;
}


.scrollEl{
  flex: 0 0 auto;
  width:100px;
  height:100px;;
  margin:20px;
  background-color:#777;
  scroll-snap-align: center;
  
}


.scrollEl:hover {
  
  width:200px;
  
}