JSFiddle - React, Tailwind, and code Playground

HTML

<div class="frosted">
    <p>These aren't</p>
</div>

<div class="frosted">
    <p>the droids</p>
</div>

<div class="frosted">
    <p>you're looking for.</p>
</div>

CSS

body {
    position: relative;
    background: url(http://media-cache-ak0.pinimg.com/736x/fc/05/35/fc053581a37400eee124f5e1bb0fa85d.jpg) fixed;
    background-size: cover;
}

/* blur the same background as the body */
.frosted::before {
    position: absolute;
    margin: -8px 0 0 -8px;
    content: "";
    left: 0;
    top: 0;
    width: calc(16px + 100%);
    height: calc(16px + 100%);
    background: url(http://media-cache-ak0.pinimg.com/736x/fc/05/35/fc053581a37400eee124f5e1bb0fa85d.jpg) fixed;
    background-size: cover;
    -webkit-filter: blur(8px);
	-moz-filter: blur(8px);
	-ms-filter: blur(8px);
	-o-filter: blur(8px);
	filter: blur(8px);
    z-index: -2;
}

/* add a tint layer to brighten (or darken) */
.frosted::after {
    position: absolute;
    content: "";
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(255,255,255,0.5);
    z-index: -1;
}

/* The content */
.frosted {
    font-family: Avenir Next, Avenir, Verdana, sans-serif;
    font-weight: 600;
    font-size: 32px;
    color: #333;
    text-shadow: 1px 1px 0px rgba(255,255,255,0.5);
    position: relative;
    margin: 40px;
    padding-left: 16px;
    width: 400px;
    height: 100px;
    border: 3px solid rgba(255,255,255,0.8);
    border-radius: 6px;
    box-shadow: 0 0 16px rgba(0,0,0,0.5);
}