JSFiddle - React, Tailwind, and code Playground

HTML

<div class="flow">
  <div>Test</div>
  <div>Test</div>
  <div>Test</div>
  <div>Test</div>
  <div>Test</div>
  <div>Test</div>
  <div>Test</div>
  <div>Test</div>
  <div>Test</div>
  <div>Test</div>
  <div>Test</div>
  <div>Test</div>
  <div>Test</div>
  <div>Test</div>
  <div>Test</div>
  <div>Test</div>
  <div>Test</div>
  <div>Test</div>
  <div>Test</div>
  <div>Test</div>
  <div>Test</div>
  <div>Test</div>
  <div>Test</div>
  <div>Test</div>
</div>

<div class="flow example2">
  <div>Test</div>
  <div>Test</div>
  <div>Test</div>
  <div>Test</div>
  <div>Test</div>
  <div>Test</div>
  <div>Test</div>
  <div>Test</div>
  <div>Test</div>
  <div>Test</div>
  <div>Test</div>
  <div>Test</div>
  <div>Test</div>
  <div>Test</div>
  <div>Test</div>
  <div>Test</div>
  <div>Test</div>
  <div>Test</div>
  <div>Test</div>
  <div>Test</div>
  <div>Test</div>
  <div>Test</div>
  <div>Test</div>
  <div>Test</div>
</div>

CSS

body {
  background: #eee;
}
h1 {
  margin: 10px;
  text-align: center;
}
.flow {
  
  background:
    linear-gradient(#f00 30%, rgba(255,0,0,0)),
    linear-gradient(rgba(255,0,0,0), #f00 70%) 0 100%,
    radial-gradient(50% 0, farthest-side, rgba(0,0,0,.2), rgba(0,0,0,0)),
    radial-gradient(50% 100%,farthest-side, rgba(0,0,0,.2), rgba(0,0,0,0)) 0 100%;
  background:
    linear-gradient(#f00 30%, rgba(255,0,0,0)),
    linear-gradient(rgba(255,0,0,0), #f00 70%) 0 100%,
    radial-gradient(farthest-side at 50% 0, rgba(0,0,0,.2), rgba(0,0,0,0)),
    radial-gradient(farthest-side at 50% 100%, rgba(0,0,0,.2), rgba(0,0,0,0)) 0 100%;
  background-repeat: no-repeat;
  background-color: #f00;
  background-size: 100% 60px, 100% 60px, 100% 10px, 100% 10px;
  background-attachment: local, local, scroll, scroll;
  margin: 40px auto;
  max-height: 200px;
  overflow: auto;
  width: 200px;
}
.flow > div {
  padding: 10px;
}
.flow:not(.example2) > div {
  
}