JSFiddle - React, Tailwind, and code Playground

by twobomb three

HTML

<div id="main">
<img id="fortest" src="http://s1.iconbird.com/ico/2013/12/539/w256h2561387214964Notes.png">
<div class="userblock">
    <img  src="http://icons.iconarchive.com/icons/artua/dragon-soft/512/User-icon.png" />
        <span>Текстовая информация. Пример.Текстовая информация. Пример.Текстовая информация. Пример.Текстовая информация. Пример</span>
    
</div>
<div class="userblock">
    <img  src="http://icons.iconarchive.com/icons/artua/dragon-soft/512/User-icon.png" />
        <span>Текстовая информация. Пример.Текстовая информация. Пример.Текстовая информация. Пример.Текстовая информация. Пример</span>
    
</div>
<div class="userblock">
    <img  src="http://icons.iconarchive.com/icons/artua/dragon-soft/512/User-icon.png" />
        <span>Текстовая информация. Пример.Текстовая информация. Пример.Текстовая информация. Пример.Текстовая информация. Пример</span>
    
</div>
    <input type= "text" value="лалалаа" ></input>
    <input type= "button" value="Отправить"></input>
</div>
    <input type= "button" id="blur" value="Размыть"></input>

CSS

#main{
    width:100%;
    height:100%;
    position:fixed;    
    background:url(http://cdn.wonderfulengineering.com/wp-content/uploads/2013/12/high-definition-wallpaper-3.jpg);
    background-size: 100% 100%;
}
.blurred {
		-webkit-filter: blur(5px);
		-moz-filter: blur(5px);
		-ms-filter: blur(5px);
		-o-filter: blur(5px);
		filter: blur(5px);
}
#fortest{
    position:absolute;
    bottom:20px;
    right:30px;
    z-index:0;
}
.userblock{
    z-index:1;
    margin:10px;
    width:80%;
    background:rgba(255,0,0,0.2);
}
#blur{
    position:absolute;
    top:50px;
    right:30px;
    border-radius:10px;
    width:100px;
    height:30px;
    background:#F00;
    border:0;
    color:#FFF;
}
.userblock span{
    color:#FFF;
    display:inline-block;
}
.userblock img{
    max-height:50px;
    display:inline-block;
}
html,body{
    margin:0;
    height:100%;
    width:100%
}
#div{
    width:200px;
    height:200px;
    background:red;
}

JavaScript

var status = false;
$("#blur").bind("click",function(i,e){
    if(!status){
        $("#main").addClass("blurred");
        status = true;
    }
    else{
       $("*").removeClass("blurred");
       status = false;
    }
});