JSFiddle - React, Tailwind, and code Playground

by Florence Maurice

HTML

<div></div>
<div></div>
<div></div>
<div></div>

CSS

div {
  width: 200px;
  height: 150px;
  display: inline-block;
}

div:nth-child(1){
background: #ADDDD2;
background: -webkit-repeating-radial-gradient(circle , #ADDDD2 10px, #040707 15px);
background: repeating-radial-gradient(circle, #ADDDD2 10px, #040707 15px);
}
div:nth-child(2) {
background: #ADDDD2;
background-image: -webkit-repeating-linear-gradient(#ADDDD2 10px, #040707 15px);
background-image: repeating-linear-gradient(#ADDDD2 10px, #040707 15px);
}
div:nth-child(3) {
background: #ADDDD2;
background: -webkit-repeating-linear-gradient(#ADDDD2 0%, #040707 50%);
background: repeating-linear-gradient(#ADDDD2 0%, #040707 50%);
}
div:nth-child(4) {
background: #ADDDD2;
background: -webkit-repeating-linear-gradient(#ADDDD2 25%, #040707 50%);
background: repeating-linear-gradient(#ADDDD2 25%, #040707 50%);
}