JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    
   Similar Questions
Canvas -webkit-filter: blur bug?
Is it possible to use -webkit-filter: blur(); on background-image?
CSS filter: blur(0px) still blurs the text
-webkit-animation/keyframes not playing nicely with -webkit-filter blur
Prevent flicker on webkit-transition of webkit-transform [duplicate]
Why doesn't blur(0) remove all text blur in Webkit/Chrome on retina screens?
transition filter blur chrome retarding
“-webkit-box-reflect” and “-webkit-transform: scale3d(…)” cause blur on Chrome
is there a way to override -webkit-filter: blur in a child element?
Javascript/ CSS webkit filter - remove blur on specific element
-webkit BLUR NOT WORKING phonegap 3.3
iphone webkit css animations cause flicker
Zoom and Blur an image on hover
    
</body>

CSS

body {
  -webkit-transition: all 1s;
  -moz-transition: all 1s;
  -ms-transition: all 1s;
  -o-transition: all 1s;
  transition: all 1s;
}

body.blurred {
  pointer-events: none;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -ms-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -ms-filter: blur(5px);
  -o-filter: blur(5px);
  filter: blur(5px);
}

JavaScript

setTimeout(function(){
    $('body').addClass('blurred');
}, 2000);