JSFiddle - React, Tailwind, and code Playground

by LeeMellinger

CSS

.inactive{
    background : red;
}

.active{
     background : green;   
}

JavaScript

// If theres no activity for 5 seconds do something
    var activityTimeout = setTimeout(inActive, 5000);
    
    function resetActive(){
        $(document.body).attr('class', 'active');
        clearTimeout(activityTimeout);
        activityTimeout = setTimeout(inActive, 5000);
    }
    
    function inActive(){
        $(document.body).attr('class', 'inactive');
    }
    
    // Check for mousemove, could add other events here such as checking for key presses ect.
    $(document).bind('mousemove', function(){resetActive()});