JSFiddle - React, Tailwind, and code Playground

by karthick6891

HTML

<div class="wrapper">
  <div class="ball"></div>
  <div class="ball"></div>
  <div class="ball"></div>
  <div class="ball"></div>
  <div class="ball"></div>
  <div class="ball"></div>
  <div class="ball"></div>
  <div class="ball"></div>
  <div class="ball"></div>
  <div class="ball"></div>
  <div class="ball"></div>
  <div class="ball"></div>
  <div class="ball"></div>
  <div class="ball"></div>
  <div class="ball"></div>
  <div class="ball"></div>
  <div class="ball"></div>
  <div class="ball"></div>
  <div class="ball"></div>
  <div class="ball"></div>
  <div class="ball"></div>
  <div class="ball"></div>
  <div class="ball"></div>
  <div class="ball"></div>
  <div class="ball"></div>
  <div class="ball"></div>
  <div class="ball"></div>
  <div class="ball"></div>
  <div class="ball"></div>
  <div class="ball"></div>
  <div class="ball"></div>
  <div class="ball"></div>
  <div class="ball"></div>
  <div class="ball"></div>
  <div class="ball"></div>
  <div class="ball"></div>
  <div class="ball"></div>
  <div class="ball"></div>
  <div class="ball"></div>
  <div class="ball"></div>
  <div class="ball"></div>
  <div class="ball"></div>
  <div class="ball"></div>
  <div class="ball"></div>
  <div class="ball"></div>
  <div class="ball"></div>
  <div class="ball"></div>
  <div class="ball"></div>
  <div class="ball"></div>
  <div class="ball"></div>
  <div class="ball"></div>
  <div class="ball"></div>
  <div class="ball"></div>
  <div class="ball"></div>
  <div class="ball"></div>
  <div class="ball"></div>
  <div class="ball"></div>
  <div class="ball"></div>
  <div class="ball"></div>
  <div class="ball"></div>
  <div class="ball"></div>
  <div class="ball"></div>
  <div class="ball"></div>
  <div class="ball"></div>
  <div class="ball"></div>
  <div class="ball"></div>
  <div class="ball"></div>
  <div class="ball"></div>
  <div class="ball"></div>
  <div class="ball"></div>
  <div class="ball"></div>
  <div class="ball"></div>
  <div class="ball"></div>
 ...

CSS

* {
  margin: 0;
  padding: 0;
}

html, body {
  width: 100%;
  height: 100%;
  min-height: 100%;
  background: #333;
}

body {
  -webkit-filter: hue-rotate(80deg);
          filter: hue-rotate(80deg);
}

.wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #600;
  -webkit-filter: contrast(100) hue-rotate(200deg);
          filter: contrast(100) hue-rotate(200deg);
}

.ball {
  width: 50px;
  height: 50px;
  background: #04f;
  float: left;
  margin: 35px;
  border-radius: 40px;
  -webkit-filter: blur(20px);
          filter: blur(20px);
}

.bigball {
  width: 120px;
  height: 120px;
  background: #04f;
  border-radius: 50%;
  -ms-transform: translate3d(0, 0, 0);
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -webkit-filter: blur(40px);
          filter: blur(40px);
  position: absolute;
  top: 0;
  left: 0;
}

JavaScript

var el = document.querySelector('.bigball');

window.onmousemove = function(e){
  var x = e.pageX;
  var y = e.pageY;
  
  el.style.top = y - el.offsetHeight/2 + "px"
  el.style.left = x - el.offsetWidth/2  + "px"
}