JSFiddle - React, Tailwind, and code Playground

by philll_t

HTML

<div class="grid-wrapper">
  <div class="grid">
   <div>
    X
   </div>
   <div>
    X
   </div>
   <div>
    X
   </div>
   <div>
    X
   </div>

   <div>
    X
   </div>

   <div>
    X
   </div>

   <div>
    X
   </div>

   <div>
    X
   </div>
  </div>
</div>

CSS

.grid-wrapper {
  
  margin: auto;
  
}

.grid {
  width: 500px;
  overflow-x: auto;
  display: flex;
  gap: 10px;
  min-height: 100px;
}

.grid div {
  width: 100px;
  height: 100px;
  background-color: grey;
  border-radius: 12px;
}