JSFiddle - React, Tailwind, and code Playground

by Evgeny Pisarev

HTML

<div></div>

CSS

@import url('https://fonts.googleapis.com/css2?family=Neucha&display=swap');


* {
  box-sizing: inherit;
}

html {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: 'Neucha', cursive;
}
div {
  position: relative;
  height: 500px;
  background: linear-gradient(35deg, darkviolet, deepskyblue);
}
div::before {
  content: "";
  position: absolute;
  top: 50px;
  left: 0;
  width: 100px;
  height: 210px;
  background: radial-gradient(2px, white, transparent) repeat center / 20px 20px;
}