JSFiddle - React, Tailwind, and code Playground

HTML

<div class="box first"></div>
<div class="box second"></div>
<div class="box third"></div>

CSS

.box {
  margin: 80px 30px;
  width: 200px;
  height: 200px;
  position: relative;
  background: #fff;
  float: left;
}
.box:before {
      content: '';
      z-index: -1;
      position: absolute;
      width: 220px;
      height: 220px;
      top: -10px;
      left: -10px;
}

.first:before {
  background-image: linear-gradient(90deg, yellow, gold);
}
.second:before {
  background-image: linear-gradient(0deg, orange, red);
}
.third:before {
        background-image: repeating-linear-gradient(-45deg,#cc2a2d,#cc2a2d 30px,#f2f2f2 30px,#f2f2f2 40px,#0e71bb 40px,#0e71bb 70px,#f2f2f2 70px,#f2f2f2 80px);
}