<div class="background" id="background"></div>

<div class="bg-white rounded p-10 text-center shadow-md">
	<h1 class="text-3xl">サインイン</h1>
	<p class="text-sm text-gray-700">パスワードの長さに応じて画像が鮮明になります</p>
	<div class="my-4 text-left">
		<label class="text-gray-800">メールアドレス:</label>
		<input type="email" class="border block w-full p-2 mt-2 rounded" placeholder="hogehoge@example.com" />
	</div>
	<div class="my-4 text-left">
		<label class="text-gray-800">パスワード</label>
		<input id="password" type="password" class="border block w-full p-2 mt-2 rounded" placeholder="強いと思うパスワードを入力して下さい" />
	</div>
</div>

@import url('https://fonts.googleapis.com/css?family=Muli&display=swap');

* {
	box-sizing: border-box;
}

body {
	font-family: 'Muli', sans-serif;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100vh;
	margin: 0;
	overflow: hidden;
}

.background {
	background-image: url('https://images.unsplash.com/photo-1556745757-8d76bdb6984b');
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
	position: absolute;
	top: -20px;
	left: -20px;
	bottom: -20px;
	right: -20px;
	filter: blur(20px);
	z-index: -1;
}

const password = document.getElementById('password');
const background = document.getElementById('background');

password.addEventListener('input', (e) => {
	const input = e.target.value;
	const length = input.length;
	const blurValue = 20 - length * 2;
	const blur = `blur(${blurValue}px)`;
	background.style.filter = blur;
});