JSFiddle - React, Tailwind, and code Playground

by lemon kazi

HTML

<main>
  <header>
    <h1>Smooth Horizontal Scrolling</h1>
  </header>
<section class="content">
  
 
  
  <div class="scrolling-wrapper-flexbox">
    <div class="card"><h2>Card</h2></div>
    <div class="card"><h2>Card</h2></div>
    <div class="card"><h2>Card</h2></div>
    <div class="card"><h2>Card</h2></div>
    <div class="card"><h2>Card</h2></div>
    <div class="card"><h2>Card</h2></div>
    <div class="card"><h2>Card</h2></div>
    <div class="card"><h2>Card</h2></div>
    <div class="card"><h2>Card</h2></div>
  </div>
  
</section>
</main>

CSS

h2 {
  color: white;
}



.scrolling-wrapper-flexbox {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  
  .card {
    flex: 0 0 auto;
    margin-right: 3px;
  }
}

.card {
  border: 2px solid $red;
  width: 150px;
  height: 75px;
  background: black;
}

.scrolling-wrapper, .scrolling-wrapper-flexbox {
  height: 80px;
  margin-bottom: 20px;
  width: 100%;
  -webkit-overflow-scrolling: touch;
 
}