JSFiddle - React, Tailwind, and code Playground

HTML

<div class="stripe-1"></div>

SCSS

body {
  background: black;
}
.stripe-1 {
  width: 20px;
  height: 20px;
  //padding: 10px;
  background: linear-gradient(blue 25%, yellow 25%, yellow 50%, red 50%, red 75%, green 75%);
  //background-origin: content-box, padding-box;
  //background-clip: content-box, padding-box;
  //border: 1px solid;
  //border-image: linear-gradient(blue 25%, yellow 25%, yellow 50%, red 50%, red 75%, green 75%) 1;
  //background: black;
  //border-image: red 20%;
}