JSFiddle - React, Tailwind, and code Playground

HTML

<div id="header" class="controls"> Header </div>

<div id="footer" class="controls"> footer </div>

CSS

#header {width:100%;height:50px; background:yellow}
#footer {width:100%;height:50px; background:red; position:absolute;bottom:0;left:0}

JavaScript

var timer;
var timeVisible = 5000;
timeFadeout();

function timeFadeout() {
    timer = setTimeout(function() {
        $('.controls').fadeOut();          
    }, timeVisible );
}

$('html').click(function() {
    clearTimeout(timer);
    if ($('.controls:visible').length) {
        $('.controls').fadeOut();
    }
    else {
        $('.controls').fadeIn();
        timeFadeout();
    }
});