JSFiddle - React, Tailwind, and code Playground

by rockes

HTML

<body>
    <h1>Title</h1>
    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, 
        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
        nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in 
        reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
    </div>
    <br/><br/><br/><br/>
    <input type=button value="CLICK" />
</body>

CSS

body {
    background:url('http://i0.kym-cdn.com/photos/images/original/000/051/726/17-i-lol.jpg?1318992465');
    background-size: cover;
}
h1, div {
    color: white;    
}
input {
    color: white;
    background-color: red;
}
.blur-bgimage {
    overflow: hidden;
    text-align: left;
}
.blur-bgimage:before {
    content: "";
    position: absolute;
    width : 100%;
    height: 100%;
    background: inherit;
    z-index: -1;
    
    filter        : blur(10px);
    -moz-filter   : blur(10px);
    -webkit-filter: blur(10px);
    -o-filter     : blur(10px);
    
    transition        : all 2s linear;
    -moz-transition   : all 2s linear;
    -webkit-transition: all 2s linear;
    -o-transition     : all 2s linear;
}

JavaScript

document.querySelector("input").onclick = function() {
    if(document.body.hasAttribute("class")) { document.body.removeAttribute("class"); }
    else { document.body.setAttribute("class", "blur-bgimage"); }
};