JSFiddle - React, Tailwind, and code Playground

by Blender

HTML

<div class="fade-outs">Foo</div>

CSS

.fade-outs {
    padding: 40px;
    background: red;
}

JavaScript

var idleTimer;

function startTimer() {
    stopTimer();
    
    idleTimer = setInterval(function() {
        $('.fade-outs').stop().fadeOut();
    }, 1000);
}

function stopTimer() {
    idleTimer && clearInterval(idleTimer);
}

$(document).on('mousemove', startTimer);

$('.fade-outs').on({
    mouseleave: startTimer,
    mouseenter: stopTimer,
    mousemove: function(e) {
        e.stopPropagation();
    }
});