JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
	<div class="box">
		<h1>backdrop-filter: blur(10px)</h1>
  </div>
</div>

CSS

html,
body,
.container {
	width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  background: url('http://interfacelift.com/wallpaper/previews/03922_crocochild_672x420.jpg') no-repeat center center;
  background-size: cover;
}

.container {
	display: flex;
  align-items: center;
  justify-content: center;
}

.box {
	padding: 1rem;
  border: 1px solid #fff;
  font-family: sans-serif;
  background-color: rgba(255, 255, 255, 0.3);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}