JSFiddle - React, Tailwind, and code Playground

HTML

<ol>
  <li>repeating gradient
    <div id="grad1"></div>
  </li>
  <li>Zebra pattern   
    <div id="grad2"></div>
  </li>     
  <li>Zebra pattern   3
    <div id="grad3"></div>
  </li>   
</ol>

CSS

div {
  display: block;
  width: 50%;
  height: 80px;
  border-color: #000000;
  padding: 10px;
}

#grad {
  background-image: -moz-repeating-linear-gradient(180deg,rgb(26,198,204),rgb(26,198,204) 7%, rgb(100,100,100) 10%);
  background-image: -webkit-repeating-linear-gradient(180deg,rgb(26,198,204),rgb(26,198,204) 7%, rgb(100,100,100) 10%);
  background-image: -o-repeating-linear-gradient(180deg,rgb(26,198,204),rgb(26,198,204) 7%, rgb(100,100,100) 10%);
  background-image: repeating-linear-gradient(180deg,rgb(26,198,204),rgb(26,198,204) 7%, rgb(100,100,100) 10%);
}

#grad1 {
  background-image: repeating-linear-gradient(-45deg, rgba(209, 232, 220, 1), rgba(209, 232, 220, 1) 75px, rgba(212, 238, 222, 1) 10px, rgba(212, 238, 222, 1) 150px);
}

#grad2 {
  background-color: #068445;
  background-image: repeating-linear-gradient(-45deg, rgba(6, 132, 69, 1), rgba(6, 132, 69, 1) 75px, rgba(27, 167, 80, 1) 10px, rgba(27, 167, 80, 1) 150px);
}