JSFiddle - React, Tailwind, and code Playground

by Tan

HTML

<div class="scrolling-wrapper-flexbox">
  <div class="card"><h2>1</h2></div>
  <div class="card"><h2>2</h2></div>
  <div class="card"><h2>3</h2></div>
  <div class="card"><h2>4</h2></div>
  <div class="card"><h2>5</h2></div>
  <div class="card"><h2>6</h2></div>
  <div class="card"><h2>7</h2></div>
  <div class="card"><h2>8</h2></div>
  <div class="card"><h2>9</h2></div>
  <div class="card"><h2>10</h2></div>
  <div class="card"><h2>11</h2></div>
  <div class="card"><h2>12</h2></div>
</div>

CSS

.scrolling-wrapper-flexbox {
 margin:auto;
 max-width:830px;
 display: flex;
  flex-wrap: wrap;
  justify-content:space-between;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  &::-webkit-scrollbar {
    display: none;
  }
}
  .card {
    background-color:red;
    margin:0 0 10px 0;
    width:200px;height:200px;
    flex: 0 0 auto;
  }
  
    @media screen and (max-width: 830px) {  
  .scrolling-wrapper-flexbox {
  justify-content: space-around;}
  
  }
  
  
  @media screen and (max-width: 480px) {  
  .scrolling-wrapper-flexbox {flex-wrap: nowrap;
  justify-content: flex-start;}
  .card {margin:0 10px 0 0;}
  }