JSFiddle - React, Tailwind, and code Playground

by stopsatgreen

HTML

<div class="kittens"></div>
<svg>
    <defs>
        <filter id="blur">
            <feGaussianBlur stdDeviation="5"/>
        </filter>
    </defs>
    <!-- For IE10 you need to use this instead: -->
    <image xlink:href="http://placekitten.com/200/100" height="100" width="200" filter="url('#blur')" />
</svg>

CSS

.kittens {
    background-image: url('http://placekitten.com/200/100');
    height: 100px;
    width: 200px;
    -webkit-filter: blur(5px);
    filter: url('#blur');
    vertical-align: top;
}