JSFiddle - React, Tailwind, and code Playground

HTML

<div class="textbox">
	<input type="text" id="name" placeholder="&nbsp;"/>
	<label for="name">Name</label>
</div>

<div class="textbox">
	<input type="email" id="email" placeholder="&nbsp;"/>
	<label for="email">Email</label>
</div>

<div class="textbox">
	<input type="tel" id="phone" placeholder="&nbsp;"/>
	<label for="phone">PhoneNumber</label>
</div>

SCSS

.textbox {
  position: relative;
  width: 250px;
  margin: 30px auto;
}
label {
	position: absolute;
	top: 0px;
	color: #a9a9a9;
	font-size: 1.4rem;
	transition: all ease-in-out 0.3s;
}
input {
	display: block;
	width: 250px;
	padding: 5px 0;
	border: none;
	border-bottom: solid 1px #1abc9c;
	background: linear-gradient(to bottom, transparent 92%, #1abc9c 8%) no-repeat;
	background-position: -300px 0;
	background-size: 300px 100%;
	font-size: 1.4rem;
	transition: all ease-in-out 0.3s;
	&:focus,
	&:not(:placeholder-shown) {
		background-position: 0 0;
		outline: none;
		+ label {
			top: -12px;
			color: #1abc9c;
			font-size: 1rem;
		}
	}
}