JSFiddle - React, Tailwind, and code Playground

by Joshua Powell

HTML

<svg xmlns="http://www.w3.org/2000/svg" height="0">
    <filter height="116%" width="116%" y="-8%" x="-8%" id="svgBlur">
        <feGaussianBlur stdDeviation="8" in="SourceGraphic"/>
    </filter>
</svg>
<div id="page-container">
    <img src="http://miriadna.com/desctopwalls/images/max/Fairy-forest.jpg" alt="forest" />
</div>

CSS

html, body {
    width: 100%;
    height: 100%;
}

#page-container {
    width: 100%;
    height: 100%;
    filter: url("#svgBlur");
    -webkit-filter: blur(8px);
}