JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<div class="container mt-5">
  <form>
    <div class="form-group">
      <label for="exampleInputEmail1">Email address</label>
      <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
      <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
    </div>
    <div class="form-group">
      <label for="exampleInputPassword1">Password</label>
      <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
    </div>
    <div class="form-group">
      <label for="refreshTimer">Refresh Timer</label>
      <input type="text" class="form-control" id="refreshTimer" disabled placeholder="???">
    </div>
    <div class="form-group form-check">
      <input type="checkbox" class="form-check-input" id="exampleCheck1">
      <label class="form-check-label" for="exampleCheck1">Check me out</label>
    </div>


    <button type="submit" class="btn btn-primary">Submit</button>
  </form>
</div>

JavaScript

// Refresh Rate is how often you want to refresh the page 
// bassed off the user inactivity. 
var refresh_rate = 10; //<-- In seconds, change to your needs
var last_user_action = 0;
var has_focus = false;
var lost_focus_count = 0;
// If the user loses focus on the browser to many times 
// we want to refresh anyway even if they are typing. 
// This is so we don't get the browser locked into 
// a state where the refresh never happens.    
var focus_margin = 10;

// Reset the Timer on users last action
function reset() {
  last_user_action = 0;
  updateVisualTimer('Reset Timer');
}

function updateVisualTimer(value) {
  var element = document.getElementById('refreshTimer');
  if (value) {
    element.value = value
  } else if (has_focus) {
    element.value = 'User has focuse won\'t refresh'
  } else if (last_user_action >= refresh_rate) {
    element.value = 'Refreshing';
  } else {
    element.value = (refresh_rate - last_user_action);
  }
}

function windowHasFocus() {
  has_focus = true;
}

function windowLostFocus() {
  has_focus = false;
  lost_focus_count++;
  console.log(lost_focus_count + " <~ Lost Focus");
}

// Count Down that executes ever second
setInterval(function() {
  last_user_action++;
  refreshCheck();
  updateVisualTimer();
}, 1000);

// The code that checks if the window needs to reload
function refreshCheck() {
  var focus = window.onfocus;
  if ((last_user_action >= refresh_rate && !has_focus && document.readyState == "complete") || lost_focus_count > focus_margin) {
    window.location.reload(); // If this is called no reset is needed
    reset(); // We want to reset just to make sure the location reload is not called.
  }

}
window.addEventListener("focus", windowHasFocus, false);
window.addEventListener("blur", windowLostFocus, false);
window.addEventListener("click", reset, false);
window.addEventListener("mousemove", reset, false);
window.addEventListener("keypress", reset, false);
window.addEventListener("scroll", reset,...