JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
</div>

CSS

#container {
  width: 300px;
  height: 200px;
  border: 1px solid #000;
  overflow: auto;
}
.item {
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: center;
  font-size: 5em;
}
.item:nth-child(3n+1) {
  background: #fff6be;
}
.item:nth-child(3n+2) {
  background: #ffa1ac;
}
.item:nth-child(3n) {
  background: #cbbcf6;
}