JSFiddle - React, Tailwind, and code Playground

by SerGen

HTML

<div id="fps"></div>
<div class="kek"></div>
<div class="kek"></div>
<div class="kek"></div>
<div class="kek"></div>
<div class="kek"></div>
<div class="kek"></div>
<div class="kek"></div>
<div class="kek"></div>
<div class="kek"></div>
<div class="kek"></div>
<div class="kek"></div>
<div class="kek"></div>
<div class="kek"></div>
<div class="kek"></div>
<div class="kek"></div>
<div class="kek"></div>
<div class="kek"></div>
<div class="kek"></div>
<div class="kek"></div>
<div class="kek"></div>
<div class="kek"></div>
<div class="kek"></div>
<div class="kek"></div>
<div class="kek"></div>
<div class="kek"></div>
<div class="kek"></div>
<div class="kek"></div>
<div class="kek"></div>
<div class="kek"></div>
<div class="kek"></div>
<div class="kek"></div>
<div class="kek"></div>
<div class="kek"></div>
<div class="kek"></div>
<div class="kek"></div>
<div class="kek"></div>
<div class="kek"></div>
<div class="kek"></div>
<div class="kek"></div>
<div class="kek"></div>
<div class="kek"></div>
<div class="kek"></div>
<div class="kek"></div>
<div class="kek"></div>
<div class="kek"></div>
<div class="kek"></div>
<div class="kek"></div>
<div class="kek"></div>
<div class="kek"></div>
<div class="kek"></div>
<div class="kek"></div>
<div class="kek"></div>
<div class="kek"></div>
<div class="kek"></div>
<div class="kek"></div>
<div class="kek"></div>
<div class="kek"></div>
<div class="kek"></div>
<div class="kek"></div>
<div class="kek"></div>
<div class="kek"></div>
<div class="kek"></div>
<div class="kek"></div>
<div class="kek"></div>
<div class="kek"></div>
<div class="kek"></div>
<div class="kek"></div>
<div class="kek"></div>
<div class="kek"></div>
<div class="kek"></div>
<div class="kek"></div>
<div class="kek"></div>
<div class="kek"></div>
<div class="kek"></div>
<div class="kek"></div>
<div class="kek"></div>
<div class="kek"></div>
<div class="kek"></div>
<div class="kek"></div>
<div class="kek"></div>
<div class="kek"></div>
<div class="kek"></div>
<div...

CSS

.kek {
  display: inline-block;
  color: red;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  box-shadow: 0 0 100px currentColor;
  border: 10px dotted currentColor;
  filter: hue-rotate(180deg);
  transition: .5s;
}
.kek:hover {
  color: green;
}

#fps {
  position: fixed;
  top: 0;
  right: 0;
}

JavaScript

var last = performance.now();
var game = {
	_fpss: [],
	get fps () {
		var fpss = this._fpss.slice(0);

		fpss.sort();

		return fpss[Math.floor(fpss.length / 2)];
	},
	set fps (value) {
		this._fpss.unshift(value);
		
		this._fpss = this._fpss.filter(function(fps, index) {
			if (index > 10) {
				return false;
			};

			return true;
		});

		fps.innerHTML = this.fps;
	}
};

requestAnimationFrame(function meter (time) {
	game.fps = 1000 / (time - last);
	fps.innerHTML = Math.round(game.fps);
  last = time;
  
  requestAnimationFrame(meter);
});