<div class="input-with-placeholder">
    <input type="text" id="username" required />
    <label for="username">Username</label>
</div>
* {
	padding: 0;
	margin: 0;
	list-style: none;
	border: 0;
	box-sizing: border-box;
	font-family: Arial, sans-serif;
	outline: 0;
}

body {
	padding: 40px;
}

.input-with-placeholder {
	width: 250px;
	position: relative;
	label {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		padding-left: 10px;
		transition: 300ms all;
	}
	input {
		width: 100%;
		height: 40px;
		padding: 0 15px;
		background: #f8f8f8;
		&:valid + label,
		&:focus + label {
			height: 50%;
			padding-left: 0;
			transform: translateY(-100%);
			font-size: 12px;
			color: #777;
		}
	}
}
View Compiled

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.7/tailwind.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.