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: repeating-linear-gradient(45deg, #B6CABC, #B6CABC 20px, #465298 20px, #465298 40px);
}

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

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