JSFiddle - React, Tailwind, and code Playground

HTML

<div class="row">
	<div 
		style="position: relative;">
		<div class="col-sm-12">
			<span class="fancy-wrapper">
				<input
					name="name" type="text"
					class="form-control &Control/class; login-input" 
					/>
				<label for="name" class="control-label login-label">
					<span>a label</span>
				</label>
			</span>
		</div>
	</div>
</div>

CSS

.login-label {
  position: absolute;
  pointer-events: none;
  top: 12px;
  left: 30px;
  transition: 0.2s ease all;
  -moz-transition: 0.2s ease all;
  -webkit-transition: 0.2s ease all;
}

.login-input {
  height: 44px;
}

.login-input:focus {
  border-color: #ccc;
  box-shadow: none;
}

.fancy-wrapper > .login-input:focus ~ .login-label,
.fancy-wrapper > .login-input:valid ~ .login-label,
.fancy-wrapper > .login-input:-webkit-autofill ~ .login-label,
.fancy-wrapper > .login-input:focus ~ .control-label,
.fancy-wrapper > .login-input:valid ~ .control-label,
.fancy-wrapper > .login-input:-webkit-autofill ~ .control-label,
.fancy-wrapper > .login-input:focus ~ label,
.fancy-wrapper > .login-input:valid ~ label,
.fancy-wrapper > .login-input:-webkit-autofill ~ label,
.fancy-wrapper > .login-input:focus + *,
.fancy-wrapper > .login-input:valid + *,
.fancy-wrapper > .login-input:-webkit-autofill + *,
.fancy-wrapper > .login-input:focus + *,
.fancy-wrapper > .login-input:valid + *,
.fancy-wrapper > .login-input:-webkit-autofill + *,
.fancy-wrapper > .login-input:focus + *,
.fancy-wrapper > .login-input:valid + *,
.fancy-wrapper > .login-input:-webkit-autofill + *  {
  top: -10px;
  left: 29px;
  background-color: #fff;
  padding: 1px 4px;
  border-radius: 4px;
  margin-top: -2px;
}