JSFiddle - React, Tailwind, and code Playground

HTML

<div class="mesh">
<div class="tile tile11"></div>
<div class="tile tile12"></div>
<div class="tile tile13"></div>
<div class="tile tile21"></div>
<div class="tile tile22"></div>
<div class="tile tile23"></div>
<div class="tile tile31"></div>
<div class="tile tile32"></div>
<div class="tile tile33"></div>
</div>

CSS

.mesh {
	overflow: hidden;
	position: absolute;
	width: 300px;
	height: 300px;
}


.tile {
    width: 200px;
    height: 200px;
    position: absolute;
    display: block;
}

.tile11, .tile21, .tile31 {
    left: -50px;
}
.tile12, .tile22, .tile32 {
    left: 50px;
}
.tile13, .tile23, .tile33 {
    left: 150px;
}
.tile11, .tile12, .tile13 {
    top: -50px;
}
.tile21, .tile22, .tile23 {
    top: 50px;
}
.tile31, .tile32, .tile33 {
    top: 150px;
}

.tile11 {
	background: -webkit-radial-gradient(center center, 100px 100px, 
	      rgba(255, 0, 0, 1) 0%, 
	      rgba(255, 0, 0, 0.5) 50%,
	      rgba(255, 0, 0, 0) 100%);}

.tile12 {
	background: -webkit-radial-gradient(center center, 100px 100px, 
	      rgba(255, 0, 0, 1) 0%, 
	      rgba(255, 0, 0, 0.5) 50%,
	      rgba(255, 0, 0, 0) 100%);}

.tile13 {
	background: -webkit-radial-gradient(center center, 100px 100px, 
	      rgba(255, 255, 0, 1) 0%, 
	      rgba(255, 255, 0, 0.5) 50%,
	      rgba(255, 255, 0, 0) 100%);}

.tile21 {
	background: -webkit-radial-gradient(center center, 100px 100px, 
	      rgba(0, 255, 0, 1) 0%, 
	      rgba(0, 255, 0, 0.5) 50%,
	      rgba(0, 255, 0, 0) 100%);}

.tile22 {
	background: -webkit-radial-gradient(center center, 100px 100px, 
	      rgba(0, 0, 255, 1) 0%, 
	      rgba(0, 0, 255, 0.5) 50%,
	      rgba(0, 0, 255, 0) 100%);}

.tile23 {
	background: -webkit-radial-gradient(center center, 100px 100px, 
	      rgba(255, 0, 255, 1) 0%, 
	      rgba(255, 0, 255, 0.5) 50%,
	      rgba(255, 0, 255, 0) 100%);}
.tile31 {
	background: -webkit-radial-gradient(center center, 100px 100px, 
	      rgba(255, 0, 0, 1) 0%, 
	      rgba(255, 0, 0, 0.5) 50%,
	      rgba(255, 0, 0, 0) 100%);}

.tile32 {
	background: -webkit-radial-gradient(center center, 100px 100px, 
	      rgba(255, 100, 0, 1) 0%, 
	      rgba(255, 100, 0, 0.5) 50%,
	      rgba(255, 100, 0, 0) 100%);}

.tile33 {
	background: -webkit-radial-gradient(center center, 100px 100px, 
	      rgba(255, 200, 0, 1) 0%, 
	      rgba(255,...