JSFiddle - React, Tailwind, and code Playground

by andyjh07

HTML

<svg display="none" version="1.1" xmlns="http://www.w3.org/2000/svg" height="0" width="0">
    <defs>
        <filter id="blur" x="0" y="0">
            <feGaussianBlur stdDeviation="10" />
        </filter>
    </defs>
</svg>
<div id="bg">
    <div id="search-container">
        <div id="search-bg"></div>
        <div id="search">
             <h2>Awesome freelancers at the right price</h2>
             <h5><a href="#">How it works »</a></h5>
        </div>
    </div>
</div>

SCSS

#bg {
    background-position: center top;
    padding: 70px 90px 120px 90px;
}

#search-bg {
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    background-position: center -70px;
    -webkit-filter: blur(10px);
    -moz-filter: blur(10px);
    -ms-filter: blur(10px);
    -o-filter: blur(10px);
    filter: blur(10px);
    filter: url(#blur);
    filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='10');
}

#bg, #search-bg {
    background-image: url('https://picsum.photos/1200/903');
    background-repeat: no-repeat;
    background-size: 1080px auto;
}

#search-container {
    position: relative;
}

#search {
    position: relative;
    z-index: 100;
    padding: 20px;
}