JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
  <div class="element">AAA</div>
  <div class="element">AAA</div>
  <div class="element">AAA</div>
  <div class="element">AAA</div>
  <div class="element">AAA</div>
  <div class="element">AAA</div>
  <div class="element">AAA</div>
  <div class="element">AAA</div>
  <div class="element">AAA</div>
</div>

CSS

.wrapper {
    --color-a: #eaecef;
    --color-b: white;
    --gradient-height: 60px;

    background: repeating-linear-gradient(180deg,
        var(--color-a),
        var(--color-a)      calc(var(--gradient-height) - 1px),
        var(--color-b)      var(--gradient-height),
        var(--color-b)      calc(var(--gradient-height) * 2 - 1px)
    );
    background-position-y: -30px;
    background-repeat: no-repeat;
}

.element {
  height: 10px;
  padding: 10px;
  line-height: 10px;
}