<div class="mdl-layout mdl-js-layout mdl-color--grey-100">
	<main class="mdl-layout__content">
		<form action="#">
			<div class="mdl-textfield mdl-js-textfield">
				<input class="mdl-textfield__input" type="text" id="username"/>
				<label class="mdl-textfield__label" for="username">Username</label>
			</div>
		</form>
	</main>
</div>
body {
	text-align: center;
}
.mdl-layout {
	align-items: center;
	justify-content: center;
}
.mdl-layout__content {
	padding: 24px;
	flex: none;
}
.mdl-textfield__error {
	width: 100%;
	left: 0;
 text-align: left;
}

External CSS

  1. //fonts.googleapis.com/icon?family=Material+Icons
  2. //storage.googleapis.com/code.getmdl.io/1.0.1/material.teal-red.min.css
  3. //fonts.googleapis.com/css?family=Roboto:300,400,500,700

External JavaScript

  1. //storage.googleapis.com/code.getmdl.io/1.0.1/material.min.js