JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
    
    <div class="content"></div>
    <div class="content"></div>
    <div class="content"></div>
    <div class="content"></div>
    <div class="content"></div>
    <div class="content"></div>
    <div class="content"></div>
    
</div>

CSS

body.hideMouse *, body.hideMouse{
    cursor: none;
}
body.hideMouse *{
    pointer-events: none;
}
.container {
    width: 400px;
    height: 300px;
    margin: 0 auto;
}
.content {
    display:inline-block;
    width: 100px;
    height: 50px;
    background-color: cornflowerblue;
    -webkit-transition: opacity 500ms;
    -moz-transition: opacity 500ms;
    -ms-transition: opacity 500ms;
    -o-transition: opacity 500ms;
    transition: opacity 500ms; 
}

.content:hover {
    opacity: 0.6;
}

JavaScript

var body = $('body');

hideMouse();

function hideMouse() {
    body.addClass("hideMouse");
    body.on('mousemove', function(){

        if(window.hiding) return true;
        window.hiding = true;
        body.removeClass("hideMouse");
        $('div.mouseHider').remove();
        clearTimeout(window.hideMouse);
        window.hideMouse = setTimeout(function(){
            body.addClass("hideMouse");
            $('<div class="mouseHider"></div>').css({
                position: 'fixed',
                top: 0,
                left: 0,
                height: '100%',
                width: '100%',
                zIndex: 99999
            }).appendTo(body);
            redraw(document.body);
            setTimeout(function(){
                window.hiding = false;
            }, 100);
        }, 4000);
    });
}

function redraw(e) {
    e.style.display = 'none';
    e.offsetHeight;
    e.style.display = 'block';
}