JSFiddle - React, Tailwind, and code Playground

by Antério Vieira

HTML

<div class="visualizacoes">
	<div class="eventos" id="eventos-limpo"></div>
	<div class="eventos" id="eventos-manipulado"></div>
</div>

CSS

body {
   color: #888888;
   font: 15px/1.51 system, -apple-system, ".SFNSText-Regular", "San Francisco", "Roboto", "Segoe UI", "Helvetica Neue", "Lucida Grande", sans-serif;
   margin:0 auto;
   max-width:700px;
   padding:20px;
}

.eventos {
	padding: 0 20px 10px 20px;
	heigth: 23px;
}

.eventos span {
	height: 10px;
	width: 10px;
	display: inline-block;
	border: 1px solid #ccc;
	border-radius: 50%;
	margin-right: 3px;
}

.cor0 { transparent}

.cor1 { background-color: #FFE589}
.cor2 { background-color: #B9C6FF}
.cor3 { background-color: #99FF7E}
.cor4 { background-color: #FFB38A}
.cor5 { background-color: #A5FCFF}
.cor6 { background-color: #FF8E9B}
.cor7 { background-color: #E3FF7E}
.cor8 { background-color: #FFA3D8}
.cor9 { background-color: #5ca6ff}
.cor10 { background-color: #9BFFBB}

Babel + JSX

function debounce (func, wait = 1) {
	var timeout;
	
	return function(...args){
		clearTimeout(timeout);
		timeout = setTimeout(() => {
			func.apply(func, args);
			
			timeout = null;
		}, wait)
	}
}

$(document).ready(() => {

	var $eventosLimpo = $('#eventos-limpo'),
		$eventosDebounce = $('#eventos-debounce'),
		$acionamento = $(document),
		inicializado = false,
		frequencia = 100,
		corGlobal = 2,
		corAlterar = false,
		intervalo,
		corLimpa = 0,
		corDebounce = 0,
		tamanhoMaximo = 40,
		tamanhoLinha = 0
		
	var debounceEvent = debounce((div) => {
		corDebounce = corGlobal
	}, frequencia * 4)
	
	var alterarCorDebounce = debounce((div) => {
		corGlobal++
		
		corGlobal = corGlobal > 9 ? 2 : corGlobal
	}, frequencia * 4)
	
	function adicionarMarcador () {
		intervalo = setInterval(() => {
			tamanhoLinha++
			
			$eventosLimpo.append($('<span />', {class: 'cor' + corLimpa }))
			$eventosDebounce.append($('<span />', {class: 'cor' + corDebounce }))
			
			corLimpa = 0
			corDebounce = 0
						
			if( tamanhoLinha > tamanhoMaximo ) clearInterval(intervalo)
		}, frequencia)
	}
	
	$acionamento.on('mousemove', () => {
		if( !inicializado ){
			inicializado = true
			adicionarMarcador()
		}
		
		corLimpa = corGlobal
		debounceEvent()
		alterarCorDebounce()
	})
	
		

	

})