JSFiddle - React, Tailwind, and code Playground

by Michael Prosser

CSS

html{
  height:100%;
}
body{
  height:100%;
}
body:before{
  content: "";
  background-color:rgba(0,0,0,0.7);
  display:block;
  position:fixed;
  top:0px;
  bottom:0px;
  left:0px;
  right:0px;
  transform:translateX(-100%);
  transition:all 0.6s;
  z-index: 999999;
}
body:after{
  content: '\2615  We\'ll be right here when you are ready.';
  color:rgba(255,255,255,0.7);
  font-family:helvetica;
  font-size:32px;
  line-height:32px;
  display:block;
  position:fixed;
  width:100%;
  text-align:center;
  top:50%;
  transform:translateX(-100%);
  transition:all 1.2s;
  z-index: 9999999;
}
body.blurred:before{
  transform:translateX(0%);
}
body.blurred:after{
  transform:translateY(0%);
}

JavaScript

function onBlur() {
    document.body.className = 'blurred';
};
function onFocus(){
    document.body.className = 'focused';
};
window.onfocus = onFocus;
window.onblur = onBlur;